Ajax介绍

     Ajax是异步的JavaScript和XML，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可实现客户端的异步请求操作，进而在不需要刷新整个页面的情况下与服务器进行通信，

减少了用户的等待时间，减轻了服务器和带宽的负担，提高了性能。

    传统的web项目，页面中用户的每一次操作都将触发一次HTTP请求，服务器进行请求处理后，返回一个HTML页面给客户端;

    在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到指定位置;

    Ajax在用户与服务器之间引入了一个Ajax引擎，从而消除了网络交互过程中的处理－等待－处理－等待的缺点，Ajax的好处主要体现在以下几个方面:

    1:减轻服务器的负担，Ajax的原则是按需求获取数据，这可以最大程度的减少冗余请求和响应对服务器造成的负担。

    2:可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间。

    3:无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在白屏前等待，Ajax使用XMLHttpRequest对象发送请求并得到服务器的响应，在不需要重新载入整个页面的情况下，就

可以通过DOM及时将更新的内容显示在页面上。

    4:可以调用XML等外部数据，进一步促进页面显示和数据的分离。

    5:基于标准化的并被广泛支持的技术，不需要下载插件。

    Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合：

    XMLHttpRequest对象

   XMLHttpRequest对象是Ajax中的核心技术，它是具有应用程序接口的javaScript对象，能够使用HTTP连接一个服务器，通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的

交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样也减轻了服务器负担，加快了响应速度，缩短了用户等待时间

   要使用XMLHttpRequest对象，首先需要初始化，对于IE和非IE浏览器，初始化的方式也不同

   IE将XMLHttpRequest对象实例化为一个ActiveX对象，具体方法如下:

var http_request = new ActiveXObject("Msxml2.XMLHTTP");

  或者:

var http_requset1 = new ActiveXObject("Microsoft.XMLHTTP");

Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE版本的不同而进行设置的,IE7以下使用Microsoft.XMLHTTP;

非IE浏览器将XMLHtttpRequest实例化为一个本地JavaScript对象，具体方法如下:

var http_requset2 = new XMLHttpRequest();

为了提高程序的兼容性，可以创建跨浏览器的XMLHttpRequest对象，方法很简单，只需要判断一下不同浏览器的实现方式，具体代码如下:

if(window.XMLHttpRequest){            //非IE浏览器            http_requset3 = new XMLHttpRequest();        }else if(window.ActiveXObject){            try{                http_requset3 = new ActiveXObject("Msxml2.XMLHTTP");            }catch (e){                try {                   http_requset3 = new ActiveXObject("Microsoft.XMLHTTP");                }catch (e){}            }        }

调用window.ActiveXObject将返回一个对象或null,在if语句中会把返回值看作是true或false（如果返回对象则为true,否则为false);

XMLHttpRequest对象的常用方法:

1:open()方法

open()方法用于设置进行异步请求目标的url，请求方法以及其他参数信息，语法格式如下:

open("method","url","true","user","password");

method:用于指定请求的类型，一般为get,post;

URL:用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串;

async:可选参数，用于指定请求方式，异步请求为true,同步请求为false，默认为true;

user:可选参数，用于指定请求用户名，没有时可省略;

password:可选参数，用于指定请求密码，没有时可以省略

2:send()方法

send()方法用于向服务器发送请求，如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止，语法格式如下:

http_requset3.send(content);

参数content用于指定发送的数据，可以是DOM对象的实例，输入流或字符串，如果没有参数需要传递可以设置为null;

3:setRequestHeader()方法

setRequestHeader()方法用于为请求的HTTP头设置值，语法格式如下:

http_requset3.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

注意，setRequestHeader()方法必须在调用open()方法之后才能调用,在发送post请求时一般需要设置content-Type请求头;

4:abort()方法

abort()方法用于停止当前异步请求;

5:getResponseHeader()方法

getResponseHeader()方法用于以字符串形式返回指定的Http头信息，语法格式如下:

http_requset3.getResponseHeader("Content-Type");

参数包括Server,Content-Type和Date等

6:getAllResponseHeaders()方法

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息;

XMLHttpRequest对象的常用属性:

属性描述onreadystatechange每个状态改变时都会触发这事件处理器，通常会调用一个javaScript函数readyState请求状态，有一下五个值:0=未初始化;1=正在加载:2=已加载;3=交互中;4=完成responseText服务器的响应，表示为字符串responseXML服务器的响应，表示为XML,这个对象可以解析为一个DOM对象status返回服务器的HTTP状态码，200=成功;202＝请求被接受，但尚未成功;400=错误的请求;404=找不到文件;500=服务器内部错误statusText返回HTTP状态码对应的文本，如OK或not found等Ajax发送请求与处理响应

发送请求实例：

1:创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest是否创建成功

