原生Ajax

Posted 2021-01-03 某个润滑君

使用原生Ajax的步骤可以分为三步：

（1）获取一个XMLHttpRequest对象，简称xhr对象，给这个xhr对象绑定回调函数

（2）启动请求

（3）发送数据

代码如下：

//**********第一步, 获得一个xhr对象*************

      var xmlHttpReq = null;  //声明一个空对象用来装入XMLHttpRequest

      if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

              xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

      }

      else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

              xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest

      }

      if(xmlHttpReq != null){  //如果对象实例化成功

              //设置回调函数

              xmlHttpReq.onreadystatechange = function(){

                  if(xmlHttpReq.readyState == 4){  //确定响应已经成功返回

                      //200可作为成功标志, 304表示请求资源没有修改, 可直接使用浏览器缓存

                      if ((xmlHttpReq.status>=200 && xmlHttpReq.status < 300 ) || xmlHttpReq.status == 304){

                            alert(xmlHttpReq.responseText);

                        } else {

                            alert( " Request was unsuccessful: " + xmlHttpReq.status);

                        }

                    }

              }

//************第二步: 启动请求.******************

              //open方法接收三个参数: 要发送的请求类型(get,post等), 请求的url和是否异步发送请求的布尔值

              xmlHttpReq.open("get","test.php",true);    //调用open()方法并采用异步方式. 如果第三个参数是false, 同步执行, 则js代码会等到服务器响应之后再继续执行

//*************第三步: 发送数据*******************

              //send方法接收一个参数,即要作为请求主体发送的数据. 如果不需要通过请求主体发送数据, 则必须传入null. 因为这个参数对有些浏览器是必须的

              xmlHttpReq.send(null);  //因为使用get方式提交，所以可以使用null参调用

// 如果要设置请求头部信息,必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

 

readyStatus的五个阶段

    0：未初始化。尚未调用open（）方法

    1：启动。已经调用open（）方法，尚未调用send（）方法

    2：发送。已经调用send方法，尚未接收到响应

    3：接受。已经接受部分响应数据

    4：完成。已经接受到全部响应数据，而且已经可以在客户端使用了。一般只需要检查这个阶段

获得的数据在responseText或responseXML属性中，后者需要XML解析