小乐Ajax技术经验总结.docx

小乐Ajax技术经验总结.docx

《小乐Ajax技术经验总结.docx》由会员分享，可在线阅读，更多相关《小乐Ajax技术经验总结.docx（14页珍藏版）》请在冰豆网上搜索。

小乐Ajax技术经验总结

小乐Ajax开发技术经验交流

通过本章的学习可以达到以下的目标：

1.掌握Ajax技术的主要作用。

2.掌握XMLHttpRequest对象的作用，并可以使用XMLHttpRequest对象进行操作。

3.可以使用XML+Ajax实现页面的局部刷新功能。

Ajax技术主要完成页面的局部刷新，通过Ajax技术可以使之前的应用程序在每次提交时不用进行页面的整体刷新，从而提升操作的性能，在Ajax中主要是依靠XMLHttpRequest对象完成操作，下面小乐将对Ajax技术的特点及使用进行讲解。

提示

Ajax技术的最早使用者。

Ajax技术的最早使用者是Google，例如，GoogleMaps就大量地应用了Ajax技术。

随后的Yahoo、Amazon（亚马逊）也陆续开始应用此技术。

Ajax技术简介

Ajax（AsynchronousJavaScriptandXML，异步JavaScript和XML）并不是一项新的技术，它产生的主要目的是用于页面的局部刷新。

从之前的代码开发中可以发现，每当用户向服务器端发出请求时，哪怕需要的只是简单地更新一点点的局部内容，服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低的。

而如果采用Ajax技术，就可以实现局部的内容变更，从而使处理的性能要比前者高很多。

因为采用的是局部刷新技术，所以整个页面并不会随着用户的每次请求而整体变化，只会在局部的位置上有所改变，这样的实现方式会使程序的性能更高。

提示：

关于Ajax技术作用的解释。

小乐我举一个简单的例子分析一下什么是Ajax。

你在宴请朋友的时往往会选择去饭店聚餐，大家一起点菜吃饭，，等所有的菜都已经上桌时发现有一盘菜出现了问题（可能出现了某些类似小强的物种在菜中），那么现在宾客们有两种选择了：

第一种全桌的菜换掉，第二种只换掉有问题的菜。

很明显，大部分人都会采用只换一盘菜的做法，因为如果要全桌的菜都换掉，则肯定需要重新进入漫长的等待，而如果只换掉一盘菜，那么等待的时间就相对较少，而且在等待时可以先吃其他的菜。

这实际上就是局部刷新的操作原理，Ajax完成的就是这种局部的刷新功能。

Ajax本身是一门综合性的技术，其主要应用包含了HTML、JavaScript、XML、DOM、XMLHttpRequest等页面技术，但是在这之中最重要的就是XMLHttpRequest对象。

提示：

Ajax技术并不只依赖于Java。

Ajax技术并不是只能在Java中使用，现在动态Web实现技术，如PHP、ASP.NET都已经很好地支持了Ajax技术。

XMLHttpRequest对象

在Ajax中主要是通过XMLHttpRequest对象处理发送异步请求和回应的，此对象最早是在IE5中以ActiveX组件的形式出现的，一直到2005年之后才被广泛地使用。

而如果要创建一个XMLHttpRequest对象则必须使用JavaScript，创建的语句如下：

例小乐.1创建XMLHttpRequest对象---------create_ajax.htm

varxmlHttp;//Ajax核心对象名称

functioncreateXMLHttp（）{//创建XMLHttpRequest核心对象

if（window.XMLHttpRequest）{//判断当前使用的浏览器类型

xmlHttp=newXMLHttpRequest（）;//表示使用的是FireFox内核的浏览器

}else{//表示使用的是IE内核的浏览器

xmlHttp=newActiveXObject（"Microsoft.XMLHttp"）;

}

}

本程序创建了一个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对象进行操作时也要使用到此对象中的方法，其方法如下表。

NO.

方法

描述

1

abort（）

取消当前所发出的请求

2

getAllRequestHeaders（）

取消所有的HTTP头信息

3

getResponseHeader（）

取得一个指定的HTTP头信息

4

open（）

创建一个HTTP请求，并指定请求模式，如GET请求或POST请求

5

send（）

将创建的请求发送到服务器端，并接收回应信息

6

setRequestHeader（）

设置一个指定请求的HTTP头信息

