码迷,mamicode.com
首页 > Web开发 > 详细

原生Ajax

时间:2018-08-31 17:16:06      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:||   pos   参数   change   hang   set   头部   返回   UNC   

使用原生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解析

 

原生Ajax

标签:||   pos   参数   change   hang   set   头部   返回   UNC   

原文地址:https://www.cnblogs.com/runhua/p/9566306.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!