目錄
一、原生AJAX
1.1AJAX 簡介
1.2XML 簡介
1.3AJAX 的特點
1.3.1AJAX 的優點
1.3.2AJAX 的缺點
1.4AJAX 的使用
1.4.1核心對象
1.4.2使用步驟
1.4.3解決IE 緩存問題
1.4.4AJAX 請求狀態
二、jQuery 中的AJAX
2.1 get 請求
2.2 post 請求
三、跨域
3.1同源策略
3.2如何解決跨域
3.2.1JSONP
3.2.2CORS
一、原生AJAX
1.1AJAX 簡介
AJAX 全稱為Asynchronous JavaScript And XML，就是異步的JS 和XML。
通過AJAX 可以在瀏覽器中向服務器發送異步請求，最大的優勢：無刷新獲取數據。
AJAX 不是新的編程語言，而是一種將現有的標準組合在一起使用的新方式。
1.2XML 簡介
- XML 可擴展標記語言。
- XML 被設計用來傳輸和存儲數據。
- XML 和HTML 類似，不同的是HTML 中都是預定義標簽，而XML 中沒有預定義標簽
比如說我有一個學生數據：
name = "孫悟空" ; age = 18 ; gender = "男" ;
用XML 表示：
<student><name>孫悟空</name><age>18</age><gender>男</gender>
</student>現在已經被JSON 取代了。
{"name":"孫悟空","age":18,"gender":"男"}
1.3AJAX 的特點
1.3.1AJAX 的優點
1) 可以無需刷新頁面而與服務器端進行通信。
2) 允許你根據用戶事件來更新部分頁面內容。?
1.3.2AJAX 的缺點
1) 沒有瀏覽歷史，不能回退
2) 存在跨域問題(同源)
3) SEO 不友好
1.4AJAX 的使用
1.4.1核心對象
XMLHttpRequest，AJAX 的所有操作都是通過該對象進行的。
1.4.2使用步驟
1) 創建XMLHttpRequest 對象var xhr = new XMLHttpRequest();
2) 設置請求信息xhr.open(method, url);//可以設置請求頭，一般不設置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 發送請求xhr.send(body) //get 請求不傳body 參數，只有post 請求使用
4) 接收響應//xhr.responseXML 接收xml 格式的響應數據//xhr.responseText 接收文本格式的響應數據xhr.onreadystatechange = function (){if(xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}
}1.4.3解決IE 緩存問題
問題：在一些瀏覽器中(IE),由于緩存機制的存在，ajax 只會發送的第一次請求，剩
余多次請求不會在發送給瀏覽器而是直接加載緩存中的數據。
解決方式：瀏覽器的緩存是根據url 地址來記錄的，所以我們只需要修改url 地址
即可避免緩存問題
xhr.open("get","/testAJAX?t="+Date.now());1.4.4AJAX 請求狀態
xhr.readyState 可以用來查看請求當前的狀態
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState0: 表示XMLHttpRequest 實例已經生成，但是open()方法還沒有被調用。
1: 表示send()方法還沒有被調用，仍然可以使用setRequestHeader()，設定HTTP請求的頭信息。
2: 表示send()方法已經執行，并且頭信息和狀態碼已經收到。
3: 表示正在接收服務器傳來的body 部分的數據。
4: 表示服務器數據已經完全接收，或者本次接收已經失敗了
二、jQuery 中的AJAX
2.1 get 請求
$.get(url, [data], [callback], [type])
url:請求的URL 地址。
data:請求攜帶的參數。
callback:載入成功時回調函數。
type:設置返回內容格式，xml, html, script, json, text, _default。2.2 post 請求
$.post(url, [data], [callback], [type])
url:請求的URL 地址。
data:請求攜帶的參數。
callback:載入成功時回調函數。
type:設置返回內容格式，xml, html, script, json, text, _default。三、跨域
3.1同源策略
同源策略(Same-Origin Policy)最早由Netscape 公司提出，是瀏覽器的一種安全策略。
同源： 協議、域名、端口號必須完全相同。違背同源策略就是跨域。
3.2如何解決跨域
3.2.1JSONP
3.2.1.1JSONP 是什么
JSONP(JSON with Padding)，是一個非官方的跨域解決方案，純粹憑借程序員的聰明
才智開發出來，只支持get 請求。
3.2.1.2JSONP 怎么工作的？
在網頁有一些標簽天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 標簽的跨域能力來發送請求的。
3.2.2CORS
跨源資源共享（CORS） - HTTP | MDN
3.2.2.1CORS 是什么？
CORS（Cross-Origin Resource Sharing），跨域資源共享。CORS 是官方的跨域解決方
案，它的特點是不需要在客戶端做任何特殊的操作，完全在服務器中進行處理，支持
get 和post 請求。跨域資源共享標準新增了一組HTTP 首部字段，允許服務器聲明哪些
源站通過瀏覽器有權限訪問哪些資源
3.2.2.2CORS 怎么工作的？
CORS 是通過設置一個響應頭來告訴瀏覽器，該請求允許跨域，瀏覽器收到該響應
以后就會對響應放行。
》)
