摘要:二技術的核心技術的核心是對象簡稱,使得瀏覽器可以發出請求與接收響應。伴隨狀態碼的字符串信息。第二部分請求頭部,第二行至第六行。第四部分請求數據,第八行。例子第一部分狀態行,由協議版本號,狀態碼,狀態消息三部分組成。
一、什么是Ajax
Ajax的全稱是Asynchronous JavaScript and XML,即異步JavaScript+XML。
二、Ajax技術的核心Ajax技術的核心是XMLHttpRequest對象(簡稱XHR),使得瀏覽器可以發出HTTP請求與接收HTTP響應。
XMLHttpRequest對象的主要屬性有:
onreadystatechange——每次狀態改變所觸發事件的事件處理程序。
responseText——從服務器進程返回數據的字符串形式。
responseXML——從服務器進程返回的DOM兼容的文檔數據對象。
status——從服務器返回的數字代碼,如404(未找到)和200(已就緒)。
status Text——伴隨狀態碼的字符串信息。
readyState——對象狀態值。
創建Ajax核心對象XMLHttpRequest(記得考慮兼容性)
向服務器發送請求
注意:POST請求一定要設置請求頭的格式內容
對于open方法,有幾點需要注意:
URL是相對于當前頁面的路徑,也可以似乎用絕對路徑。
open方法不會向服務器發送真正請求,它相當于初始化請求并準備發送。
只能向同一個域中使用相同協議和端口的URL發送請求,否則會因為安全原因報錯。
真正能夠向服務器發送請求需要調用send方法,并僅在POST請求可以傳入參數,不需要則發送null,在調用send方法之后請求被發往服務器。
請求發往服務器,服務器根據請求生成響應(Response),傳回給XHR對象,在收到響應后相應數據會填充到XHR對象的屬性,有四個相關屬性會被填充:
responseText——從服務器進程返回數據的字符串形式。
responseXML——從服務器進程返回的DOM兼容的文檔數據對象。
status——從服務器返回的數字代碼,如404(未找到)和200(已就緒)。
status Text——伴隨狀態碼的字符串信息。
Http狀態碼:
1xx:指示信息--表示請求已接收,繼續處理 2xx:成功--表示請求已被成功接收、理解、接受
3xx:重定向--要完成請求必須進行更進一步的操作 4xx:客戶端錯誤--請求有語法錯誤或請求無法實現
5xx:服務器端錯誤--服務器未能實現合法的請求
常見狀態碼:
200 OK //客戶端請求成功 400 Bad Request //客戶端請求有語法錯誤,不能被服務器所理解 401 Unauthorized //請求未經授權,這個狀態代碼必須和WWW-Authenticate報頭域一起使用 403 Forbidden //服務器收到請求,但是拒絕提供服務 404 Not Found //請求資源不存在,eg:輸入了錯誤的URL 500 Internal Server Error //服務器發生不可預期的錯誤 503 Server Unavailable //服務器當前不能處理客戶端的請求,一段時間后可能恢復正常
readyState——對象狀態值。對象狀態值有以下幾個:
0 - (未初始化)還沒有調用send()方法
1 - (載入)已調用send()方法,正在發送請求
2 - (載入完成)send()方法執行完成
3 - (交互)正在解析響應內容
4 - (完成)響應內容解析完成,可以在客戶端調用了
在異步請求時,我們可以檢查XHR對象的readyState屬性,該屬性表示請求/響應過程中的當前活動階段,每當readyState值改變的時候都會觸發一次onreadystatechange事件。
我們可以利用這個事件檢查每次readyState變化的值,當為4的時候表示所有數據準備就緒。
有一點我們需要注意:必須在open方法之前指定onreadtstatechange事件處理程序。
與 POST 相比,GET 更簡單也更快,并且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫)
向服務器發送大量數據(POST 沒有數據量限制)
發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
五、HTTP請求
HTTP之請求消息Request
客戶端發送一個HTTP請求到服務器的請求消息包括以下格式:
請求行(request line)、請求頭部(header)、空行和請求數據四個部分組成。
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版本。
第二部分:請求頭部,第二行至第六行。
第三部分:空行,第七行的空行。第四部分:請求數據,第八行。
HTTP之響應消息Response
一般情況下,服務器接收并處理客戶端發過來的請求后會返回一個HTTP的響應消息。
HTTP響應也由四個部分組成,分別是:狀態行、消息報頭、空行和響應正文。
例子
HTTP/1.1 200 OK Date: Fri, 22 May 2009 06:07:21 GMT Content-Type: text/html; charset=UTF-8
第一部分:狀態行,由HTTP協議版本號, 狀態碼, 狀態消息 三部分組成。
第一行為狀態行,(HTTP/1.1)表明HTTP版本為1.1版本,狀態碼為200,狀態消息為(ok)
第二部分:消息報頭,用來說明客戶端要使用的一些附加信息
第二行和第三行為消息報頭,Date:生成響應的日期和時間;Content-Type:指定了MIME類型的HTML(text/html),編碼類型是UTF-8
第三部分:空行,消息報頭后面的空行是必須的
第四部分:響應正文,服務器返回給客戶端的文本信息。
空行后面的html部分為響應正文。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102444.html
摘要:之所以不能跨域其實是因為受到同源策略的限制,只能讓它訪問同源下的數據,不能訪問不同源下的數據同源策略每個網站只能讀取同一來源的數據,這里的同一來源指的是主機名域名協議和端口號的組合。 一、Ajax的概念 Ajax是一種技術方案,但并不是一種新技術。它依賴的是現有的CSS/HTML/Javascript,而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象,是這個對象使得瀏...
摘要:需要注意的是,并不是的替代品,兩者各自有其適應的場景。但為了方便交流,我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器,而將派發資源的一方稱為服務端又稱為服務器。它可以幫助我們為之后概念細節的學習打下良好基礎。 再也不學AJAX了是一個與AJAX主題相關的文章系列,包含以下三個部分的內容: AJAX概述:主要回答AJAX是什么這個問題; 使用AJAX:介紹如何通過JavaSc...
摘要:前端基礎技術下你要明白是什么,怎么使用,程序是將信息放入公共的服務器,讓所有網絡用戶可以通過瀏覽器進行訪問。獲取字符串形式的響應數據,獲取形式的響應數據。基礎回顧原理是借助標簽發送跨域請求的技巧。 Web前端-Ajax基礎技術(下) 你要明白ajax是什么,怎么使用? ajax,web程序是將信息放入公共的服務器,讓所有網絡用戶可以通過瀏覽器進行訪問。 瀏覽器發送請求,獲取服務器的數據:...
摘要:是一款緩存插件,可以為方法擴展緩存功能。緩存清理插件本身會自動清理過期緩存對于不想繼續使用緩存的接口可以為方法傳入清理當前接口的緩存并返回最新數據也可以調用清理所有插件產生的緩存。 原文鏈接 AJAX-Cache是什么 Ajax是前端開發必不可少的數據獲取手段,在頻繁的異步請求業務中,我們往往需要利用緩存提升界面響應速度,減少網絡資源占用。AJAX-Cache是一款jQuery緩存插件...
閱讀 3226·2021-11-02 14:44
閱讀 3729·2021-09-02 15:41
閱讀 1671·2019-08-29 16:57
閱讀 1793·2019-08-26 13:38
閱讀 3302·2019-08-23 18:13
閱讀 2112·2019-08-23 15:41
閱讀 1677·2019-08-23 14:24
閱讀 3034·2019-08-23 14:03