Ajax知識點總結

下面我將通過幾個方面來簡單總結一下ajax中的基礎知識點：

一 ajax簡介：

ajax的全稱是Asynchronous Javascript And XML（異步的js和xml），是前端項目與后臺服務器 產生聯系的一種技術。ajax通過http協議發送請求給對應的服務器，服務器進行處理然后發送響應給瀏覽器端進行數據上的處理。

二 ajax-http協議的請求報文構成：

請求報文的構成：
http請求報文分為三部分：請求行，請求頭，請求體
1）請求行：請求行包括三個部分method request-URL http-version,既請求的方式、請求發送的URL，http協議的版本號
請求行例如 ： GET /icwork/? Search = product HTTP/1.1
2）請求頭：
請求頭包含：

Accept：指瀏覽器或其他客戶可以接愛的MIME文件格式。Servlet可以根據它判斷并返回適當的文件格式。

User-Agent：是客戶瀏覽器名稱

Host：對應網址URL中的Web名稱和端口號。

Accept-Langeuage：指出瀏覽器可以接受的語言種類，如en或en-us，指英語。

connection：用來告訴服務器是否可以維持固定的HTTP連接。http是無連接的，HTTP/1.1使用Keep-Alive為默認值，這樣，當瀏覽器需要多個文件時(比如一個HTML文件和相關的圖形文件)，不需要每次都建立連接

Cookie：瀏覽器用這個屬性向服務器發送Cookie。Cookie是在瀏覽器中寄存的小型數據體，它可以記載和服務器相關的用戶信息，也可以用來實現會話功能。

Referer：表明產生請求的網頁URL。如比從網頁/icconcept/index.jsp中點擊一個鏈接到網頁/icwork/search，在向服務器發送的GET/icwork/search中的請求中，Referer是http://hostname:8080/icconcept/index.jsp。這個屬性可以用來跟蹤Web請求是從什么網站來的。

User-Agent：是客戶瀏覽器名稱。

Content-Type：用來表名request的內容類型。可以用HttpServletRequest的getContentType()方法取得。

Accept-Charset：指出瀏覽器可以接受的字符編碼。英文瀏覽器的默認值是ISO-8859-1.

Accept-Encoding：指出瀏覽器可以接受的編碼方式。編碼方式不同于文件格式，它是為了壓縮文件并加速文件傳遞速度。瀏覽器在接收到Web響應之后先解碼，然后再檢查文件格式。

3）請求體：
請求發送的參數和值

例如請求數據：

代碼例子：
1 GET/sample.jspHTTP/1.1
2 Accept:image/gif.image/jpeg,/
3 Accept-Language:zh-cn
4 Connection:Keep-Alive
5 Host:localhost
6 User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
7 Accept-Encoding:gzip,deflate
8
9 username=jinqiao&password=1234
復制代碼
第一行為http請求行，包含方法，URI 和http版本

1-7為請求頭，包含瀏覽器，主機，接受的編碼方式和壓縮方式

第8行表示一個空行 表示請求頭結束 這個空行是必須的

第9行是數據體，比如是需要查詢的信息。

三 響應報文的構成：

http響應體由三部分組成：

http響應由三個部分組成分別是狀態行，響應頭，響應正文。

狀態行是由：HTTP-Version+Status-Code+Reason-Phrase
比如：HTTP/1.1 200 ok
分別表示http版本 + 狀態碼 + 狀態代碼的文本描述

狀態碼：
1xx 指示信息–表示請求已接收，繼續處理
2xx 成功–表示請求已被成功接收、理解、接受
3xx 重定向–要完成請求必須進行更進一步的操作。
4xx 客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx 服務器端錯誤–服務器未能實現合法的請求。

響應頭：包含服務器類型，日期，長度，內容類型等
Server:Apache Tomcat/5.0.12
Date:Mon,6Oct2003 13:13:33 GMT
Content-Type:text/html（一般為json，表示數據已json的形式發送）
Last-Moified:Mon,6 Oct 2003 13:23:42 GMT
Content-Length:112

