原生Ajax书写

Posted 2020-09-23 糊涂一点web

简介

Ajax（Asynchronous JavaScript And XML：异步javascript和XML）在2005年2月被提出。Ajax技术的核心是XMLHttpRequest。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。 

• Ajax（Asynchronous javascript And XML：异步Javascript和XML）在2005年2月被提出。Ajax技术的核心是XMLHttpRequest。
• 整个Ajax应用的工作过程分为三个部分：发送请求，解析数据，利用数据更新dom
• XMLHttpRequest的属性和方法

下面直接上原生js的代码

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

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

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

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

       }

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

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

       }

       if(xhr != null){  //如果对象实例化成功
              //设置回调函数
              xhr.onreadystatechange = function(){

                  if(xhr.readyState == 4){  //确定响应已经成功返回
                       //200可作为成功标志, 304表示请求资源没有修改, 可直接使用浏览器缓存
                       if ((xhr.status>=200 && xhr.status < 300 ) || xhr.status == 304){
                             alert(xhr.responseText);
                        } else {
                             alert( " Request was unsuccessful: " + xhr.status);
                        }
                    }
              }

//************第二步: 启动请求.******************
              //open方法接收三个参数: 要发送的请求类型(get,post等), 请求的url和是否异步发送请求的布尔值
              xhr.open("get","test.php",true);     //调用open()方法并采用异步方式. 如果第三个参数是false, 同步执行, 则js代码会等到服务器响应之后再继续执行

//*************第三步: 发送数据*******************
              //send方法接收一个参数,即要作为请求主体发送的数据. 如果不需要通过请求主体发送数据, 则必须传入null. 因为这个参数对有些浏览器是必须的
              xhr.send(null);  //因为使用get方式提交，所以可以使用null参调用

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