Ajax ：Asynchronous Javascript And XML（異步js 和 xml）
一、目錄
1.servlet類
2.jsp文件：js、jQuery 方式（包含JSON格式的傳輸）
3.圖解
二、servlet類
package org.lanqiao.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "demoServlet")
public class demoServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//設置編碼格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("utf-8");//防止亂碼
//獲取頁面請求的參數
String mobile = request.getParameter("mobile") ;
//servlet以輸出流的方式 將信息 返回給客戶端
PrintWriter out = response.getWriter();
if("315".equals(mobile)) {
out.write("true");
}else {
out.write("false");
}
out.close();
}
}
三、js方式實現
1.實現原理
通過 XMLHttpRequest對象 來實現
（1）XMLHttpRequest對象的方法：
open(方法名(提交方式get|post),服務器地址url,true) //與服務端建立連接
end(): //向服務器發送數據，分爲get和post請求
get: send(null)
post:send(參數值)
setRequestHeader(header,value):
get:不需要設置此方法
post:需要設置：
a.如果請求元素中包含了 文件上傳:
setRequestHeader("Content-Type","multipart/form-data");
b.不包含了 文件上傳
setRequestHeader("Content-Type","application/x-www-form-urlencoded")
(2)XMLHttpRequest對象的屬性：
readyState:請求狀態 只有狀態爲4 代表請求完畢
status: 響應狀態 只有200 代表響應正常
onreadystatechange:回調函數
接收返回值：
responseText：響應格式爲String
responseXML：相應格式爲XML
2.body部分代碼：
<body>
手機：<input id="mobile">
<input type="button" value="註冊" onclick="register()">
<span id="tip"></span>
</body>
3.head部分代碼
<head>
<title>$Title$</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
//引入jquery包
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
//html內嵌js
<script type="text/javascript">
//post和get方式二選一就可
//post請求方式
function register() {
//獲取頁面元素
var mobile = document.getElementById("mobile").value;
//通過ajax異步方式 請求服務端，創建XMLHttpRequest對象
xmlHttpRequest = new XMLHttpRequest();
//設置xmlHttpRequest對象的回調函數
xmlHttpRequest.onreadystatechange = callBack;
xmlHttpRequest.open("post", "demoServlet", true);
//設置post方式的 頭信息
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttpRequest.send("mobile=" + mobile);//k=v
}
//get請求方式
//沒有setRequestHeader，send爲null
function registerGet() {
var mobile = document.getElementById("mobile").value;
//通過ajax異步方式 請求服務端
xmlHttpRequest = new XMLHttpRequest();
//設置xmlHttpRequest對象的回調函數
xmlHttpRequest.onreadystatechange = callBack;
xmlHttpRequest.open("get", "demoServlet?mobile=" + mobile, true);
//設置post方式的 頭信息 ,get不需要
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(null);//k=v
}
//定義回調函數 (接收服務端的返回值)
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>
四、jQuery 方式實現（四種）
１. //key-value形式
$.ajax({
url,
請求方式,
data,
回調函數
})
//jquery方式一
function register() {
var $mobile = $("#mobile").val;
$.ajax({
url: demoServlet,
請求方式: "post",
data: "mobile=" + $mobile,//請求數據，此次爲k=v形式的
// 成功函數，回調函數
//out返回值存在result，服務器返回狀態
success: function x(result, testStatus) {
if (result == "true") {
alert("已存在，註冊失敗！");
} else {
alert("註冊成功");
}
},
//
error: function x(xhr, errorMessage, e) {
alert("系統異常");
}
})
}
2.只有value，嚴格順序
//jquery方式二,沒有key，只有value，所以嚴格要求順序
$.get(
服務器地址,
請求數據,
function (result) {
預期返回值類型(string\xml\json\text
)
}
);
$.post(
demoServlet,
"mobile=" + $mobile,
function (result) {
if (result == "true") {
alert("已存在，註冊失敗！");
} else {
alert("註冊成功");
}
}
"text" // 預期返回值類型，可以不寫
);
3.簡化方式，添加選擇器，以span爲例
省略function,修改servlet類中的out輸出值，直接輸出註冊是否成功，不在通過true傳遞
預期返回值不寫了
$("#tip").load(
demoServlet,
"mobile=" + $mobile
);
servlet類進行修改：
PrintWriter out = response.getWriter();
if("315".equals(mobile)) {
out.write("已存在！請重新輸入");
}else {
out.write("註冊成功");
}
- json方式
//json數組
//javascrtpt數組爲[]
var student = [{"name":"zs","age":20},
{"name":"ls","age":20}
];
$.getJSON(
demoServlet,//服務器地址
{"mobile=" : $mobile,"a":$a},//JSON格式請求數據
function (result) {
if (result.msg == "true") {
alert("已存在，註冊失敗！");
} else {
alert("註冊成功");
}
);
servlet類進行修改：
//以JSON格式接收（result），所以就算返回值爲true,也爲JSON格式，永遠顯示註冊成功
//則需要修改servlet類，服務端以JSON格式返回數據，即
PrintWriter out = response.getWriter();
if("135".equals(mobile)) {
//write返回一個值，所以最外層爲雙引號，以鍵值對的形式返回，給引號加上轉移符號\
JSON形式的大括號別忘記
out.write( "{\"msg\":\"true\"}" );// {"\"msg\":\"true\""}
}else {
out.write( "{\"msg\":\"false\"}" );// "\"msg\":\"false\""
}
out.close();
//但是上面的方法，字符串拼接很麻煩，
4.2 json方式–進階版（服務器返回JSON對象，而不是JSON形式數據）
（1）先導包
（2）