【前端面试】谈谈你对jQuery中的ajax方法的了解

短命女 2022-06-07 01:45 134阅读 0赞

**什么是 AJAX？**

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

## **1. jquery ajax怎么写 ？** ##

$.ajax({
        url:'/comm/test1.php',
        type:'POST', //GET
        async:true,   //或false,是否异步
        data:{
            name:'yang',age:25
        },
        timeout:5000,   //超时时间
        dataType:'json',   //返回的数据格式：json/xml/html/script/jsonp/text
        beforeSend:function(xhr){ 
            console.log(xhr)
            console.log('发送前')
        },
        success:function(data,textStatus,jqXHR){ 
            console.log(data)
            console.log(textStatus)
            console.log(jqXHR)
        },
        error:function(xhr,textStatus){ 
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        },
        complete:function(){ 
            console.log('结束')
        }
    })

\*\*

## **2.原生javascript怎么实现？** ##

\*\*

$('#send').click(function(){ 
        //请求的5个阶段，对应readyState的值
            //0: 未初始化，send方法未调用；
            //1: 正在发送请求，send方法已调用；
            //2: 请求发送完毕，send方法执行完毕；
            //3: 正在解析响应内容；
            //4: 响应内容解析完毕；
        var data = 'name=yang';
        var xhr = new XMLHttpRequest();   //创建一个ajax对象
        xhr.onreadystatechange = function(event){     //对ajax对象进行监听
            if(xhr.readyState == 4){    //4表示解析完毕
                if(xhr.status == 200){    //200为正常返回
                    console.log(xhr)
                }
            }
        };
        xhr.open('POST','url',true);    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');    //可有可无
        xhr.send(data);        //发送
    });

## **3.它与$.post , $.get ,$.getJSON 有什么不同?** ##

\$.post，这个函数其实就是对\$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。
    \$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。

语法:  
$.post(URL,data,callback);  
必需的 URL 参数规定您希望请求的 URL。  
可选的 data 参数规定连同请求发送的数据。  
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){ 
        $.post("/try/ajax/demo_test_post.php",
        {
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
            function(data,status){ 
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });

$.get，和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。

语法：
    $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){ 
      $.get("demo_test.php",function(data,status){ 
        alert("数据: " + data + "\n状态: " + status);
      });
    });

$.getJSON，这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,\[data\],\[callback\]。

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { 
    
        var html = '<ul>';
        for(var i = 0; i < data.length; i++)
        {
            html += '<li>' + data[i] + '</li>';
        }
        html += '</ul>';
    
        $('#divCustomers').html(html); 
    });

## **4. jquery ajax中都支持哪些数据类型？** ##

dataType
    类型：String
    预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。

可用值:

*  “xml”: 返回 XML 文档，可用 jQuery 处理。
 *  “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
 *  “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
 *  “json”: 返回 JSON 数据 。
 *  “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
 *  “text”: 返回纯文本字符串

## **5..json 和 jsonp 的区别** ##

jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。  
JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：  
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。  
我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息 传递双方约定的方法。