1、title小乐在学Ajax.script language=javaScript var xmlHttp; /Ajax核心对象名称 function createXMLHttp() /创建XMLHttpRequest核心对象 if(window.XMLHttpRequest) /判断当前使用的浏览器类型 xmlHttp = new XMLHttpRequest(); /表示使用的是FireFox内核的浏览器 else /表示使用的是IE内核的浏览器 xmlHttp = new ActiveXObject(Microsoft.XMLHttp); /script/headbody/body/htm
2、l本程序创建了一个XMLHttpRequest的对象,但是在创建之前必须首先确定出用户当前被使用的浏览器类型,之后根据浏览器类型创建合适的XMLHttpRequest对象,如果为普通的FireFox(火狐浏览器),则直接使用new XMLHttpRequest()的方式创建;而如果为IE浏览器,则通过new ActiveXObject()的方式进行创建。在XMLHttpRequest对象中定义了许多属性,要想使用此对象就需要首先了解这些属性的作用。NO.属 性 描 述1onreadystatechange指定当readState状态改变时使用的操作,一般用于指定具体的回调函数2readySta
3、te返回当前请求的状态,只读3responseBody将回应信息正文以unsigned byte 数组形式返回,只读4responseStream以Ado Stream对象的形式返回响应信息,只读5responseText接收以普通文本返回的数据,只读6responseXML接收以XML文档形式回应的数据,只读7status返回当前请求的http状态码,只读8statusText 返回当前请求的响应行状态,只读readState 一共有5中取值,分别介绍如下。1. 0 : 请求没有发出(在调用open()函数之前)。2. 1 : 请求已经建立但还没有发出(在调用send()函数之前)3. 2
4、: 请求已经发出正在处理之中(这里通常可以从响应得到内存头部)4. 3 : 请求已经处理,正在接收服务器的信息,响应中通常有部分数据可用,但是服务器还没有完成响应5. 4 : 响应已完成,可以访问服务器响应并使用它。在使用XMLHttpRequest对象进行操作时也要使用到此对象中的方法,其方法如下表。 方 法描 述 abort()取消当前所发出的请求 getAllRequestHeaders()取消所有的HTTP头信息 getResponseHeader()取得一个指定的HTTP头信息 open()创建一个HTTP请求,并指定请求模式,如GET请求或POST请求 send()将创建的请求发送
5、到服务器端,并接收回应信息 setRequestHeader()设置一个指定请求的HTTP头信息XMLHttpRequest对象的open()和send()方法在回调函数中出现较多,一般都会用open()方法设置一个提交的路径,并通过地址重写的方式设置一些请求的参数,而真正的发出请求操作可以通过send()方法完成。下面通过具体的实例来讲解这些操作的使用。第一个Ajax程序掌握了XMLHttpRequest对象的主要属性及方法的作用后,下面通过一段代码来让读者完整地理解一个Ajax的应用。为了操作简单,本程序在返回数据时只是简单返回一个普通的文本数据。例 小乐.2 返回数据的页面-conten
6、t.htmI like JavaWeb!可以发现在本页面中没有任何的HTML元素修饰,只是一行简单的输出,这是因为在回应时,如果存在过多的HTML代码会给操作带来麻烦。例 小乐.3 使用异步处理-ajax_receive_content.htm小乐在学Ajax技术 在本程序中,当单击按钮操作时会调用showMsg()函数,在showMsg()函数中首先调用createXMLHttp()函数创建xmlHttp对象,之后showMsgCallback()函数完成内容的接收,在接收时,分别通过 readState=4(判断是否发送完毕) 和 status=200(200的HTTP状态码表示操作正确)
7、 判断操作是否正确完成,最后通过responseText接收返回的内容,并将其设置到msg元素中进行显示。通过本程序可以清楚地发现,Ajax完成的就是局部的内容刷新,并通过JavaScript将内容设置到指定的显示区域。异步验证通过第一个Ajax程序你应该已经清楚Ajax的主要方法,当然,第一个程序本身非常简单,因为异步请求的是一个静态页面,也可以将其定义成一个动态页,进行一些更复杂的操作。登录注册的程序你应该不陌生,但是如果要注册,则首先必须保证的是一个用户的ID不能重复,那么这种用于检测用户ID的操作就可以通过Ajax完成,当用户输入ID之后,会使用Ajax将信息提交到服务器上进行验证,如
8、果此ID没有被人使用,则提示正确里如果有人使用,则提示错误信息。本程序使用user表的结构,如下表:NO.1 列 名 称 Userid保存用户的登录ID号Name用户的真实姓名 Password用户密码异步验证时要执行用JavaScript操作。在本程序中,当用户输入完ID之后肯定要选择其他的控件来执行下一步的操作,那么此时就可以利用onblur()(丢失焦点)的事件,将用户ID通过Ajax提交到服务器上完成数据验证。例 小乐.4 编写注册表单页-regist.htmAjax注册验证 姓名:name 密码:passwordsubmit注册reset重置/form在本页面中使用了Ajax验证用户
9、名ID是否重复,当用户输入完userid的内容之后,会触发失去焦点(onblur)事件,调用checkUserid()函数,将输入的用户ID传递到服务器上进行验证,如果服务器返回的内容是true,则表示此ID可以使用,如果返回false,则表示此ID无法使用,同时表单也无法进行提交。例 小乐.5 验证用户名是否存在-CheckServlet.javapackage org.lxh.ajaxdemo;import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.Dr
10、iverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckServlet extend
11、s HttpServlet public static final String DBDriver =org.git.mm.mysql.Driver public static final String DBURL =jdbc:mysql:/localhost:8080/ajax public static final String DBUSER = root public static final String DBPASS= xiaole public void doGet(HttpServletRequest request,HttpServletResponse response) t
12、hrows ServletException,IOException this.doPost(request, response); public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException request.setCharacterEncoding(GBK response.setContentType(text/html Connection conn = null; PreparedStatement pstmt = null;
13、 ResultSet rs = null; PrintWriter out = response.getWriter(); String userid = request.getParameter( try Class.forName(DBDriver); conn =DriverManager.getConnection(DBURL,DBUSER,DBPASS); String sql = select * from user where userid=? pstmt = conn.prepareStatement(sql); pstmt.setString(1, userid); rs =
14、 pstmt.executeQuery(); if(rs.next() if(rs.getInt(1)0) out.print( elsefalse out.flush(); out.close(); catch(ClassNotFoundException e) e.printStackTrace(); catch(SQLException e) finally try if(pstmt!=null) pstmt.close(); pstmt = null; if(rs! rs.close(); rs = null; if(conn! conn.close(); conn = null; c
15、atch(SQLException e) e.printStackTrace();在CheckServlet.java中首先接收发送过来的userid参数,之后在数据库中验证此数据是否存在,如果存在则返回true,否则返回false。返回XML数据在XMLHttpRequest对象中可以使用responseXML()方法接收一组返回的XML数据,这些返回的XML数据可以动态生成(利用JDOM工具将数据库中的数据变为XML文件),也可以直接读取一个XML文件,当客户端接收到读取的XML文件之后,可以通过DOM文件,并采用DOM解析的方式动态生成下拉列表框。例 小乐.6 要返回XML文件-alla
16、rea.xml?xml version=1.0 encoding=allareaareaid1北京2天津3南京例 小乐.7 使用Ajax解析XML,并生成下拉列表框-ajax_select.htmAjax 技术 function getCity()allarea.xml xmlHttp.onreadystatechange = getCityCallback; function getCityCallback() var area = xmlHttp.responseXML.getElementByIdTagName(allarea)0.childNodes; select.length = 1; select.options0.selected = true; for(var i = 0;iallarea.length;i+) var area = allareai; var option = document.createElement(option var id = area.getElementByTagName(id)0.firstChild.noteValue; var title = area.getElementByTagName(title)0.firstChild.nodeValue; option.appendChild(document.
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1