Ajax原理以及實現（js實現以及jquery實現）
1.Ajax簡介
Ajax：非同步js，xml
非同步重新整理：如果網頁中某一個地方需要修改，非同步重新整理可以使只重新整理的地方修改，而不是全域性修改，比如，你看視訊點贊不可能你點一個贊就重新整理整個視訊頁面吧
2.js實現Ajax
js：
XMLHttpRequest物件
XMLHttpRequest物件的方法：
2-1:open(方法名（提交方式get，post）,伺服器地址,true)
第三個引數是true表示非同步請求，false表示同步請求
該方法作用：與服務端建立連線
2-2：send():
get: send(null)
post: send(引數值)
作用：傳送資料。
2-3:sendRequestHeader(header,value):
請求頭資訊
get:不需要設定此方法。
post：需要設定：
a.如果請求元素中包含了檔案上傳。
setRequestHeader(“Content-Type”,”multipart/form-data”)
b.不包含檔案上傳
setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
XMLHttpRequest物件的屬性：
readystate:請求狀態
只有狀態為4代表請求完畢才算完成。
state：響應狀態
只有200才響應正常
onreadyStatechange：回撥函式。
圖中b執行完就去執行a了
responseText：響應格式為String
responseXML：響應格式為
XML
3.註冊時驗證手機號碼是否存在例項（js版Ajax）
這裡就不連線資料庫操作了
假設存在18888888888個號碼，如果輸入這個號碼則會提示存在。
註冊頁面
register.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"> <script type="text/javascript"> function register(){ var mobile = document.getElementById("mobile").value; //通過ajax非同步方式請求伺服器 xmlHttpRequest = new XMLHttpRequest(); //設定xmlHttpRequest物件的回撥函式 xmlHttpRequest.onreadystatechange = callBack; xmlHttpRequest.open("post","mobileServlet",true); //設定post方式的頭資訊 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send("mobile="+mobile);//key=value } //定義回撥函式（接收伺服器端的返回值） function callBack(){ if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ //接收伺服器端返回的資料 var data = xmlHttpRequest.responseText;//伺服器端返回值為string格式 alert(data.length+"==="+data); if(data == "true"){ alert("該號碼已存在，請更換！"); }else{ alert("註冊成功！"); } } } </script> <title>Insert title here</title> </head> <body> 手機號碼：<input id = "mobile" /> <br/> <input type = "button" value = "註冊" onclick = "register()"> </body> </html>
Servlet：
package control;
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;
/**
* Servlet implementation class mobileServlet
*/
public class mobileServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String mobile = request.getParameter("mobile");
//假設此時資料庫中只有一個號碼：18888888888
PrintWriter out = response.getWriter();
if("18888888888".equals(mobile)){
out.write("true");//servlet以輸出流的方式將資訊返回給客戶端
}else{
out.write("false");
}
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
程式我額外輸出了請求狀態的值，可以參看上面的方法。
4.使用JQuery實現Ajax
首先引用jQuery的架包
建立一個js
$.ajax({
url:伺服器地址
請求方式：get，post
data：請求資料
success：function（result,testStatus）//result儲存返回值，testStatus儲存請求狀態
{
}
error：function（xhr,errorMessage,e）
{
}
})
上述是jqueryajax的三種模板都能使用。
下面使用jquery版ajax
servlet就是上面的servlet
code:
<%@ 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">
<script type="text/javascript" src = "js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $("#mobile").val();
/* $.ajax({
url:"mobileServlet",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在，註冊失敗！");
}
else{
alert("註冊成功！");
}
},
error:function(xhr,errorMessage,e){
alert("系統異常！");
}
})*/
$.post(
"mobileServlet",
"mobile="+$mobile,
function(result){
if(result == "true"){
alert("已存在！註冊失敗！");
}else{
alert("註冊成功！");
}
},
"text"
);
}
</script>
<title>Insert title here</title>
</head>
<body>
手機號碼：<input id = "mobile" />
<br/>
<input type = "button" value = "註冊" onclick = "register()">
</body>
</html>