小乐Ajax技术经验总结Word文档下载推荐.docx
《小乐Ajax技术经验总结Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《小乐Ajax技术经验总结Word文档下载推荐.docx（14页珍藏版）》请在冰豆网上搜索。
title>
小乐在学Ajax....<
/title>
scriptlanguage="
javaScript"
>
varxmlHttp;
//Ajax核心对象名称
functioncreateXMLHttp（）{//创建XMLHttpRequest核心对象
if（window.XMLHttpRequest）{//判断当前使用的浏览器类型
xmlHttp=newXMLHttpRequest（）;
//表示使用的是FireFox内核的浏览器
}else{//表示使用的是IE内核的浏览器
xmlHttp=newActiveXObject（"
Microsoft.XMLHttp"
）;
}
}
/script>
/head>
body>
/body>
/html>
本程序创建了一个XMLHttpRequest的对象，但是在创建之前必须首先确定出用户当前被使用的浏览器类型，之后根据浏览器类型创建合适的XMLHttpRequest对象，如果为普通的FireFox（火狐浏览器），则直接使用newXMLHttpRequest（）的方式创建；
而如果为IE浏览器，则通过newActiveXObject（）的方式进行创建。
在XMLHttpRequest对象中定义了许多属性，要想使用此对象就需要首先了解这些属性的作用。
NO.
属性
描述
1
onreadystatechange
指定当readState状态改变时使用的操作，一般用于指定具体的回调函数
2
readyState
返回当前请求的状态，只读
3
responseBody
将回应信息正文以unsignedbyte数组形式返回，只读
4
responseStream
以AdoStream对象的形式返回响应信息，只读
5
responseText
接收以普通文本返回的数据，只读
6
responseXML
接收以XML文档形式回应的数据，只读
7
status
返回当前请求的http状态码，只读
8
statusText
返回当前请求的响应行状态，只读
readState一共有5中取值，分别介绍如下。
1.0:
请求没有发出（在调用open（）函数之前）。
2.1:
请求已经建立但还没有发出（在调用send（）函数之前）
3.2:
请求已经发出正在处理之中（这里通常可以从响应得到内存头部）
4.3:
请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应
5.4:
响应已完成，可以访问服务器响应并使用它。
在使用XMLHttpRequest对象进行操作时也要使用到此对象中的方法，其方法如下表。
方法
描述
abort（）
取消当前所发出的请求
getAllRequestHeaders（）
取消所有的HTTP头信息
getResponseHeader（）
取得一个指定的HTTP头信息
open（）
创建一个HTTP请求，并指定请求模式，如GET请求或POST请求
send（）
将创建的请求发送到服务器端，并接收回应信息
setRequestHeader（）
设置一个指定请求的HTTP头信息
XMLHttpRequest对象的open（）和send（）方法在回调函数中出现较多，一般都会用open（）方法设置一个提交的路径，并通过地址重写的方式设置一些请求的参数，而真正的发出请求操作可以通过send（）方法完成。
下面通过具体的实例来讲解这些操作的使用。
第一个Ajax程序
掌握了XMLHttpRequest对象的主要属性及方法的作用后，下面通过一段代码来让读者完整地理解一个Ajax的应用。
为了操作简单，本程序在返回数据时只是简单返回一个普通的文本数据。
例小乐.2返回数据的页面--------content.htm
IlikeJavaWeb!
可以发现在本页面中没有任何的HTML元素修饰，只是一行简单的输出，这是因为在回应时，如果存在过多的HTML代码会给操作带来麻烦。
例小乐.3使用异步处理------ajax_receive_content.htm
小乐在学Ajax技术<
<
functioncreateXMLHttp（）{
if（window.XMLHttpRequest）{
}else{
Microsoft.XMLHTTP"
functionshowMsg（）{
createXMLHttp（）;
xmlHttp.open（"
post"
"
content.htm"
xmlHttp.onreadystatechange=showMsgCallback;
xmlHttp.send（null）;
functionshowMsgCallback（）{
if（xmlHttp.readyState==4）{
if（xmlHttp.status==200）{
vartext=xmlHttp.responseText;
document.getElementById（"
msg"
）.innerHTML=text;
}
inputtype="
button"
onclick="
showMsg（）"
value="
调用Ajax显示内容"
spanid="
/span>
在本程序中，当单击按钮操作时会调用showMsg（）函数，在showMsg（）函数中首先调用createXMLHttp（）函数创建xmlHttp对象，之后showMsgCallback（）函数完成内容的接收，在接收时，分别通过readState==4（判断是否发送完毕）和status==200（200的HTTP状态码表示操作正确）判断操作是否正确完成，最后通过responseText接收返回的内容，并将其设置到msg元素中进行显示。
通过本程序可以清楚地发现，Ajax完成的就是局部的内容刷新，并通过JavaScript将内容设置到指定的显示区域。
异步验证
通过第一个Ajax程序你应该已经清楚Ajax的主要方法，当然，第一个程序本身非常简单，因为异步请求的是一个静态页面，也可以将其定义成一个动态页，进行一些更复杂的操作。
登录注册的程序你应该不陌生，但是如果要注册，则首先必须保证的是一个用户的ID不能重复，那么这种用于检测用户ID的操作就可以通过Ajax完成，
当用户输入ID之后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用，则提示正确里如果有人使用，则提示错误信息。
本程序使用user表的结构，如下表：
NO.1
列名称
Userid
保存用户的登录ID号
Name
用户的真实姓名
Password
用户密码
异步验证时要执行用JavaScript操作。
在本程序中，当用户输入完ID之后肯定要选择其他的控件来执行下一步的操作，那么此时就可以利用onblur（）（丢失焦点）的事件，将用户ID通过Ajax提交到服务器上完成数据验证。
例小乐.4编写注册表单页--------regist.htm
Ajax注册验证<
JavaScript"
varflag;
//定义标志位
//表示使用的是FireFox内核浏览器
//使用的是IE内核浏览器
functioncheckUserid（userid）{
//建立XMLHttp对象
CheckServlet?
userid="
+userid）;
//设置一个请求，通过地质重写的方式将userid传递到JSP中
xmlHttp.onreadystatechange=checkUseridCallback;
//设置请求完成之后处理的回调函数
//发送请求，不传递任何参数
document.getElementById（"
）.innerHTML="
正在验证...."
;
functioncheckUseridCallback（）{//定义回调函数
if（xmlHttp.readyState==4）{//数据返回完毕
if（xmlHttp.status==200）{//HTTP操作正常
vartxt=xmlHttp.responseText;
//接收返回的内容
if（text=="
true"
）
flag=false;
//无法提交表单
document.getElementByID（"
用户ID重复，无法使用！
"
}else{
flag=true;
//可以提交表单
document.getElementById（"
此用户ID可以注册！
}
functioncheckForm（）{
returnflag;
formaction="
method="
onsubmit="
returncheckForm（）"
用户ID:
text"
name="
userid"
onblur="
checkUserid（this.value）"
spanid="
br>
姓名:
name"
密码:
password"
submit"
注册"
reset"
重置"
/form>
在本页面中使用了Ajax验证用户名ID是否重复，当用户输入完userid的内容之后，会触发失去焦点（onblur）事件，调用checkUserid（）函数，将输入的用户ID传递到服务器上进行验证，如果服务器返回的内容是true，则表示此ID可以使用，如果返回false，则表示此ID无法使用，同时表单也无法进行提交。
例小乐.5验证用户名是否存在------CheckServlet.java
packageorg.lxh.ajaxdemo;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassCheckServletextendsHttpServlet{
publicstaticfinalStringDBDriver="
org.git.mm.mysql.Driver"
publicstaticfinalStringDBURL="
jdbc:
mysql:
//localhost:
8080/ajax"
publicstaticfinalStringDBUSER="
root"
publicstaticfinalStringDBPASS="
xiaole"
publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
this.doPost（request,response）;
publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）throwsServletException,IOException{
request.setCharacterEncoding（"
GBK"
response.setContentType（"
text/html"
Connectionconn=null;
PreparedStatementpstmt=null;
ResultSetrs=null;
PrintWriterout=response.getWriter（）;
Stringuserid=request.getParameter（"
try{
Class.forName（DBDriver）;
conn=DriverManager.getConnection（DBURL,DBUSER,DBPASS）;
Stringsql="
select*fromuserwhereuserid=?
pstmt=conn.prepareStatement（sql）;
pstmt.setString（1,userid）;
rs=pstmt.executeQuery（）;
if（rs.next（））{
if（rs.getInt
（1）>
0）{
out.print（"
}else{
false"
out.flush（）;
out.close（）;
}catch（ClassNotFoundExceptione）{
e.printStackTrace（）;
}catch（SQLExceptione）{
}finally{
try{
if（pstmt!
=null）{
pstmt.close（）;
pstmt=null;
if（rs!
rs.close（）;
rs=null;
if（conn!
conn.close（）;
conn=null;
}catch（SQLExceptione）{
e.printStackTrace（）;
}
在CheckServlet.java中首先接收发送过来的userid参数，之后在数据库中验证此数据是否存在，如果存在则返回true，否则返回false。
返回XML数据
在XMLHttpRequest对象中可以使用responseXML（）方法接收一组返回的XML数据，这些返回的XML数据可以动态生成（利用JDOM工具将数据库中的数据变为XML文件），也可以直接读取一个XML文件，当客户端接收到读取的XML文件之后，可以通过DOM文件，并采用DOM解析的方式动态生成下拉列表框。
例小乐.6要返回XML文件--------allarea.xml
?
xmlversion="
1.0"
encoding="
allarea>
area>
id>
1<
/id>
北京<
/area>
2<
天津<
3<
南京<
/allarea>
例小乐.7使用Ajax解析XML，并生成下拉列表框--------ajax_select.htm
Ajax技术<
functiongetCity（）{
allarea.xml"
xmlHttp.onreadystatechange=getCityCallback;
functiongetCityCallback（）{
vararea=xmlHttp.responseXML.getElementByIdTagName（"
allarea"
）[0].childNodes;
select.length=1;
select.options[0].selected=true;
for（vari=0;
i<
allarea.length;
i++）{
vararea=allarea[i];
varoption=document.createElement（"
option"
varid=area.getElementByTagName（"
id"
）[0].firstChild.noteValue;
vartitle=area.getElementByTagName（"
title"
）[0].firstChild.nodeValue;
option.appendChild（document.
升级会员 