摘要:這類狀態碼代表了客戶端看起來可能發生錯誤,妨礙了服務器的處理。
Ajax及其工作原理
AJAX 是一種與服務器交換數據無需刷新網頁的技術,最早由Google公司在谷歌地圖里使用,并迅速風靡。
AJAX是不能跨域的,如需跨域,可以使用document.domain="a.com";或者使用服務器代理,代理XMLHttpRequest文件
AJAX是基于現有的Internet標準,并且聯合使用它們:
XMLHttpRequest 對象 (異步的與服務器交換數據) JavaScript/DOM (信息顯示/交互) CSS (給數據定義樣式) XML (作為轉換數據的格式)創建 XMLHttpRequest 對象
所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。
創建Ajax對象:
//IE6以上 var oAjax = new XMLHttpRequest(); //IE6 var oAjax =new ActiveXObject("Microsoft.XMLHTTP")連接服務器
oAjax.open(方法,url,是否異步)
我們都知道,Ajax即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創建交互式網頁應用的網頁開發技術。所以,Ajax天生就是工作在異步模式的(異步為true,同步false)
同步和異步同步是指:發送方發出數據后,等接收方發回響應以后才發下一個數據包的通訊方式。
異步是指:發送方發出數據后,不等接收方發回響應,接著發送下個數據包的通訊方式。
(簡單點說:同步就是只能一件一件事的來做,而異步就是可以多件事同時進行)
GET 還是 POST?
與 POST 相比,GET 更簡單也更快,并且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫) 向服務器發送大量數據(POST 沒有數據量限制) 發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠接收返回信息
oAjax.onreadystatechange = function(){ //當請求狀態改變時要調用的事件處理器 alert(oAjax.readystate); }
只要readyState屬性的值發生變化時,便會觸發一次readyStatechange事件??梢岳眠@個事件來檢測每次狀態變化后readyState的值。通常,我們只對readyState值為4的階段感興趣,因為這時所有數據都已經就緒,不過,必須在調用open()之前指定onreadystatechange事件處理程序才能確??鐬g覽器兼容性。下面來看一個例子:
var xhr = createXHR(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.statusText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); xhr.send(null);XHR對象
XMLHttpRequest這個對象的屬性:
它的屬性有:
onreadystatechange 每次狀態改變所觸發事件的事件處理程序。 responseText 從服務器進程返回數據的字符串形式。 responseXML 從服務器進程返回的DOM兼容的文檔數據對象。 status 從服務器返回的數字代碼,比如常見的404(未找到)和200(已就緒) status Text 伴隨狀態碼的字符串信息
當XHR對象把一個HTTP請求發送到服務器的過程中會經歷幾個狀態,直到請求被處理,然后才接收一個回應。readyState就是XHR請求的狀態屬性,它本身有5個屬性值:
0(未初始化)還沒有調用open()方法 1(載入)已調用send()方法,正在發送請求 2(載入完成)send()方法完成,已收到全部響應內容 3(解析)正在解析響應內容 4(完成)響應內容解析完成,可以再客戶端使用了http狀態碼
1字頭:消息。這一類型的狀態碼,代表請求已被接受,需要繼續處理。
2字頭:成功。這一類型的狀態碼,代表請求已成功被服務器接收、理解、并接受。
3字頭:重定向。這類狀態碼代表需要客戶端采取進一步的操作才能完成請求。
4字頭:客戶端錯誤。這類狀態碼代表了客戶端看起來可能發生錯誤,妨礙了服務器的處理。
5字頭:服務器錯誤。這類狀態碼代表了服務器在處理請求的過程中有錯誤或者異常狀態發生
另附:http狀態碼詳解
w3cschool HTTP 狀態消息:http://www.w3school.com.cn/ta...
statusText是響應返回的文本信息,僅當readyState值為3或4的時候才能使用。當readyState為其它值時視圖存取statusText屬性將引發異常。
XHR的方法方法 | 描述 |
---|---|
abort() | 導致當前正在執行的請求被取消 |
getAllResponseHeaders() | 返回包含所有響應頭的名稱和值的單個字符 |
getResponseHeader(name) | 返回響應頭中指定的名稱和值 |
open(method,url,async,username,pwd) | 設置HTTP方法(get或post)等 |
send(content) | 發出帶有指定主體內容的請求 |
setRequestHeader(name,value) | 使用指定的名稱和值設置請求頭 |
jQuery中的Ajax
.load()方法是局部方法,因為他需要一個包含元素的jQuery對象作為前綴,而$.get()和$.post()是全局方法,無需指定某個元素,對于用途而言,.load()適合做靜態文件的異步獲取,而對于需要傳遞參數到服務器頁面的,$.get()和$.post()更加合適。
GET和POST傳入的data是一個鍵值對 對象,不同的是GET傳入的data是通過地址欄傳輸的,而POST是通過表單提交的,
$(function () { $("input").click(function () { $.get("test.php?url=baidu.com", function (response,status,xhr) { $("#box").html(response); }) }) });
POST提交不能使用url傳參。post提交可以使用字符串形式的鍵值對形式傳參,自動轉換為http消息實體傳參
$(function () { $("input").click(function () { $.post("test.php","url=baidu.com", function (response,status,xhr) { $("#box").html(response); }) }) });
//post提交可以使用對象鍵值對 $(function () { $("input").click(function () { $.post("test.php",{ url:"baidu.com"http://post提交可以使用對象鍵值對 }, function (response,status,xhr) { $("#box").html(response); }) }) });
$.get()方法有四個參數,前面三個參數和.load()一樣,多了一個第四參數type,即服務器返回的內容格式,包括xml,json,script,html,text等,第一個參數為必選參數,后面三個為可選參數
$.ajax()是所有Ajax方法中最底層的方法,所有其他方法都是基于$.ajax()方法的封裝,這個方法只有一個參數,傳遞一個
各個功能鍵值對的對象。
參數 | 類型 | 說明 |
---|---|---|
url | string | 發送請求的地址 |
type | string | 請求方法,默認GET |
timeout | Number | 設置請求超時的時間 |
data | Object或String | 發送到服務器的對象,鍵值對字符串或對象 |
datatype | String | 返回的數據類型,比如html,XML,json等 |
success | Function | 請求成功后調用的回調函數 |
complete | Function | 請求完成后調用的回調函數 |
error | Function | 請求失敗后調用的回調函數 |
$(function () { $("input").click(function () { $.ajax({ type : "POST", url: "test.php", data:{ url: "baidu.com" }, success : function(response,status,xhr){ $("#box").html(response); } }) }) });表單序列化
Ajax用的最多的地方莫過于表單操作,而傳統的表單操作是通過submit提交將數據傳輸到服務器,如果使用Ajax異步處理
的話,我們需要將每個表單元素獲取才能提交,這樣工作效率就大大降低
表單元素特別多的情況下應采用表單序列化,即data:$(“form”).serialize();//得到的是字符串鍵值對,并且對url進行編碼
serialize()方法不但可以序列化表單內的元素,還可以直接獲取單選框,復選框和下拉列表框等內容
傳統的ajax有如下的問題:
1、可以無刷新改變頁面內容,但無法改變頁面URL 2、為了更好的可訪問性,內容發生改變后,通常改變URL的hash 3、hash的方式不能很好的處理瀏覽器的前進、后退等問題 4、進而瀏覽器引入了onhashchange的接口,不支持的瀏覽器只能定時去判斷hash是否改變 5、但這種方式對搜索引擎很不友好 6、twitter和google約定了使用#!xxx(即hash第一個字符為!),搜索引擎進行支持。
本人兼職前端付費技術顧問,如需幫助請加本人微信hawx1993,非誠勿擾
1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的意見 5.讓你的學習更有效率,對知識點的理解更加透徹 6.不解答可以百度到的答案,也不解答你遇到的bug 付費(每月僅需99)能讓我更有耐心和責任心的為你指導,讓雙方產生更良好的協作
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85305.html
摘要:今天同學去面試,做了兩道面試題全部做錯了,發過來給道典型的面試題前端掘金在界中,開發人員的需求量一直居高不下。 排序算法 -- JavaScript 標準參考教程(alpha) - 前端 - 掘金來自《JavaScript 標準參考教程(alpha)》,by 阮一峰 目錄 冒泡排序 簡介 算法實現 選擇排序 簡介 算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...
摘要:借鑒圖片僅用于學習分享,請尊重原創作者,勿用于商用。這其中最關鍵的一步就是從服務器獲得請求數據。基本步驟創建對象也就是創建一個異步調用對象。創建一個新的請求并指定該請求的方法及驗證信息。設置響應請求狀態變化的函數。使用和實現局部刷新。 歡迎進入JAVA基礎課程 博客地址:https://blog.csdn.net/houjiyu...本系列文章將主要針對JAVA一些基礎知識點進行講解...
摘要:借鑒圖片僅用于學習分享,請尊重原創作者,勿用于商用。這其中最關鍵的一步就是從服務器獲得請求數據。基本步驟創建對象也就是創建一個異步調用對象。創建一個新的請求并指定該請求的方法及驗證信息。設置響應請求狀態變化的函數。使用和實現局部刷新。 歡迎進入JAVA基礎課程 博客地址:https://blog.csdn.net/houjiyu...本系列文章將主要針對JAVA一些基礎知識點進行講解...
摘要:函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言,然而,近幾年,函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此,...
閱讀 1980·2021-09-26 10:19
閱讀 3249·2021-09-24 10:25
閱讀 1623·2019-12-27 11:39
閱讀 1919·2019-08-30 15:43
閱讀 663·2019-08-29 16:08
閱讀 3504·2019-08-29 16:07
閱讀 902·2019-08-26 11:30
閱讀 1270·2019-08-26 10:41