XMLHttpRequest实现Ajax局部更新效果
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>
运行结果:
账号存在
账号不存在