ajax示例.docx

ajax示例.docx

《ajax示例.docx》由会员分享，可在线阅读，更多相关《ajax示例.docx（9页珍藏版）》请在冰豆网上搜索。

ajax示例

基础

●概述

Ajax是一种异步（不用阻止当前线程）的程序，

主要作用是在页面无刷新的情况下让页面与服务器进行交流。

Ajax并非是一个新的技术，而是在原有的技术上进行了一次综合运用。

需要使用到的技术有：

Javascript：

创建方法，与页面中不同的节点绑定，

当节点操作的时候调用javascript方法，javascript方法就会在方法内部向服务器发送请求，获得结果后对再对网页进行操作。

Servlet：

用于接收到请求处理之后返回给javascript中的方法。

⏹xmlhttprequest

这个类是基于动态语言javascript而且定义的动态类。

他的方法可以在javascript中随时绑定新的方法去运行，

他也有固定的一些属性，用于大众化的处理规范。

◆方法

/**

*functionopen（method,url,async,username,password）

*@param{String}method告诉用户使用哪种方法提交请求，有：

post，get

*@param{String}url用户提交的地址，servlet。

*@param{Boolean}optionalasync是否异步，默认是true，如果设置为false那么程序会拦截线程直到ajax处理完成。

*@param{String}optionalusername可有可无

*@param{String}optionalpassword可有可无

*@memberOfXMLHttpRequest

*/

XMLHttpRequest.prototype.open=function（method,url,async,username,password）{};

/**

*functionsend（body）//当ajax的代码都进行绑定之后，再对绑定的路劲进行发送请求。

*@param{Object}body

*@memberOfXMLHttpRequest

*/

在调用该方法之前的操作都是绑定参数和方法的操作。

XMLHttpRequest.prototype.send=function（body）{};

/**用于绑定处理方法，当send之后，对接收到的状态或者熟悉进行处理，

*functiononreadystatechange

*@memberOfXMLHttpRequest

*/

XMLHttpRequest.prototype.onreadystatechange=function（）{};

◆属性

Status：

/**

*页面的状态。

用于open之后查找到对应的地址是否存在

*propertystatus

404代表找不到页面，或者服务器。

200成功

500服务端代码错误。

*@typeNumber

*@memberOfXMLHttpRequest

*/

XMLHttpRequest.prototype.status=0;

/**

*propertyresponseText从服务端返回的响应文本。

*@typeString

*@memberOfXMLHttpRequest

*/

XMLHttpRequest.prototype.responseText="";

/**

*propertyreadyState当前的读入状态，0代表未读，2已经连接，3正在读入，4读入完成。

*@typeNumber

*@memberOfXMLHttpRequest

*/

XMLHttpRequest.prototype.readyState=0;

⏹运行流程（重要）

1.在javascript中的方法绑定到XMLHTTPrequast（）。

2.绑定好响应的发送参数：

open（”get“，url，true）；

3.绑定好响应的处理函数，

4.发送请求到servlet。

5.当servlet返回是调用响应的处理函数。

●使用示例

⏹Jsp：

varxhr;

functionfvalidate（）{

//XMLHttpRequest

//1、创建ajax引擎

xhr=newXMLHttpRequest（）;

//2、提交什么请求

varurl="searchServlet?

uname="+document.getElementById（"tname"）.value+"&ts="+newDate（）;

xhr.open（"get",url）;//这个时候尚未发送请求。

只是绑定参数。

//3、指明当有结果返回时，如何接受或处理（绑定处理函数）

xhr.onreadystatechange=fcallback;

//4、提交请求

xhr.send（）;

}

//回调函数，用于处理返回的结果

functionfcallback（）{

if（xhr.readyState==4）{//内容全部接收完成

if（xhr.status==200）{

varvdiv="";

vararr=xhr.responseText.split（"-"）;

for（vari=0;i

vdiv+="

}

document.getElementById（"showMessage"）.innerHTML=vdiv;

}

}

}

uname：

100px;border:

1pxsolidred">