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.第二種方法為什么要設置表頭，而且第二種寫法為什么只能測試一次，第二次填個用戶名測試就無反饋