1.get請求
var name = document.getElementById('username').value;
//轉(zhuǎn)碼
name = encodeURIComponent(name);
//創(chuàng)建ajax對象
var XHR = new XMLHttpRequest();
XHR.open('get','text.php?name=' + name);
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
//do something
}
};
XHR.send();
state和status的區(qū)別
來個形象的比方沸伏，你體重多少公斤，屬于status，但說你體重屬于偏瘦、正常還是偏胖颠锉，那就是state.
2.POST 請求
1秕豫、必須通過send()發(fā)送 數(shù)據(jù)
2馏颂、必須設(shè)置setRequestHeader('Content-Type','application/x-www-form-urlencoded');將傳遞的值的參數(shù)轉(zhuǎn)成XML格式
3纳猪、post提交可以直接提交中文
4、post請求中的字符也會和URL中的&右莱、=字符相混淆蚜锨，所以建議也要使用encodeURIComponent()編碼
var name = document.getElementById('username').value;
//轉(zhuǎn)碼
name = encodeURIComponent(name);
//創(chuàng)建ajax對象
var XHR = new XMLHttpRequest();
XHR.open('post','text.php?');
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
//do something
}
};
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XHR.send('name='+name);
readyState
0 初始狀態(tài) xhr對象剛創(chuàng)建完
1 連接 連接到服務(wù)器
2 發(fā)送請求 剛剛send完
3 接收完成 響應(yīng)頭接收完成
4 接收完成 響應(yīng)體接收完成
3.POST和GET的區(qū)別
（1）最直觀的區(qū)別就是GET把參數(shù)包含在URL中，POST通過request body傳遞參數(shù)慢蜓。
（2）GET在瀏覽器回退時是無害的亚再，而POST會再次提交請求。
（3）GET請求會被瀏覽器主動cache晨抡，而POST不會氛悬，除非手動設(shè)置。耘柱。
（4）字?jǐn)?shù)限制：當(dāng)發(fā)送數(shù)據(jù)時如捅，GET 方法向 URL 添加數(shù)據(jù)；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）调煎。POST的傳輸字?jǐn)?shù)無限制镜遣。
（5）對參數(shù)的數(shù)據(jù)類型，GET只接受ASCII字符士袄，而POST沒有限制悲关。
（6）GET適用于數(shù)據(jù)的查詢和獲取，POST適用于數(shù)據(jù)的增加刪除和修改娄柳。
99%的人都理解錯了HTTP中GET與POST的區(qū)別
4.AJAX緩存
瀏覽器第一次訪問服務(wù)器的時候寓辱，需要從服務(wù)器加載很多的靜態(tài)資源（CSS、JS赤拒、Image）秫筏，并將這些資源文件緩存在瀏覽器中诱鞠，當(dāng)再次訪問頁面的時候，如果有相同的資源文件就直接到緩存中去加載跳昼，這樣就會降低服務(wù)器的負(fù)載和帶寬般甲，加快用戶訪問肋乍。
但是這樣也會出現(xiàn)bug鹅颊，比如獲取驗證碼，比如獲取服務(wù)器動態(tài)數(shù)據(jù)墓造，這個時候就要避免使用瀏覽器中的緩存
- 方法一：在URL地址中添加隨機(jī)數(shù)堪伍，這樣使得URL是唯一的。
- 方法二：設(shè)置header頭觅闽，禁止瀏覽器緩存該文件
header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");
5.PHP生成JSON數(shù)據(jù)
1帝雇、json_encode()：將PHP數(shù)據(jù)轉(zhuǎn)成json格式
2、json_decode()：將JSON格式轉(zhuǎn)成PHP數(shù)據(jù)格式
5.1將索引數(shù)組轉(zhuǎn)成JSON格式蛉拙、并逆轉(zhuǎn)換
索引數(shù)組轉(zhuǎn)成JSON格式還是數(shù)組的格式尸闸，逆轉(zhuǎn)換用數(shù)組的位置做下標(biāo)
5.2將關(guān)聯(lián)數(shù)組轉(zhuǎn)成JSON格式并逆轉(zhuǎn)換
關(guān)聯(lián)數(shù)組轉(zhuǎn)成JSON格式還是字面量對象的格式，逆轉(zhuǎn)換用數(shù)組的鍵做下標(biāo)
5.3既有關(guān)聯(lián)數(shù)組孕锄，也有索引數(shù)組
只要有一個元素是關(guān)聯(lián)數(shù)組的形式吮廉，就轉(zhuǎn)換成鍵值對的形式（字面量對象），沒有鍵的元素用元素的位置做鍵畸肆。
5.4二維數(shù)組轉(zhuǎn)換成JSON格式
5.5轉(zhuǎn)換對象
6.FormData
FormData是表單數(shù)據(jù)對象宦芦，可以實現(xiàn)快速收集表單信息，HTML5以后才支持轴脐。
使用FormData對象post傳遞數(shù)據(jù)不需要設(shè)置setRequestHeader()
PHP頁面
<?php
var_dump($_POST);
HTML頁面
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn').onclick=function(){
var frm=document.getElementById('frm');
var fd=new FormData(frm); //收集frm表單的數(shù)據(jù),文本數(shù)據(jù)和二進(jìn)制數(shù)據(jù)
var req=new XMLHttpRequest();
req.open('post','./5-demo.php');
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
console.log(req.responseText);
}
}
req.send(fd); //發(fā)送FormData對象
}
}
</script>
<form action="" id="frm">
用戶名：<input type="text" name="username" id=""><br>
密碼：<input type="password" name="pwd" id=""> <br>
<input type="button" value="用戶登錄" id='btn'>
</form>
