Ajax

LuDongWei 發(fā)布于2019-08-23 15:41 / 2116人閱讀

摘要：二技術的核心技術的核心是對象簡稱，使得瀏覽器可以發(fā)出請求與接收響應。伴隨狀態(tài)碼的字符串信息。第二部分請求頭部，第二行至第六行。第四部分請求數(shù)據(jù)，第八行。例子第一部分狀態(tài)行，由協(xié)議版本號，狀態(tài)碼，狀態(tài)消息三部分組成。

一、什么是Ajax

Ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。

二、Ajax技術的核心

Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應。
XMLHttpRequest對象的主要屬性有：
onreadystatechange——每次狀態(tài)改變所觸發(fā)事件的事件處理程序。
responseText——從服務器進程返回數(shù)據(jù)的字符串形式。
responseXML——從服務器進程返回的DOM兼容的文檔數(shù)據(jù)對象。
status——從服務器返回的數(shù)字代碼，如404（未找到）和200（已就緒）。
status Text——伴隨狀態(tài)碼的字符串信息。
readyState——對象狀態(tài)值。

三、XHR 用法

創(chuàng)建Ajax核心對象XMLHttpRequest(記得考慮兼容性)

向服務器發(fā)送請求

注意：POST請求一定要設置請求頭的格式內容

對于open方法，有幾點需要注意：

URL是相對于當前頁面的路徑，也可以似乎用絕對路徑。

open方法不會向服務器發(fā)送真正請求，它相當于初始化請求并準備發(fā)送。

只能向同一個域中使用相同協(xié)議和端口的URL發(fā)送請求，否則會因為安全原因報錯。
真正能夠向服務器發(fā)送請求需要調用send方法，并僅在POST請求可以傳入?yún)?shù)，不需要則發(fā)送null，在調用send方法之后請求被發(fā)往服務器。

請求發(fā)往服務器，服務器根據(jù)請求生成響應（Response），傳回給XHR對象，在收到響應后相應數(shù)據(jù)會填充到XHR對象的屬性，有四個相關屬性會被填充：

responseText——從服務器進程返回數(shù)據(jù)的字符串形式。

responseXML——從服務器進程返回的DOM兼容的文檔數(shù)據(jù)對象。

status——從服務器返回的數(shù)字代碼，如404（未找到）和200（已就緒）。

status Text——伴隨狀態(tài)碼的字符串信息。

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

200 OK                     //客戶端請求成功 
400 Bad Request      //客戶端請求有語法錯誤，不能被服務器所理解 
401 Unauthorized    //請求未經(jīng)授權，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用 
403 Forbidden         //服務器收到請求，但是拒絕提供服務 
404 Not Found        //請求資源不存在，eg：輸入了錯誤的URL 
500 Internal Server Error     //服務器發(fā)生不可預期的錯誤 
503 Server Unavailable       //服務器當前不能處理客戶端的請求，一段時間后可能恢復正常

readyState——對象狀態(tài)值。對象狀態(tài)值有以下幾個：

0 - (未初始化)還沒有調用send()方法

1 - (載入)已調用send()方法，正在發(fā)送請求

2 - (載入完成)send()方法執(zhí)行完成

3 - (交互)正在解析響應內容

4 - (完成)響應內容解析完成，可以在客戶端調用了

在異步請求時，我們可以檢查XHR對象的readyState屬性，該屬性表示請求/響應過程中的當前活動階段，每當readyState值改變的時候都會觸發(fā)一次onreadystatechange事件。
我們可以利用這個事件檢查每次readyState變化的值，當為4的時候表示所有數(shù)據(jù)準備就緒。
有一點我們需要注意：必須在open方法之前指定onreadtstatechange事件處理程序。

四、GET還是POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）

向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠

五、HTTP請求

HTTP之請求消息Request
客戶端發(fā)送一個HTTP請求到服務器的請求消息包括以下格式：
請求行（request line）、請求頭部（header）、空行和請求數(shù)據(jù)四個部分組成。

POST請求例子

POST / HTTP1.1 
Host: www.wrox.com 
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022) 
Content-Type: application/x-www-form-urlencoded 
Content-Length: 40 
Connection: Keep-Alive 

name=Professional%20Ajax&publisher=Wiley

第一部分：請求行，第一行明了是post請求，以及http1.1版本。
第二部分：請求頭部，第二行至第六行。
第三部分：空行，第七行的空行。第四部分：請求數(shù)據(jù)，第八行。

HTTP之響應消息Response
一般情況下，服務器接收并處理客戶端發(fā)過來的請求后會返回一個HTTP的響應消息。
HTTP響應也由四個部分組成，分別是：狀態(tài)行、消息報頭、空行和響應正文。

