前端——Ajax异步交互-CSDN博客

Ajax简单的异步交互

ajax简单的异步交互，可以先从get方式开始说起

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

步骤1、XMLHttpRequest对象的创建

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

步骤2、注册回调函数

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

步骤3、设置连接信息

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

步骤4、发送数据

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里面发送一些我们需要的参数

转载于:https://my.oschina.net/fycool/blog/748240