XMLHttpRequest对象的open（）和send（）方法在回调函数中出现较多，一般都会用open（）方法设置一个提交的路径，并通过地址重写的方式设置一些请求的参数，而真正的发出请求操作可以通过send（）方法完成。

下面通过具体的实例来讲解这些操作的使用。

第一个Ajax程序

掌握了XMLHttpRequest对象的主要属性及方法的作用后，下面通过一段代码来让读者完整地理解一个Ajax的应用。

为了操作简单，本程序在返回数据时只是简单返回一个普通的文本数据。

例小乐.2返回数据的页面--------content.htm

IlikeJavaWeb!

可以发现在本页面中没有任何的HTML元素修饰，只是一行简单的输出，这是因为在回应时，如果存在过多的HTML代码会给操作带来麻烦。

例小乐.3使用异步处理------ajax_receive_content.htm

varxmlHttp;

functioncreateXMLHttp（）{

if（window.XMLHttpRequest）{

xmlHttp=newXMLHttpRequest（）;

}else{

xmlHttp=newActiveXObject（"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;

}

}

}

在本程序中，当单击按钮操作时会调用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

列名称

描述

1

Userid

保存用户的登录ID号

2

Name

用户的真实姓名

3

Password

用户密码

提示：

异步验证时要执行用JavaScript操作。

在本程序中，当用户输入完ID之后肯定要选择其他的控件来执行下一步的操作，那么此时就可以利用onblur（）（丢失焦点）的事件，将用户ID通过Ajax提交到服务器上完成数据验证。

例小乐.4编写注册表单页--------regist.htm

varxmlHttp;//Ajax核心对象名称

varflag;//定义标志位

functioncreateXMLHttp（）{//创建XMLHttpRequest核心对象

if（window.XMLHttpRequest）{//判断当前使用的浏览器类型

xmlHttp=newXMLHttpRequest（）;//表示使用的是FireFox内核浏览器

}else{

xmlHttp=newActiveXObject（"Microsoft.XMLHttp"）;//使用的是IE内核浏览器

}

}

functioncheckUserid（userid）{

createXMLHttp（）;//建立XMLHttp对象

xmlHttp.open（"post","CheckServlet?

userid="+userid）;//设置一个请求，通过地质重写的方式将userid传递到JSP中

xmlHttp.onreadystatechange=checkUseridCallback;//设置请求完成之后处理的回调函数

xmlHttp.send（null）;//发送请求，不传递任何参数

document.getElementById（"msg"）.innerHTML="正在验证....";

}

functioncheckUseridCallback（）{//定义回调函数

if（xmlHttp.readyState==4）{//数据返回完毕

if（xmlHttp.status==200）{//HTTP操作正常

vartxt=xmlHttp.responseText;//接收返回的内容

if（text=="true"）

flag=false;//无法提交表单

document.getElementByID（"msg"）.innerHTML="用户ID重复，无法使用！

"

}else{

flag=true;//可以提交表单

document.getElementById（"msg"）.innerHTML="此用户ID可以注册！

";

}

}

}

}

functioncheckForm（）{

returnflag;

}

用户ID:

姓名:

密码:

在本页面中使用了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（"userid"）;

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（"true"）;

}else{

out.print（"false"）;

}

}

out.flush（）;

out.close（）;

}catch（ClassNotFoundExceptione）{

e.printStackTrace（）;

}catch（SQLExceptione）{

e.printStackTrace（）;

}finally{

try{

if（pstmt!

=null）{

pstmt.close（）;

pstmt=null;

}

if（rs!

=null）{

rs.close（）;

rs=null;

}

if（conn!

=null）{

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="GBK"?

>

1

2

3

例小乐.7使用Ajax解析XML，并生成下拉列表框--------ajax_select.htm

varxmlHttp;

functioncreateXMLHttp（）{

if（window.XMLHttpRequest）{

xmlHttp=newXMLHttpRequest（）;

}else{

xmlHttp=newActiveXObject（"Microsoft.XMLHttp"）;

}

}

functiongetCity（）{

createXMLHttp（）;

xmlHttp.open（"post","allarea.xml"）;

xmlHttp.onreadystatechange=getCityCallback;

xmlHttp.send（null）;

}

functiongetCityCallback（）{

if（xmlHttp.readyState==4）{

if（xmlHttp.status==200）{

vararea=xmlHttp.responseXML.getElementByIdTagName（"allarea"）[0].childNodes;

select.length=1;

select.options[0].selected=true;

for（vari=0;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.