Ajax开发技术

最新推荐文章于 2024-07-16 17:56:11 发布

亚森保罗

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量380

点赞数

分类专栏： Java Web 文章标签： ajax javascript

Java Web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

XMLHttpRequest对象：

在Ajax中主要是通过XMLHttpRequest对象处理发送异步请求和回应的，

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

创建XMLHttpRequest对象----create_ajax.htm

<html>
<head>
	<title></title>
	<script language="javascript">
		var xmlHttp ;//Ajax核心对象名称
		function createXMLHttp(){//创建XMLHttpRequest核心对象
			if(window.XMLHttpRequest){//判断当前使用的浏览器类型
				xmlHttp = new XMLHttpRequest() ;//表示使用的是FireFox内核的浏览器
			} else {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;//表示使用的是IE内核的浏览器
			}
		}
	</script>
</head>
<body>
</body>
</html>

XMLHttpRequest对象的属性：

NO.	属性	描述
1	onreadystatechange	指定当readState状态改变时使用的操作，一般用于指定具体的回调函数
2	readyState	返回当前请求的状态，只读
3	responseBody	将回应信息正文以unsigned byte数组形式返回，只读
4	responseStream	以Ado Stream对象的形式返回响应信息，只读
5	responseText	接收以普通文本返回的数据，只读
6	responseXML	接收以XML文档形式回应的数据，只读
7	status	返回当前请求的http状态码，只读
8	statusText	返回当前请求的响应行状态，只读

readyState一共有5种取值，分别介绍如下：

0：请求没有发出（在调用open()函数之前）、

1：请求已经建立但还没有发出（在调用send()函数之前）

2：请求已经发出正在处理之中（这里通常可以冲响应得到内容头部）

3：请求已经处理，正在接受服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应

4：响应已完成，可以访问服务器响应并使用它

XMLHttpRequest对象的方法：

NO.	方法	描述
1	abort()	取消当前所发出的请求
2	getAllResponseHeaders()	取得所有的HTTP头信息
3	getResponseHeader()	取得一个指定的HTTP头信息
4	open()	创建一个HTTP请求，并指定请求模式，如GET请求或POST请求
5	send()	将创建的请求发送到服务器端，并接收回应信息
6	setRequestHeader()	设置一个指定请求的HTTP头信息

第一个Ajax程序

返回数据的页面----content.htm

Hello World!!!

使用异步处理----ajax_receive_content.htm

<span style="font-size:12px;"><html>
<head>
	<title></title>
	<script language="javascript">
		var xmlHttp ;
		function createXMLHttp(){
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest() ;
			} else {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
			}
		}
		function showMsg(){
			createXMLHttp() ;	// 创建XMLHttp对象
			xmlHttp.open("POST","content.htm") ;
			// 设置操作的回调函数
			xmlHttp.onreadystatechange = showMsgCallback ;
			xmlHttp.send(null) ;
		}
		function showMsgCallback(){	// 回调操作函数
			if(xmlHttp.readyState == 4){	// 调用完成
				if(xmlHttp.status == 200){	// HTTP状态码操作正常
					var text = xmlHttp.responseText ;
					document.getElementById("msg").innerHTML = text ;
				}
			}
		}
	</script>
</head>
<body>
<input type="button" onClick="showMsg()" value="调用AJAX显示内容">
<span id="msg"></span>
</body>
</html></span>

异步验证

编写注册表单页----regist.htm

<html>
<head>
	<title></title>
	<script language="javascript">
		var xmlHttp ;
		var flag = false ;
		function createXMLHttp(){
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest() ;
			} else {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
			}
		}
		function checkUserid(userid){
			createXMLHttp() ;
			xmlHttp.open("POST","CheckServlet?userid="+userid) ;//设置一个请求，通过地址重写的方式将userid传递到JSP中
			xmlHttp.onreadystatechange = checkUseridCallback ;//设置请求完成后处理的回调函数
			xmlHttp.send(null) ;//发送请求，不传递任何参数
			document.getElementById("msg").innerHTML = "正在验证..." ;
		}
		function checkUseridCallback(){//定义回调函数
			if(xmlHttp.readyState == 4){//数据返回完毕
				if(xmlHttp.status == 200){//HTTP操作正常
					
					var text = xmlHttp.responseText ;//接收返回的内容
					if(text == "true"){	// 用户id已经存在了
						document.getElementById("msg").innerHTML = "用户ID重复，无法使用！" ;
						flag = false ;
					} else {
						document.getElementById("msg").innerHTML = "此用户ID可以注册！" ;
						flag = true ;
					}
				}
			}
		}
		function checkForm(){
			return flag ;
		}
	</script>
