ajax学习——初识ajax

一、ajax是什么？

全称：Asynchronous JavaScript and XML，即异步的JavaScript和XML，通俗地讲就是用JavaScript去异步操作XML；

主要功能：进行数据交互，在不刷新整个页面的情况下，更新部分数据

二、核心实现过程

（1）创建一个XMLHttpRequest对象（相当于打开浏览器）

var xhr=new XMLHttpRequest();

由于这里存在兼容性问题，在ie6不支持该对象，使用时会报错，在ie6中是通过插件的形式来引用，可以通过使用：

new ActiveXObject("Microsoft.XMLHTTP")

在此有两种兼容性写法：

方法一：通过if-else来兼容

 if(window.XMLHttpRequest){ //注意去掉window会报错，不能解决兼容性问题
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }

方法二：通过try-catch来兼容

try{
                xhr=new XMLHttpRequest();
                }
                catch(e){
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
 }

（2）通过open()，相当于在浏览器中输入地址

open()三个参数：

参1：传送的方式

参2：传送的地址

参3：是否异步，true为异步，false为同步

异步与同步：

异步：不会阻塞，前面的代码不会影响后面代码的执行

同步：会发生阻塞，前面的代码会影响后面代码的执行

xhr.open("get","xx.php",true)

（3）使用send()，相当于按下回车键，发送请求

（4）等待服务器返回内容

服务器返回的内容常放在responseText属性中，通过使用

xhr.responseText

来获取

在此需要做状态检测：

通过readyState属性来检测请求状态，以下是readyState属性常用的值：

-0（初始化），这时表明还没有调用open()方法；

-1（载入）已经调用send()方法，正在发送请求；

-2（载入完成），send()方法完成，已经收到全部响应内容；

-3（解析），正在解析响应内容

-4（完成），响应内容解析完成，可以在客户端调用；

ajax提供了一个状态检测函数：onreadystatechange事件

xhr.onreadystatechange=function(){
         if(xhr.readyState==4){//这里需要做容错处理
         alert(xhr.responseText);
        }
}

上面提到的容错处理主要是针对服务器返回的状态码，当我们请求的页面不存在时，也会收到responseText，但是此时的内容不是我们想要的相应信息，所以还需要根据服务器的状态码进行进一步的检测：

这时需要用到state属性，这里是服务器的状态，http状态码

xhr.onreadystatechange=function(){
                   if(xhr.readyState==4){
                       if(xhr.status==200){ 
                           alert(xhr.responseText);
                       }else{
                           alert("出错了,Err:"+xhr.status);
                       }
                   }
                }

这时，ajax的基本流程和原理已经结束了，下面汇总一下具体内容：

               var xhr=null;
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open(传送的方式,传送地址,true/false);
                xhr.send();
                xhr.onreadystatechange=function(){
                   if(xhr.readyState==4){
                       if(xhr.status==200){
                           alert(xhr.responseText);
                       }else{
                           alert("出错了,Err:"+xhr.status);
                       }
                   }
                }

ajax学习——初识ajax

猜你喜欢