ajax
ajax內部怎樣完成的？
運用一個php文件來模仿服務器返回，php代碼以下
<?php
echo $_GET['a']+$_GET['b'];
?>要求的發送實際上我們都經由過程瀏覽器的XMLHttpRequest完成，ie6運用ActiveXObject，不斟酌IE6的兼容，我們完成一個簡樸的xhr要求以下。
<html>
<meta charset="utf-8">
<head></head>
<script>
window.onload=function(){
let oBtn=document.getElementById('btn1');
oBtn.onclick = function(){
let xhr=new XMLHttpRequest(); // 不兼容ie6
// 銜接,true代表異步，false代表同步;瀏覽器對異步的xhr會報錯
xhr.open('get','../server/a.php',true,);
// 發送;send內里是body，post須要發送header
xhr.send();
// 吸收;4代表完畢
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
};
};
};
</script>
<body>
<input type="button" value="提交" id="btn1">
</body>
</html>xhr.readyState狀況值
0：方才建立初始狀況
1：已銜接
2：已發送
3：已接收-頭（32k上限）
4：已接收-body（1G上限）
http狀況碼
1XX 音訊
2XX 勝利
3XX 重定向
301 永久重定向——瀏覽器永久不會再次要求老的地點
302 暫時重定向——瀏覽器下次還會要求老地點
304 （not modified）重定向到緩存要求——因而304也是勝利
4XX 要求毛病，客戶端毛病
5XX 服務端毛病
6XX 擴大毛病碼
因而能夠經由過程2XX和304的狀況碼推斷要求勝利。
// 吸收;4代表完畢
xhr.onreadystatechange = function(){
if (xhr.readyState ==4){
if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
alert('勝利:'+xhr.responseText);
console.log(xhr);
} else {
alert('失利');
}
}
};xhr返回值
xhr.responseText 文本數據
xhr.responseXML XML數據（已不經常使用）
xml數據是不牢固標籤構成的數據，xml數據越發占空間，比方：
<person>
<name>xiaoyezi</name>
<age>18</age>
<job>front engineer</job>
</person>json花樣：
let json={name:'xiaoyezi',age:18,job:'front engineer'};XMLHttpRequest發送POST要求
根據我們上面代碼的思緒，post要求的寫法推導出來應該是以下寫法，實際上以下寫法並不可。
// 銜接,true代表異步，false代表同步;瀏覽器對異步的xhr會報錯
xhr.open('post','../server/a.php',true,);
// 發送;send內里是body，post須要發送
xhr.send('a=12&b=5');對照form的post提交體式格局，我們能夠看到，Request Headers內里有條設置和form提交的差別：
Content-Type: text/plain;charset=UTF-8
form提交：Content-Type: application/x-www-form-urlencoded須要增添setRequestHeader的設置，再send要求的body內容，要求勝利。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('a=12&b=5');content-type範例及寄義？
text/plain 文本
application/x-www-form-urlencoded &&&銜接的體式格局，eg：a=12&b=5
multippart/form-data 定界符支解各個數據（文件上傳）
完成簡樸的自定義ajax
function ajax(options){
// 數據處理
options = options || {};
options.data = options.data || {};
options.type = options.type || 'get';
options.dataType = options.dataType || 'text'; //剖析數據
let arr = [];
for (let name in options.data) {
arr.push(`${name}=${encodeURIComponent(options.data[name])}`);
}
let dataStr = arr.join('&');
// 不兼容ie6
let xhr=new XMLHttpRequest();
// 銜接,true代表異步，false代表同步;瀏覽器對異步的xhr會報錯
if (options.type == 'get'){
xhr.open('get',options.url + '?' + dataStr,true);
xhr.send();
} else {
xhr.open('post',options.url,true,);
// 發送;send內里是body,post須要發送Content-Type
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(dataStr);
}
// 吸收;4代表完畢
xhr.onreadystatechange = function(){
if (xhr.readyState ==4){
if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
let result = xhr.responseText;
switch (options.dataType){
case 'text':
break;
case 'json':
if (window.JSON && JSON.parse){
result = JSON.parse(result);
} else {
result = eval("("+result+")");
}
break;
case 'xml':
result = xhr.XMLHttpRequest;
break;
default:
break;
}
options.success && options.success(result);
} else {
options.error && options.error('error');
}
}
};
}