2345技術員聯盟

一份詳細的AJAX與跨域處理講解

  • 來源:未知 原創
  • 時間:2018-05-10
  • 閱讀:
  • 本文標簽:

           在前端的世界里也逛蕩了不少日子了,目前已經get到大約5種發起請求的方式,主流的、非主流的可是1.我們可能想用GET POST PUT DELETE 方法2.不想刷新整個頁面,想用一種更易于理解的方式來響應AJAX出現瀏覽器和服務器交互模式V1.0在AJAX未出現之前,瀏覽器想從服務器獲得資源,注意是獲取資源,會經過如下一個過程:瀏覽器發起請求->服務器接到請求響應給你HTML文檔->瀏覽器收到資源,刷新頁面,加載獲得的的HTML。簡略的過程。我稱這種交互方式是V1.0,此時還是以獲取資源為導向。后來隨著時代的發展,人們日益增長的文化需求成為了社會的主要矛盾……有一天,小明看了一篇報道,他只是想在下面評論一下,發表對實事的親切問候,問候完了,唉,你給我刷新頁面干啥,我只是想評論一下啊。概那是網民們第一次對 良好的用戶體驗 提出了要求。后來的蘋果爸爸,把大家慣壞了,天天嚷著"你這產品用戶體驗太差了"……彼時,微軟還是對web做出了很大的貢獻的。交互模式2.0大約1999年,微軟發布IE 5.0版本,它允許Java腳本向服務器發起HTTP請求。不過很遺憾,當時也沒有火起來,直到2004年Gmail發布和2005年Google Map發布,才引起廣泛重視。2005年,一個叫Jesse James Garrett的人提出了一個新術語----AJAX,它是一系列技術的組合體,全稱是 Asynchronous Java + XML(異步的JS和XML)可以阻止頁面整體刷新,只是動態響應用戶的操作,快速顯示到局部,用戶就可以很愉快的繼續上網了。





               AJAX可以看出IE當時還是很猛的,隨著IE 6.0市場份額進一步擴大,IE已經把火狐整的半死不活,放眼整個瀏覽器市場,微軟是當之無愧的王者,后來微軟就把瀏覽器團隊解散了……不得不說這是一波神操作,能與之媲美的操作大概只有殘血我能反殺 塔下我能秀他了。微軟強行為后續各家瀏覽器的發展提供了優秀的工程師,尤其是08、09年出生的谷歌瀏覽器,再看如今的IE……既然AJAX是一系列的技術的組合體,接下來認識一下其中的幾位主角對象是用來在瀏覽器和服務器之間傳輸數據的。古代的操作的是:瀏覽器構造實例化對象用這個對象發起請求服務器響應一個XML格式的字符串,是字符串,是字符串,是字符串,也就是說響應的第四部分是字符串。JS解析符合XML格式的字符串,更新局部頁面。什么是XML?可擴展標記語言以上是最初的用法,用的是XML,前端代碼片段如服務器端的對應代碼片本地模擬的話,一定要記得開倆不同的端例如:node server.js 8001node server.js 8002實例的詳解正如上面的前端代碼片段寫的一樣,主要用到了open() send()方法, onreadystatechange readyState 屬性。1.request.open(method, URL, async)方法。一般用三個參數,第一個參數是請求的方法,可以用GET POST DELETE PUT等等,URL是用訪問的路徑,async是是否使用同步,默認true,開啟異步,不需要做修改即可,所以實際中只寫前兩個參數如果非要寫false,開啟同步,會對瀏覽器有阻塞效應,而且如果值為false,則send()方法不會返回任何東西,直到接受到了服務器的返回數據2.request.send()方法。發送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應完全接受以后,該方法才會返回。





         3.readyState屬性。0 === 常量 UNSENT (未打開) open()方法未調用1 === OPENED (未發送) 只是open()方法調用了2 === HEADERS_RECEIVED (已獲取響應頭) send()方法調用了,響應頭和響應狀態已經返回了3 === LOADING (正在下載響應體) 響應體下載中,responseText已經獲取了部分數據4 === DONE (請求完成) 整個響應過程完畢了。 這個值是實際中用到的。只要不等于4,就表示請求還在進行中。描述請求的五個狀態。4.responseText屬性是此次響應的文本內容。5.onreadystatechange屬性。readyState屬性的值發生改變,就會觸發readyStateChange事件。我們可以通過onReadyStateChange屬性,指定這個事件的回調函數,對不同狀態進行不同處理。尤其是當狀態變為4的時候,表示通信成功,這時回調函數就可以處理服務器傳送回來的數據。即前面的代碼片段的處理方式。6.其他的方法、屬性、事件詳見阮一峰博客、MDN文檔習慣用java的前端是不想和XML打交道的,應該用一種符合js風格的數據格式語言。JSON后來一個美國程序員道格拉斯·克羅克福特發明了JSON,解決了上面的問題,這貨還寫了一本蝴蝶書Java語言精粹,還發明了一個JS校驗器 ----JSLint。JSON(Java Object Notation) 是一種輕量級的數據交換格式。 易于人閱讀和編寫。同時也易于機器解析和生成。 它基于Java Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。 JSON采用完全獨立于語言的文本格式,但是也使用了類似于C語言家族的習慣(包括C, C++, C#, Java, Java, Perl, Python等)。 這些特性使JSON成為理想的數據交換語言。





               以上是JSON官網的簡介,可以看出它是一門全新的語言,不是Java的子集。JSON很簡單,數據類型和JS有點不同的地方。瀏覽器的全局對象window上有JSON對象,直接使用window.JSON.parse(string)以上是JSON解析部分的代碼。此時服務器端代碼是:我們瀏覽器有同源政策,不是同協議同域名同端口的網頁無法相互訪問。AJAX恰好是同源政策的擁躉。CORS.如果AJAX向非同源的地址發起請求,會報錯。這種錯誤無法通過狀態碼識別,因為HTTP回應的狀態碼有可能是200,也就是說即使你看到了200的正確碼,也沒有用.但是form表單無視同源政策,可以發起跨域請求。上述請求響應都沒有問然而對于AJAX就不行這是為什么呢,因為因為原頁面用 form 提交到另一個域名之后,原頁面的腳本無法獲取新頁面中的內容,所以瀏覽器認為這是安全的。而 AJAX 是可以讀取響應內容的,因此瀏覽器不能允許你這樣做。如果你細心的話你會發現,其實請求已經發送出去了,你只是拿不到響應而已。所以瀏覽器這個策略的本質是,一個域名的,在未經允許的情況下,不得讀取另一個域名的內容。但瀏覽器并不阻止你向另一個域名發送請求。那么如何讓AJAX跨域發起請求呢?答案是CORSCORS目前是W3C的標準,它允許瀏覽器跨域發起請求,而且可以發起多種請求,不像JSONP只能發起GET請求,全稱是"跨域/源資源共享"(Cross-origin resource sharing)。


本文來自電腦技術網www.visaqiaoliang.com),轉載本文請注明來源.
本文鏈接:http://www.visaqiaoliang.com/content/web/ajax/0510932502018.html

推薦閱讀
熱點排行
  1. 一份詳細的AJAX與跨域處理講解
  2. ajax輪詢在壓測平臺中的應用
無覓相關文章插件,快速提升流量 日日摸夜夜添夜夜添破第一次_日本午夜福利视频一区二区三区_日韩精品一区二区在线视频