Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。
主要有以下四个步骤：
（1）初始化XMLHttpRequest对象。不同浏览器的差异，需要我们创建一个跨浏览器的对象，并判断XMLHttpRequest对象创建是否成功，如果不成功，则给予提示。
（2）为XMLHttpRequest对象指定一个回调函数，用于对后台返回结果进行处理。
（3）创建一个与服务器的连接，在创建时，需要指定发送请求的方式（GET/POST），以及设置是否采用异步方式发送请求。
（4）向服务器发送请求。
以下是一个用Ajax判断用户名是否正确的样例：
index.jsp文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function getAnswer(username) { if(username.value == ""){ alert("请输入用户名"); username.focus(); return; } else{ checkUsername("checkusername.jsp?username="+username.value); //参数已整合到url地址中 } } function checkUsername(url) { http_request = new XMLHttpRequest(); //初始化XMLHttpRequest对象 http_request.onreadystatechange = function (){ //回调函数对后台返回结果进行处理 if(http_request.readyState==4){ if(http_request.status == 200){ alert(http_request.responseText); } else{ alert("地址有误"); } } } http_request.open("POST",url,true); //链接服务器 http_request.send(null); //发送请求，这里不用带参数，前面参数已经整合进url中。 } </script> </head> <body> <form action="" method="get" name="form1"> 用户名： <input type="text" name="username"><br> 密码： <input type="password" name="passwd"><br> <input type="submit" value="提交" onclick="getAnswer(this.form.username)"> </form> </body> </html>
checkusername.jsp(后台处理)：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8"); if(s.equals("Tom")){ out.print("此用户已注册"); } else{ out.print("恭喜你注册成功"); } %>
另一种实现方法：（post方法，但传参数）
index.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function getAnswer(username) { if(username.value == ""){ alert("请输入用户名"); username.focus(); return; } else{ checkUsername("checkusername.jsp",username); } } function checkUsername(url,username) { http_request = new XMLHttpRequest(); //初始化XMLHttpRequest对象 var param = "username="+username.value; //alert(username.value); http_request.onreadystatechange = function (){ //回调函数对后台返回结果进行处理 if(http_request.readyState==4){ if(http_request.status == 200){ alert(http_request.responseText); } else{ alert("地址有误"); } } } http_request.open("POST",url,true); //链接服务器 http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置表头 http_request.send(param); //发送请求，这里不用带参数，前面参数已经整合进url中。 } </script> </head> <body> <form action="" method="get" name="form1"> 用户名： <input type="text" name="username"><br> 密码： <input type="password" name="passwd"><br> <input type="submit" value="提交" onclick="getAnswer(this.form.username)"> </form> </body> </html>
疑问：
1.两种方法有什么不同
2.第二种方法为什么要设置表头，而且第二种写法为什么只能测试一次，第二次填个用户名测试就无反馈