【原創】Ajax的用法總結

標籤：合作   異常機制   標準   pack   包括   http請求   過濾   blog   var   

一、什麼是Ajax

Ajax英文全稱為“ Asynchr JavsScript and XML”（非同步JavaScript和XML），是一種建立

互動式網頁的開發技術。

二、Ajax技術的核心

Ajax是一系列相關技術的融合，其核心包括XMLHttpRequest、JavsScript和DOM技術，資料格式

的不同可能會用到Json或者XML的技術。

XMLHttpRequest是它的核心的內容，它能夠為頁面中的JavaScript指令碼提供特定的通訊方式，

從而使頁面的javascript指令碼和伺服器之間形成動態互動的效果，XMLHTTPRequest的最大的優點

是頁面內的javascript指令碼可以不用重新整理頁面，而直接和伺服器發生互動，從而實現頁面無重新整理的效果。

三、XMLHttpRequest方法屬性描述

1、方法描述

abort()停止當前請求

getAllResponseHeaders()把HTTP請求的所有響應首部作為鍵/值對返回

getResponseHeader("header")返回指定首部的串值

open("method","URL",[asyncFlag],["userName"],["password"])建立對伺服器的調用。method參數可以是GET、POST或PUT。

url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否非同步，使用者名稱，密碼

send(content)向伺服器發送請求

setRequestHeader("header", "value")把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()。

設定header並和請求一起發送 (‘post‘方法一定要 )

XMLHttpRequest 對象屬性描述

2、方法描述

onreadystatechange狀態改變的事件觸發程序，每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數

readyState請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入，2 = 已載入，3 = 互動中，4 = 完成

responseText伺服器的響應，返回資料的文本。

responseXML伺服器的響應，返回資料的相容DOM的XML文檔對象 ，這個對象可以解析為一個DOM對象。

responseBody伺服器返回的主題（非文字格式設定）

responseStream伺服器返回的資料流

status伺服器的HTTP狀態代碼（如：404 = "檔案末找到" 、200 ="成功" ，等等）

statusText伺服器返回的狀態文本資訊 ，HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等）

四、Ajax工作原理原理

AJAX的工作原理相當於在使用者和伺服器之間加了一個中介層，使使用者操作與伺服器相應非同步化。並不是所有的使用者請求

都提交給伺服器，像一些資料驗證和資料處理等都交給AJAX引擎自己來做，只有確定需要從伺服器讀取新資料時再由

AJAX引擎代為向伺服器提交請求。

 

五、Ajax的優點

1、減輕伺服器的負擔，提升了網站的效能。

2、無重新整理更新頁面，減少了使用者等待網站載入的時間。

3、使用者體驗更加友好，可以避免出現白屏的情況。

4、Ajax是基於標準化並且廣泛使用的技術幾乎所有的主流瀏覽器都支援該技術，ye不需要單獨安裝外掛程式。

5、Ajax可以使Web中的頁面和應用分離，便於分工合作。

六、Ajax缺點

1、對於行動裝置不能很好的支援。

2、Ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。

3、安全問題。比如：跨網站腳步攻擊、SQL注入攻擊和基於credentials的安全性漏洞等。

4、對搜尋引擎的支援比較弱。

5、破壞了程式的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax架構是會破壞程式的異常機制的。

造成調試的困難。

七、使用原則

1、Ajax適用情境

表單驅動的互動

深層次的樹的導航

快速的使用者與使用者間的交流響應

類似投票、yes/no等無關痛癢的情境

對資料進行過濾和操縱相關資料的情境

普通的文本輸入提示和自動完成的情境

2、Ajax不適用情境

部分簡單的表單

搜尋

基本的導航

替換大量的文本

對呈現的操縱

八、原生AJAX寫法

var XHR=null;if (window.XMLHttpRequest) {// 非IE核心XHR = new XMLHttpRequest();} else if (window.ActiveXObject) {// IE核心,這裡早期IE的版本寫法不同,具體可以查詢下XHR = new ActiveXObject("Microsoft.XMLHTTP");} else {XHR = null;}if(XHR){XHR.open("GET", "ajaxServer.action");XHR.onreadystatechange = function () {// readyState值說明// 0,初始化,XHR對象已經建立,還未執行open// 1,載入,已經調用open方法,但是還沒發送請求// 2,載入完成,請求已經發送完成// 3,互動,可以接收到部分資料// status值說明// 200:成功// 404:沒有發現檔案、查詢或URl// 500:伺服器產生內部錯誤if (XHR.readyState == 4 && XHR.status == 200) {// 這裡可以對返回的內容做處理// 一般會返回JSON或XML資料格式console.log(XHR.responseText);// 主動釋放,JS本身也會回收的XHR = null;}};XHR.send();}

 

公眾號原文

【原創】Ajax的用法總結