客戶端JavaScript Ajax

建立: 2017/10/21

完成: 2017/10/23

 

【TODO】

對Ajax收發各種型數據製做模板

補充跨域通訊(cross origin) p457

HTTP通訊
HTTP	超文本傳輸協議（HTTP，HyperText Transfer Protocol)
HTTP通訊	客戶端發送: 請求信息  服務器端發送: 響應信息
請求信息	請求行: GET http://www.sample.sample HTTP/1.1  head: Host: sample.sample這樣【域名:內容】  信息主體: 請求信息  請求行  GET http://www.sample.sample HTTP/1.1  GET  方法  GET，POST  http://www.sample.sample  URL  HTTP/1.1  HTTP的版本
響應信息	head和響應主體和上面同樣  響應行: HTTP/1.1 200 OK  響應行  HTTP/1.1 200 OK  HTTP/1.1  HTTP版本  200  狀態碼   OK  附加信息       成功  200  OK   客戶端錯誤  401  沒有認證  403  接入被禁止   404  找不到請求的資源   408  請求超時   服務器端  500  服務器內部錯誤   503  服務暫時不可用
Ajax
優勢	.處理高速，通訊量少  .異步處理  .不跳轉頁面，渲染快
	AJAX即「Asynchronous JavaScript  + XML
XMLHttpRequest
	Ajax經過XMLHttpRequest Obejct來進行數據通訊
處理流程	生成XMLHttpRequest Obeject    登錄請求的方法(method)     發送請求，開始通訊
生成XMLHttpRequest  對象	var req = new XMLHttpRequest();   XMLHttpRequest自帶對象  readyState  只可讀  HTTP通訊的狀態   0  爲初始化: 沒有呼出open   1  讀取中: 呼出了open, 還沒呼出send   2  讀取完成: 呼出send, 還沒收到響應   3  接收響應中:  以獲取response和head                    還沒接收信息主體  4  接收完成: 已獲取全部響應信息  response  只可讀  獲取響應內容  responseText  只可讀  以文本形式獲取響應內容   responseType  可讀寫  獲取/設定響應的類型     DOMString  "string"  默認值  JSON Object  "json"   ArrayBuffer  "arraybuffer"  帶類型的數組   Blob  "blob"   Document  "document"  HTML的Document 對象                       responseXML  只可讀  以XML對象形式獲取響應內容   status  只可讀  獲取對於請求的HTTP狀態碼  成功  200  OK   客戶端錯誤  401  沒有認證  403  接入被禁止   404  找不到請求的資源   408  請求超時   服務器端  500  服務器內部錯誤   503  服務暫時不可用                     statusText  只可讀  獲取對於HTTP狀態碼的補充信息   timeout  可讀寫  獲取/設定請求的上線時間(到時間自動終止請求)  單位: 毫秒ms   withCredentials  可讀寫  對於cross origin 通訊是否使用認證  true/false  onreadystatechange  可讀寫  readState的值改變時回調的事件句柄   ontimeout  可讀寫  請求超時時候回調的事件句柄         XMLHttpRequest自帶方法  abort()  終止如今進行的異步通訊(非同期通訊)  open(...)  初始化HTTP請求  send(data)  發送HTTP請求   setRequestHeader(header, value)  增長header  getAllResponseHeader()  send(...)成功纔有效  獲取收到的全部響應的response   getResponseHeader(header)  send(...)成功纔有效  獲取指定響應header                    XMLHttpRequest事件句柄  readystatechange  狀態變化時  abort  處理被取消時   error  請求失敗時   loadend  無論處理有沒有異常，處理完成時   load  請求成功，接收到響應時   loadstart  發送請求後   progress  發送/接收數據時   timeout  超時自動終止時
定義和服務器通訊的處理	兩種      req.onreadystatechange = function () {...};    req.addEventListener("readystatechange", function() {...});
初始化請求	req.open(method, url [,async [,user [,password]]]);  method  HTTP方法  "GET" "POST"  url  請求的url  async  能夠省略, 默認true  是否異步通訊   user  認證時候的用戶名  能夠省略(須要的時候指定)   password  認證時候的密碼  可省略
發送請求	發送GET  send不帶參數  req.send(null);  若是要發送請求參數  url的末尾添加請求字符串    末尾加上"?"    變量形式 名稱=值    多個變量 "&"鏈接    用encodeURIComponent方法轉換字符    req.open("GET", "example.com?a=1&b=2");      發送POST  可發送內容    url請求字符串  須要設定 req.setRequestHeader("content-type", "application/x-www-form-urlencoded")  表單數據  FormData   字符串  DOMString   二進制數據   ArrayBufferView BlobObject File Object   Blob  Document
讀取響應信息
準備	發送send前設定  req.requestType = "json"; # TODO 對Ajax收發各種型數據製做模板
發送請求，等待響應成功
讀取JSON  使用responseText	req.addEventListener("load", function() {     jsonObj = JSON.parse(req.responseText);  });  req.send(null); 這種不用設定requestType
讀取JSON  使用response	req.addEventListener("load", function() {     jsonObj = req.response;  });  req.responseType="json";  req.send(null); 這種要設定requestType="json";
cross origin 通訊
	# TODO 補充跨域通訊(cross origin) p457