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);
}