這個筆記是我學習js犀牛書和一個師姐的慕課網學習筆記和js高級編程三個東西的總結
1，基本概念
超文本傳輸協議（HyperText Transfer Protocol,HTTP)規定web瀏覽器如何從web服務器獲取文檔和向服務器提交表單內容，以及web瀏覽器如何從Web服務器獲取文檔和向Web服務器提交表單內容，以及Web如何響應這些請求和提交。
雖然HTTP不在腳本控制下，只是當用戶單擊鏈接，提交表單和輸入url的時候才發生，但js代碼操縱HTTP是可行，但發生以上請求的時候，會初始化HTTP請求。在這兩種情況下，瀏覽器都會重新加載頁面，顯然這樣體驗效果不好
AJAX（Asynchronous Javascript and XML）應運而生。這是一種使用腳本操縱HTTP的Web應用架構，而且不會導致頁面重載。
而又有一種東西Comet出來了。它和Ajax一樣也只是使用腳本操縱HTTP的Web應用架構.但他和Ajax相反。對于Ajax，是客戶端從服務端拉數據。在Comet中，是服務端向客戶端“推”數據
<template>標簽也要登場。此時因為<im g>元素無法實現完整的Ajax傳輸協議.，通過設置src屬性的url然后發起請求。此時，JSON也登場了
實現Ajax技術更簡單的實現方式，是XMLHttpRequest對象。這是一種用腳本操縱Http的api。這個API包含了get請求和post請求的能力，同時能用文本或者document對象的形式返回服務器響應。而且不局限XML格式。
2，使用XMLHttpRequest
2.1 新建對象
第一步是要先
var request = new XMLHttpRequest();
//注意，ie6下有不一樣的地方
2.2 指定請求
request.open("get","data.json")
GET請求：用于常規請求，適用于當url完全指定請求資源，且請求對服務器沒有任何副作用（下面講述什么叫副作用）以及當服務器的響應是可緩存的
POST請求：常用于HTML表單。在請求主題中包含表單數據且這些數據場存儲到服務器的后臺數據中（ 副作用）
2.3（可選）請求頭
request.setRequestHeader("content-Type","text/plain");
- 如果請求頭多次，新值不會取代之前的值，相反，HTTP請求還將包含這個頭的多個副本或這個頭指定的多個值
2.4 向服務器發送
request.send(null);
- get請求沒有主體，傳遞null或省略。post常擁有主體，同時應該匹配使用setREquestHeader（）指定的"content-type"的頭
3，取得響應
- 異步使用后，send之后要得到返回相應，后面才能繼續走。所以必須監聽XMLHttpRequest對象上的readystatechange事件。監控這個事件，又必須使用readystate屬性
| 值 | 含義 |
|---|---|
| 0 | open()尚未調用 |
| 1 | open（）已調用 |
| 2 | 接收到頭信息 |
| 3 | 接收到相應主體 |
| 4 | 相應完成 |
- 每次readystate的值改變，會觸發一次readystatechange事件
*當知道send完成了，就要檢測傳回來的東西的狀態，這時候就要一個status和statusText屬性以數字和文本的形式返回狀態碼
附上一個完整的代碼演示
function ajax(url, fnSucc, fnFaild)
{
//1.創建Ajax對象
var oAjax=null;
if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接服務器
oAjax.open('GET', url, true);
//3.發送請求
oAjax.send();
//4.接收服務器的返回
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
fnFaild(oAjax.status);
}
}
};
}
3.1 同步相應
把false作為第三個參數傳遞給open（），那么send（）方法將會阻塞到完成請求。所以同步相應下就不需要使用事件處理程序。僅僅需要檢查status和responseText屬性會可以了
3.2與后臺交互數據實例
客戶端代碼之search
document.getElementById("search").onclick=function(){
var request=new XMLHttpRequest();
request.open("GET","server.php? number="+document.getElementById("keyword").value); request.send();
request.onreadystatechange=function () {
if(request.readyState==4){
if(request.status===200){
var data=JSON.parse(request.responseText);//解析服務器返回的信息;
if(data.success){
document.getElementById("searchResult").innerHTML=data.msg; }
else { document.getElementById("searchResult").innerHTML="出現錯誤:"+data.msg; } }
else{ alert("發生錯誤"+request.status); }
}
}
}
- 使用JSON.parse():
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
結果:彈出 “洪七”; - Tip:在代碼中使用eval是很危險的!特別是用它執行第三方的json數據(其中可能包含惡意代碼)時,盡可能使用JSON.parse()方法解析字符串本身方法還可以捕捉json中的語法錯誤.Eg:
客戶端代碼之保存
document.getElementById("save").onclick=function(){
console.log('haha');
var add_staff=new XMLHttpRequest();
add_staff.open("POST","server.php");
var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); add_staff.send(data);
add_staff.onreadystatechange=function () {
if(add_staff.readyState==4){
if(add_staff.status===200){
var data=JSON.parse(add_staff.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}
else {
document.getElementById("createResult").innerHTML = "出現錯誤" + data.msg;
}
}
else{ alert("發生錯誤"+add_staff.status); }
}
} }
3.3，表單數據的請求頭
默認情況下，html表單通過post方法發送給服務器，而編碼后的表單數據用做請求主體。
- 編碼像這樣：
find-pizza&zipcode=032223&radius=1km
響應的頭要這樣：
Content-Type設置為application/x-www-form-urlencoded
這樣就能正確解碼 - json
如果是json，響應頭要改成application/json
