ajax的过程

小灰灰 2022-09-25 00:27 136阅读 0赞

AJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML）  
AJAX不是一种新的语言，而是一种使用现有标准的新方法。  
AJAX在不重新加载整个页面的情况下，实现与服务器的数据交换刷新局部页面。

详细过程：

1.  创建XMLHttpRequest对象，也就是创建一个异步调用对象
2.  创建一个新的HTTP请求，并指定请求方式、URL、是否异步调用
3.  设置响应HTTP请求状态变化函数
4.  发送HTTP请求
5.  获取异步调用返回的函数
6.  使用javascript和DOM实现局部刷新

1.创建XMLHttpRequest对象

//创建XMLHttpRequest对象
    var xhr;
    if(window.XMLHttpRequest){
        //for ie7+,firefox,Chrome,Opera,Safari
        xhr=new XMLHttpRequest();
    }else{
        //for ie6,ie5
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

2.向服务器发送请求

//向服务器发送请求
    //open()规定发送请求的类型，url，是否异步处理
    xhr.open("GET","test.txt",true);
    xhr.send();

`GET`和`POST`,与`POST`相比，`GET`传输速度快，效率高，大部分情况下使用`GET`，在以下几种情况中使用`POST`：

*  无法使用缓存文件(更新服务器上的文件或数据)
 *  向服务器发送大量数据 (`POST`没有数据量限制)
 *  发送包含未知字符的用户输入时，`POST`比`GET`更稳定，可靠。

3.服务器响应

//如果来自服务器的响应不是XML文件，使用responseText属性
    myDiv.innerHTML=xhr.responseText;
    
    //如果来自服务器的响应是XML文件
    xmlDoc=xhr.responseXML;
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    var myDiv= document.getElementById("myDiv");
    for (i=0;i<x.length;i++){ 
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";
     }
    myDiv.innerHTML=txt;

4.readyState

//当readyState改变时，就会触发onreadystatechange事件
    //readyState属性存有XMLHttpRequest对象的状态信息
    //onreadystatechange事件会触发5次，对应readyStates的5个状态(0~4)
    xhr.onreadystatechange==function(){ 
        if(xhr.readyState == 4 && xhr.status ==200){
            myDiv.innerHTML=xhr.resopnseText;
        }
    }
    
    //或者使用Callback函数
    function myFun(){ 
        loadXMLDoc("test.txt",function(){ 
            if(xhr.readyState==4 && xhr.status ==200){
                myDiv.innerHTML=xhr.resopnseText;
            }
        });
    }

XMLHttpRequest对象的三个重要属性：

1.  onreadystatechange 存储函数，当readyState属性改变时就会调用该函数
2.  readyState 存有XMLHttpRequest对象的状态  
    0 请求未初始化 对象已创建  
    1 服务器连接已建立 open调用  
    2 请求已接收 send调用  
    3 请求处理中 正在接收数据  
    4 请求已完成，响应已就绪 完成
3.  status  
    200 ‘ok’  
    404 未找到页面