XMLHttpRequest
XMLHttpRequest可以以異步方式的請(qǐng)求數(shù)據(jù)處理程序, 可實(shí)現(xiàn)對(duì)網(wǎng)頁的部分更新潭陪， 而不是刷新整個(gè)頁面垒迂。這個(gè)請(qǐng)求是異步的畔派，即在往服務(wù)器發(fā)送請(qǐng)求時(shí)基跑，并不會(huì)阻礙程序的運(yùn)行蒲障，瀏覽器會(huì)繼續(xù)渲染后續(xù)的結(jié)構(gòu)闷沥。
響應(yīng) readyState（onreadystatechange）
readyState有五種可能的值：
xhr.readyState = 0時(shí)萎战，UNSENT open尚未調(diào)用
xhr.readyState = 1時(shí)，OPENED open已調(diào)用
xhr.readyState = 2時(shí)舆逃，HEADERS_RECEIVED 接收到頭信息
xhr.readyState = 3時(shí)蚂维，LOADING 接收到響應(yīng)主體
xhr.readyState = 4時(shí)戳粒，DONE 響應(yīng)完成
注意點(diǎn) :
get請(qǐng)求,設(shè)置請(qǐng)求行時(shí),需要把參數(shù)列表拼接到url后面
get請(qǐng)求不用設(shè)置請(qǐng)求頭, 不用說明請(qǐng)求主體的編碼方式
get請(qǐng)求的請(qǐng)求體為null
登陸小案例（后臺(tái)PHP）
用戶名：<input type="text" id="userInp">
密碼：<input type="password" id="pswInp">
<button id="btn">登陸</button>
<script>
var user = document.getElementById("userInp");
var pwd = document.getElementById("pswInp");
var btn = document.getElementById("btn");
btn.onclick = function(){
//獲取用戶名和密碼
var username = user.value;
var password = pwd.value;
//XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
//基于http協(xié)議：請(qǐng)求行，請(qǐng)求頭涂籽，請(qǐng)求主體
xhr.open("post","06-login.php");
// post 請(qǐng)求需要在請(qǐng)求頭中, 設(shè)置請(qǐng)求體的編碼方式
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 發(fā)送請(qǐng)求體, post 請(qǐng)求參數(shù)在請(qǐng)求體中
xhr.send("username=" + username + "&password=" + password);
//處理響應(yīng)苹祟，監(jiān)聽readyState
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var result = xhr.responseText;
if(result === "yes"){
//登陸成功,跳轉(zhuǎn)
location.href = "06-index.html";
}else{
alert ("用戶名或者密碼錯(cuò)誤");
}
}
}
}
</script>
PHP后臺(tái)
注意：運(yùn)行PHP文件可以使用phpStudy
<?php
header('content-type:text/html;charset=utf-8');
$username = $_POST['username'];
$password = $_POST['password'];
if($username === 'lose' && $password === '123'){
//登陸成功
echo "yes";
}else{
echo "no";
}
?>
jQuery中的ajax
$.ajax()方法詳解
url
要求為String類型的參數(shù)，（默認(rèn)為當(dāng)前頁地址）發(fā)送請(qǐng)求的地址评雌。
type
要求為String類型的參數(shù)树枫，請(qǐng)求方式（post或get）默認(rèn)為get。注意其他http請(qǐng)求方法景东，例如put和delete也可以使用砂轻，但僅部分瀏覽器支持。
data
類型：String
發(fā)送到服務(wù)器的數(shù)據(jù)斤吐。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式搔涝。GET 請(qǐng)求中將附加在 URL 后。查看 processData 選項(xiàng)說明以禁止此自動(dòng)轉(zhuǎn)換和措。必須為 Key/Value 格式庄呈。如果為數(shù)組，jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱派阱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'诬留。
dataType
類型：String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定颁褂，jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息來智能判斷故响，比如 XML MIME 類型就被識(shí)別為 XML傀广。在 1.4 中颁独，JSON 就會(huì)生成一個(gè) JavaScript 對(duì)象，而 script 則會(huì)執(zhí)行這個(gè)腳本伪冰。隨后服務(wù)器端返回的數(shù)據(jù)會(huì)根據(jù)這個(gè)值解析后誓酒，傳遞給回調(diào)函數(shù)≈簦可用值:
"xml": 返回 XML 文檔靠柑，可用 jQuery 處理。
"html": 返回純文本 HTML 信息吓懈；包含的 script 標(biāo)簽會(huì)在插入 dom 時(shí)執(zhí)行歼冰。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果耻警。除非設(shè)置了 "cache" 參數(shù)隔嫡。注意：在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下)甸怕，所有 POST 請(qǐng)求都將轉(zhuǎn)為 GET 請(qǐng)求。（因?yàn)閷⑹褂?DOM 的 script標(biāo)簽來加載）
"json": 返回 JSON 數(shù)據(jù) 腮恩。
"jsonp": JSONP 格式梢杭。使用 JSONP 形式調(diào)用函數(shù)時(shí)，如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名秸滴，以執(zhí)行回調(diào)函數(shù)武契。
"text": 返回純文本字符串
success
類型：Function
請(qǐng)求成功后的回調(diào)函數(shù)。
參數(shù)：由服務(wù)器返回荡含，并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù)咒唆；描述狀態(tài)的字符串。
更多參數(shù)請(qǐng)參考：https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
上面的登陸案例可以簡(jiǎn)化為
用戶名：<input type="text" id="userInp">
密碼：<input type="password" id="pswInp">
<button id="btn">登陸</button>
<script src="./jquery-1.12.4.js"></script>
<script>
$('#btn').click(function(){
var username = $('#userInp').val();
var password = $('#pswInp').val();
$.ajax({
// 請(qǐng)求地址
url: '06-login.php',
// 請(qǐng)求方式
type: 'POST',
// 數(shù)據(jù)
data: {
username: username,
password: password
},
// 數(shù)據(jù)類型
dataType: 'text',
// 請(qǐng)求成功
success: function(info) {
console.log(info)
if(info === 'yes') {
location.href = "06-index.html";
}
},
// 請(qǐng)求失敗
error: function(e) {
console.log(e)
}
})
})
</script>
