Ajax解析
1.Ajax
Asynchronous(异步的) javascript and xml
技术组成：
CSS + xml +JavaScript +DOM
Ajax核心对象： XmlHttpRequest
2.创建一个WEB工程
2.1给文本框一个注册事件
//给文本框注册一个失去焦点事件 window.onload=function(){ var dom=document.getElementById("txtName"); dom.onblur=function(){ myajax(); }; };
2.2定制对象，能力检测，构建请求地址，设置回调函数响应回来的数据，用send发送请求
function myajax(){ //01.定制出 xhr对象 var xhr; //02.能力检测 if(window.XMLHttpRequest){ //非IE浏览器 xhr=new XMLHttpRequest(); }else{ //IE内核 xhr=new ActiveXObject("Microsoft.XMLHttp"); } var dom=document.getElementById("txtName"); var myspan=document.getElementById("msg"); var myval=dom.value; //03.构建请求地址 //xhr.open("请求类型","请求地址","是否异步"); xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据 xhr.onreadystatechange=function(){ //什么 if(xhr.readyState==4&&xhr.status==200){ //获取响应数据 var data=xhr.responseText; if(data=='OK'){ myspan.innerText="用户名已经被注册"; }else{ myspan.innerText="用户名可以注册"; } } }; //05.用send真正的发送请求 xhr.send(null); }
3.index.jsp页面
<body>
用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
密码： <input type="password" name="txtPwd"/>
</body>
4.servlet层
package servlet; 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; public class CheckUserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uname = request.getParameter("uname"); if (uname.equals("admin")) { response.getWriter().write("OK"); }else { response.getWriter().write("NO"); } } }
4.实现效果
5.使用Post方法
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> //给文本框注册一个失去焦点事件 window.onload=function(){ var dom=document.getElementById("txtName"); dom.onblur=function(){ myajax(); }; }; function myajax(){ //01.定制出 xhr对象 var xhr; //02.能力检测 if(window.XMLHttpRequest){ //非IE浏览器 xhr=new XMLHttpRequest(); }else{ //IE内核 xhr=new ActiveXObject("Microsoft.XMLHttp"); } var dom=document.getElementById("txtName"); var myspan=document.getElementById("msg"); var myval=dom.value; //03.构建请求地址 //xhr.open("请求类型","请求地址","是否异步"); xhr.open("post","<%=path%>/servlet/CheckUserServlet",true); //04.设置回调函数 响应回来的数据 xhr.onreadystatechange=function(){ //什么 if(xhr.readyState==4&&xhr.status==200){ //获取响应数据 var data=xhr.responseText; if(data=='OK'){ myspan.innerText="用户名已经被注册"; }else{ myspan.innerText="用户名可以注册"; } } }; //05.用send真正的发送post请求 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("uname="+myval); } </script> </head> <body> <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/> <input type="password" name="txtPwd"/> </body> </html>
6.使用jQuery方法
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <script type="text/javascript"> //给文本框注册一个失去焦点事件 $(function(){ //等待页面上所有标签完毕后执行 var dom=$("#txtName"); dom.blur(function(){ myjquery(); }); }); function myjquery(){ var dom=$("#txtName"); $.ajax({ url:'<%=path%>/servlet/CheckUserServlet', type:'post', data:{uname:dom.val()}, success:function(today){ //today server 打到 浏览器的数据 alert(today); } }); } </script> </head> <body> <h1>我是Jquery发送Ajax</h1> <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/> <input type="password" name="txtPwd"/> </body> </html>