例子

HTTP/1.1 200 OK Date: Fri, 22 May 2009 06:07:21 GMT Content-Type: text/html; charset=UTF-8

第一部分：狀態(tài)行，由HTTP協(xié)議版本號，狀態(tài)碼，狀態(tài)消息三部分組成。
第一行為狀態(tài)行，（HTTP/1.1）表明HTTP版本為1.1版本，狀態(tài)碼為200，狀態(tài)消息為（ok）
第二部分：消息報頭，用來說明客戶端要使用的一些附加信息
第二行和第三行為消息報頭，Date:生成響應的日期和時間；Content-Type:指定了MIME類型的HTML(text/html),編碼類型是UTF-8
第三部分：空行，消息報頭后面的空行是必須的
第四部分：響應正文，服務器返回給客戶端的文本信息。
空行后面的html部分為響應正文。

云服務器 GPU云服務器 ajax() ajax? ajax _AJAX

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102444.html

ajax與jsonp一點基礎整理

摘要：之所以不能跨域其實是因為受到同源策略的限制，只能讓它訪問同源下的數(shù)據(jù)，不能訪問不同源下的數(shù)據(jù)同源策略每個網(wǎng)站只能讀取同一來源的數(shù)據(jù)，這里的同一來源指的是主機名域名協(xié)議和端口號的組合。一、Ajax的概念 Ajax是一種技術方案，但并不是一種新技術。它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏...

tomlingtm 2019-08-21 16:57 評論0 收藏0
深入淺出Ajax

摘要：在接收響應期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯誤時觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應數(shù)據(jù)。基于標準被廣泛支持。破壞程序的異常處理機制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學習大綱理解Ajax的工作原理 Ajax核心-XMLHttpRequest對象封裝Aja...

megatron 2019-08-22 18:39 評論0 收藏0
再也不學AJAX了！（一）AJAX概述

摘要：需要注意的是，并不是的替代品，兩者各自有其適應的場景。但為了方便交流，我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器，而將派發(fā)資源的一方稱為服務端又稱為服務器。它可以幫助我們?yōu)橹蟾拍罴毠?jié)的學習打下良好基礎。再也不學AJAX了是一個與AJAX主題相關的文章系列，包含以下三個部分的內容： AJAX概述：主要回答AJAX是什么這個問題；使用AJAX：介紹如何通過JavaSc...

neu 2019-08-21 17:49 評論0 收藏0
ajax入門

摘要：基于標準被廣泛支持。這樣的類最初是在中作為一個名為的對象引入的。請求還沒有被發(fā)送。當為，這個屬性返回目前已經(jīng)接收的響應部分。由服務器返回的狀態(tài)代碼，如表示成功，而表示錯誤。方法取消當前響應，關閉連接并且結束任何未決的網(wǎng)絡活動。前言總括：本文講解了ajax的歷史，工作原理以及優(yōu)缺點，對XMLHttpRequest對象進行了詳細的講解，并使用原生js實現(xiàn)了一個ajax對象以方便日常開...

Fundebug 2019-08-20 13:51 評論0 收藏0
Web前端-Ajax基礎技術(下)

摘要：前端基礎技術下你要明白是什么，怎么使用，程序是將信息放入公共的服務器，讓所有網(wǎng)絡用戶可以通過瀏覽器進行訪問。獲取字符串形式的響應數(shù)據(jù)，獲取形式的響應數(shù)據(jù)。基礎回顧原理是借助標簽發(fā)送跨域請求的技巧。 Web前端-Ajax基礎技術(下) 你要明白ajax是什么，怎么使用？ ajax，web程序是將信息放入公共的服務器，讓所有網(wǎng)絡用戶可以通過瀏覽器進行訪問。瀏覽器發(fā)送請求，獲取服務器的數(shù)據(jù)：...

趙連江 2019-04-23 11:44 評論0 收藏0
AJAX-Cache：一款好用的Ajax緩存插件

摘要：是一款緩存插件，可以為方法擴展緩存功能。緩存清理插件本身會自動清理過期緩存對于不想繼續(xù)使用緩存的接口可以為方法傳入清理當前接口的緩存并返回最新數(shù)據(jù)也可以調用清理所有插件產(chǎn)生的緩存。原文鏈接 AJAX-Cache是什么 Ajax是前端開發(fā)必不可少的數(shù)據(jù)獲取手段，在頻繁的異步請求業(yè)務中，我們往往需要利用緩存提升界面響應速度，減少網(wǎng)絡資源占用。AJAX-Cache是一款jQuery緩存插件...

didikee 2019-08-22 15:11 評論0 收藏0