摘要:而由于安全風(fēng)險(xiǎn)的原因,被禁止使用。就好比單線程一樣,請求發(fā)出后就進(jìn)入阻塞狀態(tài),直到解除阻塞,余下的代碼才會繼續(xù)執(zhí)行。安全問題暴露了與服務(wù)器交互的細(xì)節(jié)。破壞了程序的異常機(jī)制。服務(wù)器端暫時(shí)無法處理請求可能是過載或維護(hù)。
AJAX全稱“Asynchronous JavaScript and XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
它有機(jī)地包含了以下幾種技術(shù):
基于web標(biāo)準(zhǔn)(standards-based presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)進(jìn)行動態(tài)顯示及交互;
使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作; 使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索;
使用 JavaScript 將所有的東西綁定在一起。
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象.
(2)創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.
基本步驟:
var xhr =null;//創(chuàng)建對象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(“方式”,”地址”,”標(biāo)志位”);//初始化請求 `請輸入代碼` xhr.setRequestHeader(“”,””);//設(shè)置http頭信息 xhr.onreadystatechange =function(){}//指定回調(diào)函數(shù) xhr.send();//發(fā)送請求
默認(rèn)情況下,在發(fā)送XHR請求的同時(shí),還會發(fā)送下列頭部信息
Accept: 瀏覽器能夠處理的內(nèi)容類型
Accept-Charset: 瀏覽器能夠顯示的字符集
Accept-Encoding: 瀏覽器能夠處理的壓縮編碼
Accept-Language: 瀏覽器當(dāng)前設(shè)置的語言
Connection: 瀏覽器與服務(wù)器之間連接的類型
Cookie: 當(dāng)前頁面設(shè)置的任何Cookie
Host: 發(fā)出請求的頁面所在的域
User-Agent: 瀏覽器的用戶代理字符串
Referer: 發(fā)出請求的頁面的URI
1、open()方法的第一個(gè)參數(shù)用于指定發(fā)送請求的方式,這個(gè)字符串,不區(qū)分大小寫,但通常使用大寫字母。
"GET"和"POST"是得到廣泛支持的"GET"用于常規(guī)請求,它適用于當(dāng)URL完全指定請求資源,當(dāng)請求對服務(wù)器沒有任何副作用以及當(dāng)服務(wù)器的響應(yīng)是可緩存的情況下."POST"方法常用于HTML表單。它在請求主體中包含額外數(shù)據(jù)且這些數(shù)據(jù)常存儲到服務(wù)器上的數(shù)據(jù)庫中。相同URL的重復(fù)POST請求從服務(wù)器得到的響應(yīng)可能不同,同時(shí)不應(yīng)該緩存使用這個(gè)方法的請求.除了"GET"和"POST"之外,參數(shù)還可以是"HEAD"、"OPTIONS"、"PUT"。而由于安全風(fēng)險(xiǎn)的原因,"CONNECT"、"TRACE"、"TRACK"被禁止使用。
2、open()方法的第二個(gè)參數(shù)是URL,該URL相對于執(zhí)行代碼的當(dāng)前頁面,且只能向同一個(gè)域中使用相同端口和協(xié)議的URL發(fā)送請求。如果URL與啟動請求的頁面有任何差別,都會引發(fā)安全錯(cuò)誤。
3、open()方法的第三個(gè)參數(shù)是表示是否異步發(fā)送請求的布爾值,如果不填寫,默認(rèn)為true,表示異步發(fā)送。
4、如果請求一個(gè)受密碼保護(hù)的URL,把用于認(rèn)證的用戶名和密碼作為第4和第5個(gè)參數(shù)傳遞給open()方法。
send()
send()方法接收一個(gè)參數(shù),即要作為請求主體發(fā)送的數(shù)據(jù)。調(diào)用send()方法后,請求被分派到服務(wù)器。
如果是GET方法,send()方法無參數(shù),或參數(shù)為null;如果是POST方法,send()方法的參數(shù)為要發(fā)送的數(shù)據(jù)。
一.什么是同步請求:(false)
同步請求即是當(dāng)前發(fā)出請求后,瀏覽器什么都不能做,必須得等到請求完成返回?cái)?shù)據(jù)之后,才會執(zhí)行后續(xù)的代碼,相當(dāng)于是排隊(duì),前一個(gè)人辦理完自己的事務(wù),下一個(gè)人才能接著辦。也就是說,當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會把頁面里所有的代碼停止加載,頁面處于一個(gè)假死狀態(tài),當(dāng)這個(gè)AJAX執(zhí)行完畢后才會繼續(xù)運(yùn)行其他代碼頁面解除假死狀態(tài)(即當(dāng)ajax返回?cái)?shù)據(jù)后,才執(zhí)行后面的function)。
二.什么是異步請求:(true)
異步請求就當(dāng)發(fā)出請求的同時(shí),瀏覽器可以繼續(xù)做任何事,Ajax發(fā)送請求并不會影響頁面的加載與用戶的操作,相當(dāng)于是在兩條線上,各走各的,互不影響。
一般默認(rèn)值為true,異步。異步請求可以完全不影響用戶的體驗(yàn)效果,無論請求的時(shí)間長或者短,用戶都在專心的操作頁面的其他內(nèi)容,并不會有等待的感覺。
下面來區(qū)別一下同步和異步有什么不同:異步:在異步模式下,當(dāng)我們使用AJAX發(fā)送完請求后,可能還有代碼需要執(zhí)行。這個(gè)時(shí)候可能由于種種原因?qū)е路?wù)器還沒有響應(yīng)我們的請求,但是因?yàn)槲覀儾捎昧水惒綀?zhí)行方式,所有包含AJAX請求代碼的函數(shù)中的剩余代碼將繼續(xù)執(zhí)行。如果我們是將請求結(jié)果交由另外一個(gè)JS函數(shù)去處理的,那么,這個(gè)時(shí)候就好比兩條線程同時(shí)執(zhí)行一樣。
同步:在同步模式下,當(dāng)我們使用AJAX發(fā)送完請求后,后續(xù)還有代碼需要執(zhí)行,我們同樣將服務(wù)器響應(yīng)交由另一個(gè)JS函數(shù)去處理,但是這時(shí)的代碼執(zhí)行情況是:在服務(wù)器沒有響應(yīng)或者處理響應(yīng)結(jié)果的JS函數(shù)還沒有處理完成return時(shí),包含請求代碼的函數(shù)的剩余代碼是不能夠執(zhí)行的。就好比單線程一樣,請求發(fā)出后就進(jìn)入阻塞狀態(tài),直到解除阻塞,余下的代碼才會繼續(xù)執(zhí)行。
ajax的優(yōu)點(diǎn):1、最大的一點(diǎn)是頁面無刷新,用戶的體驗(yàn)非常好。
2、使用異步方式與服務(wù)器通信,具有更加迅速的響應(yīng)能力。
3、可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端,利用客戶端閑置的能力來處理,減輕服務(wù)器和帶寬的負(fù)擔(dān),節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān),ajax的原則是“按需取數(shù)據(jù)”,可以最大程度的減少冗余請求,和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。
4、基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù),不需要下載插件或者小程序。
5、ajax可使因特網(wǎng)應(yīng)用程序更小、更快,更友好。
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機(jī)制。
場景1 數(shù)據(jù)校驗(yàn)
場景2 按照需求獲取數(shù)據(jù)
場景3 自動更新頁面內(nèi)容
1XX:信息狀態(tài)碼
100 Continue 繼續(xù),一般在發(fā)送post請求時(shí),已發(fā)送了http header之后服務(wù)端將返回此信息,表示確認(rèn),之后發(fā)送具體參數(shù)信息
2XX:成功狀態(tài)碼
200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請求,但尚未處理
3XX:重定向
301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向,且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求后,請求的網(wǎng)頁未修改過。
4XX:客戶端錯(cuò)誤
400 Bad Request 服務(wù)器無法理解請求的格式,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
401 Unauthorized 請求未授權(quán)。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
5XX: 服務(wù)器錯(cuò)誤
500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請求(可能是過載或維護(hù))。
Date:響應(yīng)時(shí)間
Server:服務(wù)器信息
Last-Modified:資源最后修改時(shí)間 由服務(wù)器自動生成
ETag:資源修改后生成的唯一標(biāo)識,由服務(wù)器自動生成
Content-Length:響應(yīng)主體長度
Content-Type:響應(yīng)資源的類型
$.ajax({ // 請求的地址 url: "04-data.php", // 請求的方式 type: "get", // 告訴jQuery,需要按照什么格式對服務(wù)器返回的數(shù)據(jù)進(jìn)行解析,默認(rèn)json dataType: "json", // 數(shù)據(jù) data: { msg: "我是來請求數(shù)據(jù)的" }, // 請求成功的回調(diào)函數(shù) success: function(data) { console.log(data); }, // 請求失敗的回調(diào)函數(shù) error: function() { console.log("失敗了"); }, // 請求發(fā)送之前調(diào)用的函數(shù) beforeSend: function() { console.log("請求發(fā)送之前調(diào)用的函數(shù)"); // 如果返回一個(gè)false,那么就會阻止整個(gè)請求的發(fā)送 // return false; // 用法:可以用作表單驗(yàn)證,當(dāng)表單內(nèi)容符合規(guī)范的時(shí)候發(fā)送ajax請求,當(dāng)不符合的時(shí)候就不發(fā)送ajax請求 }, // 不論請求是成功還是失敗的,只要請求完成就會調(diào)用 complete: function() { console.log("請求完成了"); }, // 設(shè)置請求超時(shí)時(shí)間(單位:ms),超過這個(gè)時(shí)間后,就不會請求了 timeout:2000 });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/96387.html
摘要:說明關(guān)于跨域問題的解決方案多達(dá)七八種,你不要說哪有這么多,我不跟你較真哈,你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關(guān)于跨域?yàn)g覽器的同源策略要了解什么是跨域你需要了 說明 關(guān)于跨域問題的解決方案多達(dá)七、八種,你不要說哪有這么多,我不跟你較真哈,你也別跟我較真哈, ?!自行 百度 或 Google, 這里不會跟你...
摘要:如果沒有學(xué)習(xí)過計(jì)算機(jī)科學(xué)的程序員,當(dāng)我們在處理一些問題時(shí),比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組,數(shù)組無疑是一個(gè)很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見: 一些常見的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...
摘要:如果沒有學(xué)習(xí)過計(jì)算機(jī)科學(xué)的程序員,當(dāng)我們在處理一些問題時(shí),比較熟悉的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組,數(shù)組無疑是一個(gè)很好的選擇。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常見 CSS 布局方式詳見: 一些常見的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、雙飛翼布局等。http://cherryb...
摘要:跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。異步編程入門道典型的面試題前端掘金在界中,開發(fā)人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp?為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題...
閱讀 1411·2021-10-11 11:12
閱讀 3244·2021-09-30 09:46
閱讀 1633·2021-07-28 00:14
閱讀 3132·2019-08-30 13:49
閱讀 2581·2019-08-29 11:27
閱讀 3211·2019-08-26 11:52
閱讀 598·2019-08-23 18:14
閱讀 3435·2019-08-23 16:27