1.获取ajax对象
new XMLHttpRequest();
IE6-8: new ActiveXOject("Microsoft.XMLHTTP");
兼容判断：if(XMLHttpRequest){...}else{...}
2.打开链接：open()
open(method,url,async):method:请求方式GET/POST，url:请求地址，async:true(异步，默认)/false(同步)
3.发送请求：send()
如果是POST请求，send方法要带参，带上我们要传输的数据。
POST请求的话，还要修改请求头，写在open方法后：setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.监听状态变化
onreadystatechange = function(){...}
5.状态判断:readyState==4&&status==200
readyState:4/3/2/1/0
0：请求未初始化，open()方法未执行
1：send()方法未调用
2：send()方法已经被调用，响应头已经获取，响应头的状态已经返回
3：部分responseText已经获取
4：整个请求过程完成
status:200/404/500
6.responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
注意：1.后端不做跳转，直接返回数据 2.返回的数据类型肯定是字符串 3.使用print，不要使用println（会有换行） 4.有的浏览器会有缓存问题
如何解决浏览器缓存问题：传输的参数加上时间戳 url=“/ajax/checkUser?username=”+username+"&_timer="+new Date().getTime();
_timer:该参数名只要保证不与其他参数名重复即可
代码演示：检查用户名是否重复
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>检查用户名是否重复</title> 7 </head> 8 9 <body> 10 用户名：<input type="text" name="username" id="username" /> 11 <br /> 12 <span id="info"></span><br /> 13 <button type="button" id="checkUser" onclick="checkUser()">校验</button> 14 <!--用ajax完成post请求时, 15 1.button的类型不能是submit, 16 submit会有一个浏览器默认事件(即提交后会自动刷新页面) 17 2.请求头的Content-Type要改变,写在open之后 18 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 19 3.send(要传输的数据写在这里) 20 --> 21 </body> 22 <script type="text/javascript"> 23 function checkUser() { 24 //获取数据 25 var username = document.getElementById("username").value; 26 alert(username); 27 //1.获取ajax对象 28 var xhr = null; 29 if(XMLHttpRequest) { 30 xhr = new XMLHttpRequest(); 31 } else if(ActiveXObject) { 32 xhr = new ActiveXObject("Microsoft.XMLHTTP"); 33 } else { 34 alert("你是啥？？?"); 35 } 36 //2.open 带参数传输 37 xhr.open("GET", "/ajax/checkUser?username="+username, true); 38 //3.send 39 xhr.send(); 40 //4.监听状态 41 xhr.onreadystatechange = function() { 42 if(xhr.status == 200 && xhr.readyState == 4) { 43 if(xhr.responseText == "false") { 44 document.getElementById("info").innerHTML="用户名已存在！！"; 45 } else { 46 document.getElementById("info").innerHTML="用户名可以使用！！"; 47 } 48 } else { 49 console.debug("error"); 50 } 51 } 52 } 53 </script> 54 55 </html>
前端代码
1 @WebServlet("/checkUser") 2 public class checkUserServlet extends HttpServlet { 3 private static final long serialVersionUID = 1L; 4 @Override 5 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 6 String username = request.getParameter("username"); 7 System.out.println(username); 8 if("admin".equals(username)) { 9 System.out.println("判断结果为true"); 10 response.getWriter().print("false");//不用加ln,会出错 11 }else { 12 response.getWriter().print("true"); 13 } 14 } 15 }
后端代码
如果您觉得本文的内容对您的学习有所帮助：
关键字：
ajax