2.1js原生的Ajax：
js原生的Ajax開發(fā)步驟：
創(chuàng)建Ajax引擎對象
為Ajax引擎對象綁定監(jiān)聽（監(jiān)聽服務(wù)器已將數(shù)據(jù)響應(yīng)給引擎）
綁定提交地址
發(fā)送請求
監(jiān)聽里面處理響應(yīng)數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//同步請求點擊事件
function sendRequest() {
//js刷地址欄請求服務(wù)器端
location.href = "Ajax1Servlet?name=admin&password=123abc";
}
//異步請求點擊事件
function sendAsynRequest() {
//1.創(chuàng)建ajax引擎對象
var xmlHttp = new XMLHttpRequest();
//2.設(shè)置回調(diào)函數(shù)，目的是處理服務(wù)器完全返回的數(shù)據(jù)
xmlHttp.onreadystatechange = function () {
/**
* 這個回調(diào)函數(shù)什么調(diào)用呢？是ajax引擎對象與服務(wù)器通信狀態(tài)碼改變的時候調(diào)用
* ajax引擎對象與服務(wù)器通信狀態(tài)碼xmlHttp.readystate，范圍0~4
* 0：請求未初始化
* 1：服務(wù)器連接已建立
* 2：請求已接收
* 3：請求處理中
* 4：請求已完成，且響應(yīng)已就緒
* 這個回調(diào)函數(shù)一共被調(diào)用4次，但只有狀態(tài)碼4的時候才代表服務(wù)器響應(yīng)完成數(shù)據(jù)完成。
* ajax引擎通信轉(zhuǎn)態(tài)碼為4和http通信轉(zhuǎn)態(tài)碼為200
*/
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//獲取響應(yīng)數(shù)據(jù)
var content = xmlHttp.responseText;
alert(content);
}
}
//3.設(shè)置請求路徑和請求參數(shù)
/**
* xmlHttp.open(method,url)
* method,請求方法，get或post請求
* url：請求路徑
*/
xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");
//4.發(fā)送請求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="發(fā)送同步請求" onclick="sendRequest();"/>
<input type="button" value="發(fā)送異步請求" onclick="sendAsynRequest();"/>
</body>
</html>
package com.sunny.web;
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;
@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")
public class Ajax1Servlet 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 {
//獲取請求參數(shù)
String name = request.getParameter("name");
String password = request.getParameter("password");
//打印出來
System.out.println("name=" name);
System.out.println("password=" password);
//輸出數(shù)據(jù)前端
response.getWriter().write("hello js ajax");
}
}
2.2 Ajax引擎連接狀態(tài)readyState值0~4變化過程：
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。0: 請求未初始化1: 服務(wù)器連接已建立2: 請求已接收3: 請求處理中4: 請求已完成，且響應(yīng)已就緒
這里狀態(tài)值4只能說明接收到了服務(wù)器的響應(yīng)服務(wù)器處理ajax請求結(jié)束，但是不能代表正確的獲取了服務(wù)器的響應(yīng)，需要配合http狀態(tài)碼200兩個條件就可以說明正確的獲取了服務(wù)器響應(yīng)。只有這兩個條件滿足，xmlhttp.responseText才可以獲取到正確的響應(yīng)數(shù)據(jù)。
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
alert("響應(yīng)數(shù)據(jù)" xmlhttp.responseText);
}
}
};
感謝大家的閱讀，希望大家收益多多。
本文轉(zhuǎn)自：https://blog.csdn.net/Huangyuhua068/article/details/82889614
推薦教程：《JS教程》
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
