浅谈AJAX开发技术

ajax（asynchronous javascript and xml，异步javascript和xml），ajax并不是一项新的技术，它产生的主要目的是用于页面的局部刷新，从之前的代码开发来看，读者可以发现，每当用户向服务器端发出请求时，那怕需要的只是简单的更新一点点的局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低的，而如果采用了ajax技术之后，就可以实现局部的内容变更，而不用再进行整体的页面刷新，显然处理的性能要比前者高很多 。

在ajax中主要是通过xmlhttprequest对象处理发送异步请求和处理回应的，此对象最早是在ie 5中以activex组件的形式出现的，一直到2005年之后才被广泛的使用，而如果要想创建一个xmlhttprequest对象必须使用javascript。

xmlhttprequest对象的属性

no.	属性	描述
1	onreadystatechange	指定当readstate状态改变时使用的操作，一般都用于指定具体的回调函数
2	readystate	返回当前请求的状态，只读
3	responsebody	将回应信息正文以unsigned byte数组形式返回，只读
4	responsestream	以ado stream对象的形式返回响应信息，只读
5	responsetext	接收以普通文本返回的数据，只读
6	responsexml	接收以xml文档形式回应的数据，只读
7	status	返回当前请求的http状态码，只读
8	statustext	返回当前请求的响应行状态，只读

创建xmlhttprequest对象

<script language="javascript">
    var xmlhttp ;                    // ajax核心对象名称
    function createxmlhttp() {            // 创建xmlhttprequest核心对象
        if (window.xmlhttprequest) {        // 判断当前使用的浏览器类型
            xmlhttp = new xmlhttprequest();// 表示使用的为firefox内核的浏览器
        } else {                    // 表示使用的是ie内核的浏览器
            xmlhttp = new activexobject("microsoft.xmlhttp");
        }
    }
</script>

对readstate一共有五种取值，分别是：
请求没有发出（在调用open()函数之前之前）。
请求已经建立但还没有发出（调用send()函数之前）。
请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
响应已完成，可以访问服务器响应并使用它。

xmlhttprequest对象的方法

no.	方法	描述
1	abort()	取消当前所发出的请求
2	getallresponseheaders()	取得所有的http头信息
3	getresponseheader()	取得一个指定的http头信息
4	open()	创建一个http请求，并指定请求模式，例如：get请求或post请求
5	send()	将创建的请求发送到服务器端，并接收回应信息
6	setrequestheader()	设置一个指定请求的http头信息

ajax封装后的代码

ajax.js

function ajax(recvtype){
    var aj=new object();
    aj.recvtype=recvtype ? recvtype.touppercase() : 'html' //html xml
    aj.targeturl='';
    aj.sendstring='';
    aj.resulthandle=null;
    aj.createxmlhttprequest=function(){
        var request=false;
        //window对象中有xmlhttprequest存在就是非ie，包括（ie7，ie8）
        if(window.xmlhttprequest){
            request=new xmlhttprequest();
            if(request.overridemimetype){
                request.overridemimetype("text/xml");
            }
        //window对象中有activexobject属性存在就是ie
        }else if(window.activexobject){
            var versions=['microsoft.xmlhttp', 'msxml.xmlhttp', 'msxml2.xmlhttp.7.0','msxml2.xmlhttp.6.0','msxml2.xmlhttp.5.0', 'msxml2.xmlhttp.4.0', 'msxml2.xmlhttp.3.0', 'msxml2.xmlhttp'];
            for(var i=0; i<versions.length; i++){
                    try{
                        request=new activexobject(versions[i]);
                        if(request){
                            return request;
                        }
                    }catch(e){
                        request=false;
                    }
            }
        }
        return request;
    }
    aj.xmlhttprequest=aj.createxmlhttprequest();
    aj.processhandle=function(){
        if(aj.xmlhttprequest.readystate == 4){
            if(aj.xmlhttprequest.status == 200){
                if(aj.recvtype=="html")
                    aj.resulthandle(aj.xmlhttprequest.responsetext);
                else if(aj.recvtype=="xml")
                    aj.resulthandle(aj.xmlhttprequest.responsexml);
            }
        }
    }
    aj.get=function(targeturl, resulthandle){
        aj.targeturl=targeturl;   
        if(resulthandle!=null){
            aj.xmlhttprequest.onreadystatechange=aj.processhandle;   
            aj.resulthandle=resulthandle;   
        }
        if(window.xmlhttprequest){
            aj.xmlhttprequest.open("get", aj.targeturl);
            aj.xmlhttprequest.send(null);
        }else{
            aj.xmlhttprequest.open("get", aj.targeturl, true);
            aj.xmlhttprequest.send();
        }
    }
    aj.post=function(targeturl, sendstring, resulthandle){
        aj.targeturl=targeturl;
        if(typeof(sendstring)=="object"){
            var str="";
            for(var pro in sendstring){
                str+=pro+"="+sendstring[pro]+"&";   
            }
            aj.sendstring=str.substr(0, str.length-1);
        }else{
            aj.sendstring=sendstring;
        }
        if(resulthandle!=null){
            aj.xmlhttprequest.onreadystatechange=aj.processhandle;   
            aj.resulthandle=resulthandle;   
        }
        aj.xmlhttprequest.open("post", targeturl);
        aj.xmlhttprequest.setrequestheader("content-type", "application/x-www-form-urlencoded");
        aj.xmlhttprequest.send(aj.sendstring);
    }
    return aj;
}

使用ajax可以完成局部刷新操作；

在ajax中主要是通过xmlhttprequest对象完成操作。

以上就是关于ajax开发技术的全部内容了，希望小伙伴们能够喜欢。