前端——Ajax异步交互

Ajax简单的异步交互

   ajax简单的异步交互，能够先从get方式开始提及

那么建立一个Ajax与服务器端的异步请求，须要完成三个

步骤一、XMLHttpRequest对象的建立

if(window.XMLHttpRequest){//针对IE7以上 以及标准浏览器
    var xhr=new XMLHttoRequest();
}else if(window.ActiveXObject){
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

步骤二、注册回调函数

xhr.onreadystatechange=callback;
或者xhr.onreadystatechange=function(){
  //codes here  
}

步骤三、设置链接信息

xhr.open("GET",url,true)//其中true表示为异步交互

步骤四、发送数据

xhr.send(null);

ps：同步方式下：send会在服务器返回数据后才执行

异步方式下：send会当即完成执行

function callback(){//注册回调函数
  //判断对象的状态是否交互完成
  if(xhr.readyState==4){
   //判断http请求是否成功
    if(xhr.status==200){
       //获取服务器端返回的数据
       var response=xhr.responseText; 
       //能够显示在前台特定的地方 
    }
 }  
}

最后注意一个问题，也是当初测试时候遇到的问题，这种写好的代码要在服务器端环境下运行，要将写好的东西，部署在本机服务器环境下，经过localhost来访问，方可看到效果，不然会报错！

第二部分，若是是发送ajax的post异步请求

xmlHttp.onreadystatechange = callback;
        xmlHttp.open("POST",url,true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
        xmlHttp.send(parameter);

注意以上几点，必需要设置一个请求的头文件，send里面发送一些咱们须要的参数