小乐Ajax技术经验总结.docx
- 文档编号:5856610
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:14
- 大小:23.29KB
小乐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"?
>
例小乐.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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ajax 技术 经验总结
![提示](https://static.bdocx.com/images/bang_tan.gif)