Ajax执行原理讲课教案

1、Good is good, but better carries it.精益求精，善益求善。Ajax执行原理-Ajax：Asynchronousjavascriptandxml，实现了客户端与服务器进行数据交流过程。使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。这就是异步调用的很好体现。首先得了解什么是异步和同步的概念。举个例子：比如你去图书馆借某种书，可惜图书馆此书被借完。这时可以采用两种做法。第一种做法：在图书馆一直等待，直到有人还书，然后再去吃饭睡觉。第二种做法：直接跟图书馆管理员约定，若是有人还书，直接通知你。你则该忙什么忙什么。到时候会通知你。而第一种

2、做法就是同步的表现，必须等待别人还书（等待服务器返回信息）才进行其他事情，至死方休。而第二种做法就是异步的表现，不耽误时间，合理利用时间高效率做事。遇到这种情况，你会采用那种办法呢？选择第一种，哈哈，说明你太执着啦；选择第二种，说明你灵活变通，合理安排自己的人生。你自己看着办吧。那Ajax是如何从浏览器发送Http请求到服务器呢？这就得使用一个重要的对象XMLHttpRequest。那首先了解一下XMLHttpRequest对象的属性和方法。主要的属性：readyState属性有五个状态值。0：是uninitialized，未初始化。已经创建了XMLHttpRequest对象但是未初始化。1：

3、是loading，sendforrequestbutnotcalled.已经开始准备好要发送了。2：是loaded,sendcalled,headersandstatusareavailable。已经发送，但是还没有收到响应。3：是interactive，downloadingresponse,butresponseTextonlypartialset.正在接受响应，但是还不完整。4：是completed，finishdownloading.接受响应完毕。responseText：服务器返回的响应文本。只有当readyState=3的时候才有值，根据readyState的状态值，可以知道，当r

4、eadyState=3，返回的响应文本不完整，只有readyState=4，完全返回，才能接受全部的响应文本。responseXML：responseasDomDocumentobject。响应信息是xml，可以解析为Dom对象。status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。statusText：服务器http状态码的文本。比如OK，NotFound。主要的方法：open（method，url，boolean）：打开XMLHttpRequest对象。其中method方法有get，post，delete，put。若是查数据，从服务器中得到一定的数据，则使用g

5、et。若是直接提交到服务器中，更新一定的数据，则使用post；url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true，因为Ajax的特点就是异步传送。若使用同步则false。异步和同步上述已经举例。send（body）：发送请求Ajax引擎，让Ajax引擎操作。其中发送的内容可以是需要的参数，若是没有参数，直接send（null）那如何使用Ajax技术？首先，有客户端事件触发Ajax事件。然后，创建xmlHttpRequest对象，根据浏览器不同，创建的xmlHttpRequest对象不同。用open调用，用send发送请求给Ajax引擎。最后，执行完毕后，把结果返回给客户端。

6、执行的流程如下:测试代码如下：创建xmlHttpRequest对象：functioncreateXMLHttpRequest()/表示当前浏览器不是ie,如ns,firefoxif(window.XMLHttpRequest)xmlHttp=newXMLHttpRequest();elseif(window.ActiveXObject)xmlHttp=newActiveXObject(Microsoft.XMLHTTP);客户端事件触发：functionvalidate(field)if(trim(field.value).length!=0)/创建XMLHttpRequestcreateXM

7、LHttpRequest();varurl=user_validate.jsp?userId=+trim(field.value)+×tampt=+newDate().getTime();/alert(url);xmlHttp.open(GET,url,true);/方法地址。处理完成后自动调用，回调。xmlHttp.onreadystatechange=callback;xmlHttp.send(null);/将参数发送到Ajax引擎elsedocument.getElementById(userIdSpan).innerHTML=;结果返回操作：functioncallback(

8、)alert(xmlHttp.readyState);if(xmlHttp.readyState=4)/Ajax引擎初始化if(xmlHttp.status=200)/http协议成功/alert(xmlHttp.responseText);document.getElementById(userIdSpan).innerHTML=+xmlHttp.responseText+;elsealert(请求失败，错误码=+xmlHttp.status);注意：onreadyStateChange事件，当readyState状态值发生改变就会触发此事件。其中，xmlHttpRequest提交http请求的过程中，readyState历经五个状态值（0，1，2，3，4），所以callback函数中的alert(xmlHttp.readyState)则会不断输出1，2，3，4。其中0状态不会输出，因为0状态的时候并不执行此事件。ps：当时在eslipse默认web浏览器中