Ajax异步请求解析-优快云博客

本文详细介绍了Ajax技术的工作原理及其实现过程，包括基于DOM事件创建XHR对象、状态监听、与服务器建立连接、发送异步请求及响应结果处理。通过具体代码示例，展示了如何使用JavaScript实现局部页面刷新，提升用户体验。

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

1.Ajax请求响应过程

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新。

1.基于dom事件（例：click）创建XHR对象（XMLHttpRequest对象（XMLHttpRequest 对象用于在后台与服务器交换数据。））。

2.注册XHR对象状态监听，通过回调函数（callback）处理状态信息。

3.创建与服务器的连接。

4.发送异步请求实现与服务器的通讯。

5.通过回调函数，获得响应结果并进行数据更新（非阻塞）

var xhr=new XMLHttpRequest();                //创建XHR异步请求对象

xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){  //注册事件监听
        console.log(xhr.responseText);
        }
}

xhr.open("GET","https://www.baidu.com",true);//建立与服务器端的连接。true表示异步。

xhr.send(null);                              //发送请求（请求方式为get时，send方法内部传null）

function doAjaxGetRequest(){
    var url="/ajax/doAjaxGetRequest";
    var params="key=A";

    doAjaxGet(url,params,function(result){
        var div=document.getElementById("result");
        div.innerHTML=result;
});
}

function doAjaxGet(url,params,callback){
    var xhr=new XMLHttpRequest();

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);

    }

}

    xhr.open("GET",url+"?"+params,true);

    xhr.send(null);

}