js 学习笔记（2）djConfig解说-优快云博客

本文介绍了一种使用JavaScript和XMLHttpRequest对象实现AJAX的方法。文章详细解释了如何定义XMLHttpRequest对象并完成初始化，通过事件处理函数实现异步请求，并通过回调函数处理服务器响应。

定义XMLHttpRequest对象，完成XMLHttpRequest初始化

var xmlrequest;
    function createXMLHttpRquest(){
        
            if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建 
            { 
                xmlrequest=new XMLHttpRequest(); 
            } 
            else if(window.ActiveXObject) //IE浏览器用activexobject对象创建 
            { 
                xmlrequest=new ActiveXObject("Microsoft.XMLHttp"); 
            } 
     

    }

事件处理函数

 function change(id){
    createXMLHttpRquest();
    var url="send.jsp?id="+id; //要请求的服务端地址 
    xmlrequest.open("GET",url,true); //与服务端建立连接(请求方式post或get，地址,true表示异步) 
      xmlrequest.onreadystatechange = callback; //指定回调函数 
    xmlrequest.send(null); //发送请求 
    }

回调函数

function callback(){
     if(xmlrequest.readystate==4) //请求状态为4表示成功 
            { 
                if(xmlrequest.status==200) //http状态200表示OK 
                { 
                    document.getElementById("output").innerHTML=xmlrequest.responseText;
                } 
                else //http返回状态失败 
                { 
                    alert("服务端返回状态" + xmlrequest.statusText); 
                } 
            } 
            else //请求状态还没有成功，页面等待 
            { 
                document .getElementById ("output").innerHTML ="数据加载中"; 
            } 
    
    
    }

XMLHttpRequest 属性

onreadystatechange:用于指定XMLHttpRequest对象状态改变时的事件处理函数

readyState:XMLHttpRequest对象的处理状态

0没有完成初始化 1对象开始发送请求

2对象的发送请求完成 3对象开始读取服务器的响应 4对象读取服务器反应结束

responseText:用于获取服务器响应文本

responseXML:用于获取服务器相依的xml文档对象

status:服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码

200服务器响应正常 400 无法找到资源 500服务器内部错误

statusText:服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。