## :-: 原生 Ajax請求 ``` // Ajax function Ajax(url, type, data, callback) { var xhr = null; // 兼容IE瀏覽器、 if (window.XMLHttpRequest) { // 主流瀏覽器方法、Google Opera xhr = new XMLHttpRequest(); } else { // IE方法 xhr = new ActiveXObject('Microsoft.XMLHttp') } // 給xhr綁定狀態事件、onreadystatechange xhr.onreadystatechange = function() { // 請求過程中的進度 1 2 3 4 (4為完成) console.log(xhr.readyState); if (xhr.readyState == 4) { // 返回的狀態嗎 200 302 404 503 if (xhr.status == 200) { console.log(xhr.responseText); typeof callback === 'function' && callback(xhr.responseText); } } } // 判斷請求類型 if (type == 'POST') { // 當post類型時需要在 .send 中傳遞數據、 xhr.send(data); // 設置請求協議頭、(默認類型) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 1.請求類型 2.url true 是否異步加載、 xhr.open(type, url, true); } else { // 1.請求類型 2.url true 是否異步加載、 xhr.open(type, url + '?' + data, true); } } // 回調函數、 function callback(data) { console.log(data); } ``` ## :-: 筆記 ``` 1. ajax XMLHTTPRequest 2. 網絡的基礎知識 （1） 同源策略 （協議 ， 域名 ， 端口號三者均相同 ---》 同源） 瀏覽器提出的 瀏覽器再判斷同源的時候是在數據返回的時候判斷的 Access-Control-Allow-Origin: * ===> CORS跨域 （2） 請求方式 GET POST HEAD PUT DELETE （3） 狀態碼 2xx ===> 服務器成功返回數據 3xx 重定向 4xx 客戶端錯誤 400 查看請求參數 大小寫 數據格式等 5xx 服務器錯誤 找服務器端工作人員 （4） HTTP 和 HTTPS 區別 ---》 安全性 RSA （5） 跨域 客戶端與服務器端的跨域 1. JSONP 原理 ： src屬性不受同源策略的限制 適合所有瀏覽器的 大多使用get請求方式 jquery提出 搜索功能經常用到jsonp 2. document.domain 基礎域名相同 3. 服務器代理中轉 ===》 最常見的方式 公司里面最常用 4. CORS 跨域 服務器端設置響應頭 w3c新標準里面出現的 IE10之前不兼容 ------------------ 6. iframe ---》 頁面與頁面之間的 父頁面請求子頁面的方式： window.name 需要中間層 子頁面請求父頁面的方式： location.hash postMessage ====> h5新增的 第一個參數 是傳遞的數據 第二個參數是往哪個頁面傳遞數據 哪個頁面的域 ``` > ## :-: [HTTP 狀態消息 - 狀態碼](http://www.w3school.com.cn/tags/html_ref_httpmessages.asp)