加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Ajax开发技术

发布时间：2020-12-15 21:52:01 所属栏目：百科 来源：网络整理
导读：XMLHttpRequest对象： 在Ajax中主要是通过XMLHttpRequest对象处理发送异步请求和回应的， 如果要创建一个XMLHttpRequest对象则必须使用JavaScript，创建语句如下： 创建XMLHttpRequest对象----create_ajax.htm htmlheadtitle/titlescript language="javascri

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" onsubmit="return checkForm()">
	用户ID：<input type="text" name="userid" onblur="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,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 onload="getCity()">
	<form action="" method="post">
		请选择喜欢的城市：
			<select name="city">
				<option value="0"> - 请选择城市 -</option>
			</select>
	</form>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同