響應正文（響應體）：就是服務器返回的HTML頁面或者數據，服務器返回的數據會根據請求頭的要求返回具體的數據，一般返回的數據種類有XML HTML JSON三種數據類型。

四 幾種不同的方法實現ajax請求：

用原生js的ajax技術發送請求：
根據http請求的構成（三部分），在創建一個http請求的時候也可以將步驟分為三步
通過js中封裝的XMLHTttpRequest()構造一個對象；
XMLHttpRequest對象方法

XMLHttpRequest對象的屬性

通過open方法構建一個請求行； setRequestHeader方法構建一個請求頭信息； 構建一個參數數據請求體； 最后通過send方法發送http請求； 我們可以通過onreadystatechange=function（）{}//處理服務請發送的響應//首先通過XMLHttpRequest構造函數，生成一個相應的對象 XMLHttpRequest xhr=new XMLHttpRequest(); //調用xhl對象的open方法 該方法有三個參數 method URL async open(method,url,async);method 方法有 get和posturl 表示要請求的文件的路徑async 表示異步(true)還是同步 （可選項，默認值為true） //調用send方法發送請求 /*send 方法使用規則： ，send(data)：

a)，open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令

b)，data：將要傳遞給服務器的字符串。

c)，若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 即可：request.send(null);

d)，當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作為請求體的一部分發送，則使用null.
*/
var data={};
xhl.send(data);
xhl.onreadystatechange=funtion(){}

****使用jQuery發送ajax請求：**** $.ajax({type: 'get', /* 請求方式 GET 、 POST 、 PUT 等.. */url: 'findApi', /* 后臺的接口(findApi) 使用相對路徑即可 */dateType: 'json', /* 期望服務器返回的數據類型格式 */async：false，//async用來設置請求是同步還是異步，默認是異步（ture）data：{}，數據參數；success: function(result) { // 請求后臺 應答成功返回來的數據 console.log(result);},error: function(xhr, status, error) { // 請求失敗運行的函數console.log(error);}})//jquery調用ajax請求，還有一些方法可以參考jQuery手冊。 ****使用axios發送ajax請求：**** //配置baseURL//在使用axios之前得通過npm引入相應的插件（模塊）axios.defaults.baseURL = "http://127.0.0.1:8000";//服務器端的IP和端口號axios({//請求方法method:"post",//urlurl:"/axios-server",//url參數params:{a:100,b:200},//設置請求體參數data:{username:"ltf",password:"ltf"}}).then(response=>{//處理響應結果console.log(response);//響應狀態碼console.log(response.status);//響應狀態字符串console.log(response.statusText);//響應頭信息console.log(response.headers);//響應體console.log(response.data);})//axios還有一些具體的方法，可以通過axios官網去查看。 ****用fetch函數發送ajax請求：**** //兩個參數，第一個是服務器的地址，第二個是請求函數fetch（‘http://127.0.0.1:8080/fetch?參數’,{method :'post', //請求的方法headers:{ //請求頭},body: //請求體}）.then(response=>{//響應處理函數 })

五 jsonp實現跨域問題：

同源策略：
所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port），瀏覽器支持的是同源協議，這樣可以盡可能的保護網頁的安全。
什么是跨域：
當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即為跨域。
實現跨域：
HTML中的部分標簽具有跨域能力：例如 …

具體實現跨域問題可以參考下面這一篇博客：

如何實現跨域問題

總結：

實現客戶端與服務器端之間的聯系方法有很多，ajax只是其中一種。ajax在前端應用的是最為廣泛的。其實在上面列舉的幾種實現ajax請求方法，本質上都是在原生js上得改進（封裝）。通過理解XMLHttpRequest類實現ajax請求，后面的幾個不同的實現方法都可以很容易懂。

總結

以上是生活随笔為你收集整理的Ajax知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。