</head>
<body>
<form action="regist.jsp" method="post" οnsubmit="return checkForm()">
	用户ID：<input type="text" name="userid" οnblur="checkUserid(this.value)"><span id="msg"></span><br>
	姓  名：<input type="text" name="name"><br>
	密  码：<input type="password" name="password"><br>
	<input type="submit" value="注册">
	<input type="reset" value="重置">
</form>
</body>
</html>

验证用户名是否存在----CheckServlet.java

package org.lxh.ajaxdemo ;
import java.sql.* ;
import java.io.* ;
import javax.servlet.* ;
import javax.servlet.http.* ;
public class CheckServlet extends HttpServlet{
	public static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ;
 	public static final String DBURL = "jdbc:mysql://localhost:3306/mldn" ;
	public static final String DBUSER = "root" ;
	public static final String DBPASS = "mysqladmin" ;
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		this.doPost(request,response) ;
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		request.setCharacterEncoding("GBK") ;
		response.setContentType("text/html") ;//设置回应的MIME
		Connection conn = null ;//声明数据库连接对象
		PreparedStatement pstmt = null ;//声明数据库操作
		ResultSet rs = null ;//声明数据库结果集
		PrintWriter out = response.getWriter() ;
		String userid = request.getParameter("userid") ;//接收验证userid
		try{
			Class.forName(DBDRIVER) ;
			conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ;
			String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ;
			pstmt = conn.prepareStatement(sql) ;
			pstmt.setString(1,userid) ;
			rs = pstmt.executeQuery() ;
			if(rs.next()){
				if(rs.getInt(1)>0){	// 用户ID已经存在了
					out.print("true") ;
				} else {
					out.print("false") ;
				}
			}
		}catch(Exception e){
			e.printStackTrace() ;
		}finally{
			try{
				conn.close() ;
			}catch(Exception e){}
		}
	}
}

配置web.xml

	<servlet>
		<servlet-name>CheckServlet</servlet-name>
		<servlet-class>org.lxh.ajaxdemo.CheckServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>CheckServlet</servlet-name>
		<url-pattern>/ajaxdemo_02/CheckServlet</url-pattern>
	</servlet-mapping>

返回XML数据

要返回XML文件----allarea.xml

<?xml version="1.0" encoding="GBK"?>
<allarea>
	<area>
		<id>1</id>
		<title>北京</title>
	</area>
	<area>
		<id>2</id>
		<title>天津</title>
	</area>
	<area>
		<id>3</id>
		<title>南京</title>
	</area>
</allarea>

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

<html>
<head>
	<title></title>
	<script language="javascript">
		var xmlHttp ;
		function createXMLHttp(){
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest() ;
			} else {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
			}
		}
		function getCity(){
			createXMLHttp() ;
			xmlHttp.open("POST","allarea.xml") ;
			xmlHttp.onreadystatechange = getCityCallback ;
			xmlHttp.send(null) ;
		}
		function getCityCallback(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes ;	// 取得全部的allarea下的节点
					var select = document.getElementById("city") ;
					select.length = 1 ;	// 每次选择一个
					select.options[0].selected = true ;	// 第一个为选中的状态
					for(var i=0;i<allarea.length;i++){
						var area = allarea[i] ;
						var option = document.createElement("option") ;
						var id = area.getElementsByTagName("id")[0].firstChild.nodeValue ;
						var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
						option.setAttribute("value",id) ;
						option.appendChild(document.createTextNode(title)) ;
						select.appendChild(option) ;
					}
				}
			}
		}
	</script>
</head>
<body οnlοad="getCity()">
	<form action="" method="post">
		请选择喜欢的城市：
			<select name="city">
				<option value="0"> - 请选择城市 -</option>
			</select>
	</form>
</body>
</html>