Ajax

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

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

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。

第三步：创建与服务端的连接

第四步：发送异步请求实现与服务端的通讯

第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

//Get 请求
function doAjaxGet(url,params,callback){
     //1.创建XmlHttpRequest对象
      var xhr=new XMLHttpRequest();
     //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
      xhr.onreadystatechange=function(){//callback(回调函数)
       //基于xhr对象获取的通讯状态，对响应数据进行处理
          if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                  //服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
                  callback(xhr.responseText);
          }
     }
    //3.创建与服务端的连接
     xhr.open("GET",url+"?"+params,true);//true表示异步
     //4.发送请求
     xhr.send(null); //Get请求，send方法不传内容
   //5.对响应结果进行处理(在回调函数中处理)。
}

//Post 请求
function doAjaxPost(url,params,callback){
         //1.创建XmlHttpRequest对象
         var xhr=new XMLHttpRequest();
         //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
         xhr.onreadystatechange=function(){//callback(回调函数)
                 //基于xhr对象获取的通讯状态，对响应数据进行处理
                 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
                        //服务端响应的结果会传递给XHR对象，
                 //我们可以借助xhr.responseText获取响应结果
                        callback(xhr.responseText);
                 }
         }
         //3.创建与服务端的连接
         xhr.open("POST",url,true);//true表示异步
         xhr.setRequestHeader("Content-Type",
      "application/x-www-form-urlencoded");
         //4.发送请求
         xhr.send(params); //post请求将参数写到send方法
         //5.对响应结果进行处理(在回调函数中处理)。
}

在Jquery中应用

$.ajax({name:value, name:value, ... })

例:

//使用 AJAX 请求改变 <div> 元素的文本：
$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});