AJAX 小知識

1.如何發請求?

咱們知道有幾種方式能夠發請求,可是都有其侷限性,以下:javascript

用 form 能夠發請求,可是會刷新頁面或新開頁面html

用 a 能夠發 get 請求,可是也會刷新頁面或新開頁面java

用 img 能夠發 get 請求,可是只能以圖片的形式展現程序員

用 link 能夠發 get 請求,可是只能以 CSS、favicon 的形式展現ajax

用 script 能夠發 get 請求,可是只能以腳本的形式運行小程序

思考:有沒有這樣的發請求的方式?跨域

  1. get、post、put、delete 請求都行
  2. 想以什麼形式展現就以什麼形式展現

2.AJAX 的出現

AJAX即「Asynchronous JavaScript and XML」(異步的JavaScript與XML技術)瀏覽器

2.1 AJAX 的歷史

  • 服務器之殤服務器

    ​ 上個世紀90年代,幾乎全部的網站都由HTML頁面實現,服務器處理每個用戶請求都須要從新加載網頁。這樣的處理方式效率不高。用戶的體驗是全部頁面都會消失,再從新載入,即便只是一部分頁面元素改變也要從新載入整個頁面,不只要刷新改變的部分,連沒有變化的部分也要刷新。這會加劇服務器的負擔網絡

  • 異步加載和iframe方案

    ​ 這能夠用異步加載來解決。1995年,JAVA語言的初版發佈,隨之發佈的的Java applets(JAVA小程序)首次實現了異步加載。瀏覽器經過運行嵌入網頁中的Java applets與服務器交換數據,沒必要刷新網頁。1996年,Internet Explorer將iframe元素加入到HTML,支持局部刷新網頁。

  • XMLHttp 的出現

    ​ 1998年先後,Outlook Web Access小組寫成了容許客戶端腳本發送HTTP請求(XMLHTTP)的第一個組件。該組件原屬於微軟Exchange Server,而且迅速地成爲了Internet Explorer 4.0[2]的一部分。部分觀察家認爲,Outlook Web Access是第一個應用了Ajax技術的成功的商業應用程序,併成爲包括Oddpost的網絡郵件產品在內的許多產品的領頭羊。可是,2005年初,許多事件使得Ajax被大衆所接受。Google在它著名的交互應用程序中使用了異步通信,如Google討論組、Google地圖、Google搜索建議、Gmail等。Ajax這個詞由《Ajax: A New Approach to Web Applications》一文所創,該文的迅速流傳提升了人們使用該項技術的意識。另外,對Mozilla/Gecko的支持使得該技術走向成熟,變得更爲簡單易用。

  • 總結爲:

    IE 5 率先在 JS 中引入 ActiveX 對象(API),使得 JS 能夠直接發起 HTTP 請求。 隨後 Mozilla、 Safari、 Opera 也跟進(抄襲)了,取名 XMLHttpRequest,並被歸入 W3C 規範

2.2 AJAX 的優缺點

  • 優勢

    ​ (1)實現局部更新:

    ​ 就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更爲迅捷地迴應用戶動做,並避免了在網絡上發送那些沒有改變的信息。

    ​ (2)僅依賴於瀏覽器和JavaScript:

    ​ Ajax不須要任何瀏覽器插件,但須要用戶容許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣,Ajax應用程序必須在衆多不一樣的瀏覽器和平臺上通過嚴格的測試。隨着Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。一樣,也出現了另外一種輔助程序設計的技術,爲那些不支持JavaScript的用戶提供替代功能。

  • 缺點

    ​ (1)瀏覽器的兼容問題:

    ​ Ajax在本質上是一個瀏覽器端的技術,首先面臨無可避免的第一個問題便是瀏覽器的兼容性問題。各家瀏覽器對於JavaScript/DOM/CSS的支持總有部分不太相同或是有Bug,甚至同一瀏覽器的各個版本間對於JavaScript/DOM/CSS的支持也有可能部分不同。這致使程序員在寫Ajax應用時花大部分的時間在調試瀏覽器的兼容性而非在應用程序自己。所以,目前大部分的Ajax連接庫或開發框架大多以js連接庫的形式存在,以定義更高階的JavaScript API、JavaScript對象(模板)、或者JavaScript Widgets來解決此問題。

    ​ (2)局部刷新帶來的問題:

    ​ Ajax技術之主要目的在於局部交換客戶端及服務器之間的數據。如同傳統之主從架構,無可避免的會有部分的業務邏輯會實如今客戶端,或部分在客戶端部分在服務器。因爲業務邏輯可能分散在客戶端及服務器,且以不一樣之程序語言實現,這致使Ajax應用程序極難維護。若有用戶接口或業務邏輯之更動需求,再加上前一個JavaScript/DOM/CSS 之兼容性問題,Ajax應用每每變成程序員的夢魘。

3.AJAX 的 使用

3.1 AJAX的原理

  1. 使用 XMLHttpRequest 發請求
  2. 服務器返回 XML 格式的字符串
  3. JS 解析 XML,並更新局部頁面

3.2 AJAX 的目的:

使用 js 發請求 ,使用 js 處理返回的響應。

3.3 請用原生 JS寫出一個AJAX請求:

<body>
	<button id="button">點我</button>
	<script> button.addEventListener('click',(e)=>{ let request = new XMLHttpRequest() request.open(method,address) request.send() reqeust.onreadychange() = ()={ if(request.readyState === 4){ if(request.status >= 200 && reuest.status< 300){ let string = esponseText let object =window.JSON.parse(string) } } } }) </script>
</body>
複製代碼

分析:

  • let request = new XMLHttpRequest() 建立一個AJAX實例

  • request.open(method,address) 初始化請求,通常有3個參數 ,若是沒有設置就是 默認值 request.open(method,url,async)

    • method :請求的類型;GET 或 POST
    • url : 文件在服務器上的位置
    • async :true(異步)或 false(同步)
  • request.send() 發送請求(若是參數爲String,只能爲 post請求)

  • reqeust.onreadychange() 監聽 readystatue 的變化 ,每當 readyState 改變時,就會觸發 onreadystatechange 事件。

    • request.readyState XMLHttpRequest 的狀態。從 0 到 4 發生變化

      readyState 狀態 意義
      0 UNSENT(未打開) open()方法還未被調用,請求未初始化
      1 OPENED (未發送) open()方法已經被調用, 服務器鏈接已創建
      2 HEADERS_RECEIVED (已獲取響應頭) send()方法已經被調用, 響應頭和響應狀態已經返回.請求已接收
      3 LOADING (正在下載響應體) 響應體下載中; responseText中已經獲取了部分數據.
      4 DONE (請求完成) 整個請求過程已經完畢.
      • request.status 200表示OK;404表示未找到頁面。

參考文章:

Ajax 入門簡介

AJAX-阮一峯

爲何form表單提交沒有跨域問題,但ajax提交有跨域問題?

XMLHttpRequest-MDN

AJAX-MDN

相關文章
相關標籤/搜索