XMLHttpRequest实现Ajax局部更新效果

最新推荐文章于 2021-10-23 15:38:20 发布

最新推荐文章于 2021-10-23 15:38:20 发布 · 165 阅读

文章标签：

#java web #AJAx技术 #servlet

JSON编码 +AjAx技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用Ajax和jQuery技术实现网页的局部刷新功能，包括创建XMLHttpRequest对象、设置回调函数、发送请求和接收响应的过程。同时提供了一个具体的示例代码，展示了如何检查用户名的可用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax用于数据的更新等操作

xmlHttpRequest的属性和方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

使用XMLHttpRequest实现Ajax效果思路;

1,创建XMLHttpRequest

2,创建回调函数callback

3,设置请求的路径

4,发送数据

5,回调函数中判断是否交互完成,是否找到页面,接受servlet返回的数据

代码实现:

Servlet代码:记得web.xml中配置

package ajaxDemo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 * @author Administrator 通过局部刷新来实现数据的查找Ajax
 */
public class AjaxServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	@Override
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		response.setContentType("text/html");
		request.setCharacterEncoding("GBK");
		response.setCharacterEncoding("GBK");
		//获取url传递的参数
		String userName = request.getParameter("userName");
		System.out.println(userName);
		//假设连接上数据库,判断 并给予返回值 ,ok表示可以注册,ON表示不可以注册
		if ("123".equals(userName)) {
			out.write("ON");
		} else {
			out.write("OK");
		}
	}

}

注意:(重点)

Jquery和Ajax实现局部更新;需要引Jquery的包

ajax提交数据不需要通过form表单提交,不需要submit,

需要自己获取表单框中的值,

用户名:
	<input type="text" id="userName" onblur="fun_user()" />
	<div id="divName"></div>
	<br /> 密 码:
	<input type="password" id="userPwd" />
	<div id="divPwd"></div>
	<input type="button" value="提交" />

Jquery+ajax关键代码:

<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
</head>
<body>
	<script type="text/javascript">
		//javascript中需要引入Jquery包就不能将函数写在同一级下
		var xmlHttp;
		function fun_user() {
			//使用Jquery获取id的值
			var username = $("#userName").val();

			//创建XMLHttpRequest的对象,js创建对象和java类似,也是使用new
			//XMLHttpRequest的open(),send(),abort(),readyState,responseText
			xmlHttp = new XMLHttpRequest();
			//         if(xmlHttp){
			//       	alert("创建")
			//     }else{
			//   	alert("出错了");
			// }
			
			//2,创建回调函数callback
			xmlHttp.onreadystatechange = callback;
			//3,创建与Servlet的连接符,定义连接的方式,是否为异步,是否需要账号和密码验证
			xmlHttp.open("GET", "AjaxServlet?userName=" + username, true);
			//4,发送数据,数据已经通过连接方式传送,所以这里只需要发送null
			xmlHttp.send(null);

		}
      //回调函数callback
		function callback() {
			//判断是否Ajax交互完成
			alert(xmlHttp.readyState);
			//readyState的书中状态
			if (xmlHttp.readyState == 4) {
				//200表示网页是否找到
				if (xmlHttp.status == 200) {
					//以文本的方式返回值
					var xmltext = xmlHttp.responseText;
					//获取提示位置
					var divname = document.getElementById("divName");
					//设置提示信息
					divname.innerHTML = xmltext;
				}
			}

		}
	</script>

运行结果:

账号存在

账号不存在