if(window.XMLHttpRequest){                //非IE浏览器                http_requset3 = new XMLHttpRequest();            }else if(window.ActiveXObject){                try{                    http_requset3.getResponseHeader("Content-Type");                }catch (e){                    try {                        http_requset3 = new ActiveXObject("Microsoft.XMLHTTP");                    }catch (e){}                }            }            if(!http_requset3){                alert("XMLHttpRequest对象创建失败")                return false;            }

2:为XMLHttpRequest对象指定一个回调函数，用于对返回结果进行处理

http_requset3.onreadystatechange = getResult;//调用回调函数

注意，使用XMLHttpRequest对象的onreadystatechange属性指定回调函数时，不能指定要传递的参数，如果要传递参数，可以应用一下方法:

http_requset3.onreadystatechange = function(){getResult(param)}//带参数的回调函数

3:创建一个与服务器的连接，在创建时，需要指定发送请求的方式（即get或post），以及设置是否采用异步方式发送请求:

采用get方式发送请求:

http_requset3.open("get","index.jsp",true);

采用post方式发送请求:

http_requset3.open("post","index.jsp",true);

open()方法中的url参数可以是一个jsp,也可以是一个servlet地址；

在指定url参数时，最好将一个时间戳追加到该url参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果;

4:向服务器发送请求，利用XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是get请求，可以将该参数设置为null,

如果发送的是post请求，可以通过该参数指定要发送的请求参数:

http_requset3.send("user="+name);

需要注意的是，在发送post请求前，还需要设置正确的请求头:

http_requset3.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

设置请求头必须在send()方法之前调用;

处理服务器响应

在上面，我们设置了一个回调函数，用于处理服务器响应，在这个回调函数中，首先需要判断服务器的请求状态，保证请求已完成，然后再根据服务器的HTTP状态码来判断服务器是否响应成功，如果

响应成功，则获取服务器的响应反馈给服务端。

将字符串响应显示到提示对话框中的回调函数代码如下:

function getResult(){            if(http_requset3.readyState == 4){                if(http_requset3.status == 200){                    alert(http_requset3.responseText);                }else{                    alert("你请求的页面出错");                }            }        }

处理xml响应

//处理XML响应        function getResult() {            if (http_requset3.readyState == 4) {                if (http_requset3.status == 200) {                    var xmldoc = http_requset3.responseXML;                    var msgs = "";                    for (var i = 0; i < xmldoc.getElementsByTagName("board").length; i++) {                        var board = xmldoc.getElementsByTagName("board")[i];                        msgs = msgs + board.getAttribute("name") + "的留言: " + board.getElementsByTagName("msg")[0].firstChild.data + "<br>";                    }                }            }        }

要遍历的xml格式:

<?xml version="1.0" encoding="UTF-8"?><boards>    <board name="exception">        <msg>你好</msg>    </board>    <board name="exception">        <msg>你也好</msg>    </board></boards>

重构Ajax

重构Ajax大致分为3个步骤

1:创建一个单独得js文件，具体代码如下：

var net  = new Object();//定义一个全局变量netnet.AjaxRequest = function(url,onload, onerror, method, params){//编写构造函数    this.req = null;    this.onload = onload;    this.onerror = (onerror)?onerror:this.defaultError;    this.loadDate(url, method, params);} //编写用于初始化的XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法net.AjaxRequest.prototype.loadDate = function(url, method, params){    //判断method是否为空，如果为空则默认为GET    if(!method){        method = "GET";    }    //非IE浏览器    if(window.XMLHttpRequest){        this.req = new XMLHttpRequest();    }else if(window.ActiveXObject){        try{            this.req = new ActiveXObject("Msxml2.XMLHTTP");        }catch (e){            try{                this.req = new ActiveXObject("Microsoft.XMLHTTP");            }catch (e){}        }    }    //如果初始化成功    if(this.req){        try{            var loader = this;            this.req.onreadystatechange = function(){//设置回调函数                net.AjaxRequest.onReadyState.call(loader);            }            this.req.open(method,url,true);            if(method == "POST"){//如果是POST请求，设置请求头                this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            }            this.req.send(params);//发送请求        }catch (e){            this.onerror.call(this);        }    }    net.AjaxRequest.onReadyState = function(){//重构回调函数        if(this.req.readyState == 4){//请求完成            if(this.req.status == 200){//请求成功                this.onload.call(this);            }else {                this.onerror.call(this);            }        }    }    //重构默认得错误处理函数    net.AjaxRequest.prototype.defaultError = function(){        alert("错误函数\n\n回调状态:" + this.req.readyState + "\n状态:" + this.req.status);    }}

2:在需要应用Ajax的页面中引入第一步创建的js文件

<script language="JavaScript" src="${pageContext.request.contextPath}/javaScript/AjaxRequest.js"></script>

3:在应用Ajax的页面中编写错误处理的方法，实例化Ajax对象的方法和回调函数

<script language="JavaScript" src="${pageContext.request.contextPath}/javaScript/AjaxRequest.js">        //错误处理方法        function onerror() {            alert("操作错误");        }        //实例化Ajax对象的方法        function getInfo() {            var loader = new net.AjaxRequest("session.jsp?nocache=" + new Date().getTime(), deal_getInfo(), onerror(), "GET");        }        //回调函数        function deal_getInfo() {            document.getElementById("showInfo").innerHTML = this.req.responseText;        }    </script>

Ajax开发需要注意的几个问题：

1:浏览器兼容性的问题；

2:性能问题：

优化for循环。

尽量使用局部变量，而不使用全部变量。

尽量少用eval，每次使用eval都需要消耗大量的时间；

将DOM节点附加到文档上。

尽量减少点操作符的使用。

3:中文编码问题

Ajax不支持多字符集，其默认的字符集是UTF-8，所以在应用Ajax技术的程序中应及时进行编码转换，否则程序中将出现乱码，一般在一下两种情况下将产生中文乱码:

1:发送路径的参数中包含中文，在服务器端接收参数值时产生乱码：

将数据提交到服务器有两种方法：一种是使用GET方法，使用不同的方法提交数据时，在服务器端接收参数时解决中文乱码的方式不同，当接收GET方法提交的参数时，要将

编码转换为GBK或GB2312

由于应用POST方法提交数据时，默认的字符集编码是UTF-8，所以当接收使用POST方法提交时，要将编码转换为UTF-8。

2:返回到reponseText或responseXML的值中包含中文时产生乱码

由于Ajax在接收responseText或responseXML的值时是按照UTF-8的编码格式进行解码的，所以如果服务器端传递的数据不是UTF-8格式，在接收时就可能产生乱码，所以要保证

从服务器传递的数据采用的是UTF-8的编码