向伺服器發送請求
工作原理：
AJAX與背景的互動可以分為以下幾步：
1、使用者從前端發送請求，
JavaScript中調用XMLHttpRequest對象。
2、HTTP請求由XMLHttpRequest對象發送到伺服器。
3、伺服器使用JAVA，PHP，ASP.net等與資料庫互動。檢索資料。
4、伺服器将XML資料或JSON資料發送到XMLHttpRequest回調函數。HTML和CSS資料顯示在浏覽器上。
AJAX向伺服器發送請求主要使用XMLHttpRequest 對象的 open() 和 send() 方法：
| 方法 | 描述 |
| open(method,url,async) | 規定請求的類型、URL 以及是否異步處理請求。 method：請求的類型；GET 或 POST url：檔案在伺服器上的位置 async：true（異步）或 false（同步） |
| send(string) | 将請求發送到伺服器。 string：僅用于 POST 請求 |
Get與Post
GET請求特點：
.GET請求可被緩存
.GET請求保留在浏覽器曆史記錄中
.GET請求可被收藏為書簽
.GET請求不應在處理敏感資料時使用
.GET請求有長度限制
.GET請求隻應當用于取回資料
Post請求特點
.POST請求不會被緩存
.POST請求不會保留在浏覽器曆史記錄中
.POST請求不能被收藏為書簽
.POST請求對資料長度沒有要求
如果需要像 HTML 表單那樣 POST 資料，應當使用setRequestHeader()來添加 HTTP 頭。然後在send()方法中規定希望發送的資料：
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford"); 對比
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
.無法使用緩存檔案（更新伺服器上的檔案或資料庫）
.向伺服器發送大量資料（POST 沒有資料量限制）
.發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
url
open() 方法的 url 參數是伺服器上檔案的位址
異步
Async=true，異步。
Async=false,不異步。
異步是一個巨大的進步，一般情況下都會選擇異步。
響應
AJAX - 伺服器響應
如需獲得來自伺服器的響應，需要使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | |
| responseText | 獲得字元串形式的響應資料。 |
| responseXML | 獲得 XML 形式的響應資料。 |
responseText屬性：
如果來自伺服器的響應并非 XML，使用 responseText 屬性：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; responseXML屬性：
如果來自伺服器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt; jsp後端執行個體
做一個簡單的執行個體，後端就用jsp。
check.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猜姓名</title>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<span>猜猜我的名字 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> <!-- 設定keyup事件為後端請求函數 -->
<span id="checkResult"></span>
</div>
<script type="text/javascript">
//建立XMLHttpRequest對象
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏覽器執行代碼
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏覽器執行代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function check(){ //向後端請求函數
var name = document.getElementById("name").value;
var url = "http://localhost:8080/AjaxDemo/checkResult.jsp?name="+name; //通過GET方法發送資訊，得向 URL 添加資訊
xmlhttp.onreadystatechange=checkResult; //響應函數
xmlhttp.open("GET",url,true); //設定通路的頁面
xmlhttp.send(null); //執行通路
//null表示沒有參數，因為參數已經通過“GET" 方式，放在url裡了。
//隻有在用"POST"，并且需要發送參數的時候，才會使用到send。
}
function checkResult(){ //處理響應函數
if (xmlhttp.readyState==4 && xmlhttp.status==200) //請求已完成，響應已就緒且狀态"OK"
document.getElementById('checkResult').innerHTML=xmlhttp.responseText; //獲得字元串形式的響應資料,給span塊指派
}
</script>
</body>
</html> checkResult.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>檢查結果</title>
</head>
<body>
<%
String name = request.getParameter("name");
if("Sandy".equalsIgnoreCase(name))
out.print("<font color='green'>恭喜你猜對了</font>");
else
out.print("<font color='red'>加油，就快對了</font>");
%>
</html> 在tomcat上跑一下,
參考：
1、
https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-send.html2、
https://www.w3cschool.cn/ajax/ajax-xmlhttprequest-response.html3、
https://www.runoob.com/ajax/ajax-xmlhttprequest-send.html4、
http://how2j.cn/k/ajax/ajax-stepbystep/466.html#nowhere5、
https://www.runoob.com/ajax/ajax-xmlhttprequest-response.html