jQuery里面的ajax用法-------底层到应用

喜欢ヅ旅行 2022-02-04 09:57 141阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">
      <title>jquery中对ajax的封装</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      
      
    
    </head>
    <body>
    
    <script src="jquery.js"></script>
    <script>
        /**
         * 自己封装的话，要注意，请求地址，请求方式，请求回调函数
         */
    
      //  最基础的调用
     /* $.ajax('./time.php',{
          type:'post',//method请求方式
          success:function (res) {
              // res => 拿到的知识响应体
              console.log(res);
          }
      })
      */
    
    
    /*
     $.ajax({
         url: 'time.php',
         type: 'get',
         //张三：%E5%BC%A0%E4%B8%89，解释：%后面就是16进制的数字，一个中文占三个字节，%E5%BC%A0描述：张；%E4%B8%89：三
         //可以用url解码，去解析这些16进制，就可以看到中文了
         /!**
          * data用于提交服务端的参数，
          * 如果是GET请求就是通过url传递；
          * 如果是POST请求就通过请求体传递
          *!/
         data:{id:1,name:'张三'},
         success:function (res) {
             console.log(res);
         }
     })
    */
    
    
       /* $.ajax({
            url: 'json.php',
            type: 'get',
            data:{id:1,name:'张三'},
            success:function (res) {
                //res会自动根据服务器响应的content-type 自动转换为对象，这个hijQuery提供的内部实现的
                console.log(res);
            }
        })*/
    
    //   如果内部没有提供Json格式，就要自己手动加Json格式
    //    ajax里面的事情都是委托的
        $.ajax({
            url: 'json.php',
            type: 'get',
            //用于设置响应体的类型
            dataType:'json',
            //设置的是请求参数
            data:{id:1,name:'张三'},
            success:function (res) {
                //一旦设置了dataType选项，就不再关心服务端响应的Content-Type了
                //客户端主观认为服务端返回的就是JSON格式
                console.log(res);
            }
        })
    
    
     /*   //  原生请求操作中，不管请求状态码是多少，都会触发回调
        var xhr = new XMLHttpRequest();
        xhr.open('get','time.php');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (this.readyState !==4 || this.status !== 200) return;
            console.log(this.responseText);
        }*/
    
    /* $.ajax({
         url:'time.php',
         type:'get',
         beforeSend:function(xhr){
             //open之前，在所有发送请求操作(open,send)之前，执行
             console.log('beforeSend', xhr);
         },
         success:function (res) {
             //只有请求成功(状态码200)才会执行这个函数
             console.log(res);
         },
         error:function (xhr) {
             //这个只有请求不正常(不为状态码200)才会执行，
             console.log(xhr);
         },
         complete:function (xhr) {
             //请求完成操作的，不管是失败还是成功，都会执行这个complete函数
             console.log(xhr);
         }
     })*/
    
    
      $.get('json.php',{id:1},function (res) {
          console.log(res);
      });
    
     $.post('time.php',{id:1},function (res) {
         console.log(res);
     });
    
     $.getJSON('json.php',{id:1},function (res) {
         console.log(res);
     });
    
    
    //明确请求的方式，根据方式。选择快速解决方法
    
    
    
    </script>
    </body>
    </html>

# time.php #

<?php
    echo time();

# json.php #

<?php
       $zhangsan = array('name' => '张三','age' => 18);
       header('Content-Type: application/json');
       echo json_encode($zhangsan);
       //  var_dump(json_encode($zhangsan));
    ?>

这下子就不会觉得ajax难了吧！后续还有哦！