2345技术员联盟

Ajax基础

  • 来源:未知 原创
  • 时间:2018-07-14
  • 阅读:
  • 本文标签:

1. 傳統的HTML應用必須使用一個網頁表單,向服務器GET或者POST數據。用戶需要等待服務器的響應,然後一張新的網頁會加到結果。


2. ajax會利用JavaScript的API直接與服務器通信,通過使用HTTP協議,web頁面可以向服務器進行請求,並得到來自服務器的響應,但是不加載頁面。用

戶可以停在同一頁面,用戶不會註意到腳本在後臺請求過頁面或者向服務器發送過數據。


3. 我們ajax的技術核心是異步數據獲取技術,也就是我們的XMLHttpRequest對象。


如何創建XMLHttpRequest這個對象?並且如何使用它?


創建XMLHttpRequest對象,我們有幾種方法。


1. 第一種,我們可以使用構造函數的方式。


1) 直接new的方式,這樣我們就構造了這個對象。

request = new XMLHttpRequest()


2) 但是,這個語句只針對Firefox,opera以及Safari等高級瀏覽器。


3) 如果我們要針對IE6或者IE6以上的。

那麽,我們需要換一個方式,然後裏面還要傳一些參數。

xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')


4) 假如這樣創建還是不成功,那我們就要換一個方式,就是修改裏面的一些參數。

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')


5) 如果以上3種方式,還不能創建這個對象,那這個用戶使用的瀏覽器就是過時的。

我們可以提示它,瀏覽器不支持ajax技術。



運行註意


1) 我們創建的這個對象,首先必須運行在web服務器中的一個網頁中,因為它依賴於JavaScript。JavaScript必須在網頁中執行。

2) 我們一定要註意這個網頁的編碼。

3)不然,通過這個異步獲取的數據,有可能是亂碼。


代碼演示



1. 這是一個我寫好的網頁代碼開始的模板。這裏面我綁定了一個onclick事件,調用doAjax函數。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax初步入門教學視頻-麥子學院</title>

</head>

<body>

<script type="text/javascript">

function doAjax(the_request)

{

    

}

</script>

<input type="button" onclick="doAjax('ajax-02.txt')" />

<br/><br/>

<div id="vv"></div>

</body>

</html>

 

2. 填充這個函數裏面的內容


1) 首先,我們定義一個默認為null的變量。

var request = null;


2) 然後我們就判斷我們的瀏覽器,我們根據這個瀏覽器是否支持這個對象,來生成這個request對象。


它如果支持,我們就直接用構造函數:

if (window.XMLHttpRequest) {

request = new XMLHttpRquest() ;  

}  

它如果不支持這個對象,我們就使用第二種方式生成:

else if (window.ActiveXObject) {

request = new ActiveXObject('Microsoft.XMLHTTP');    

}

這樣我們就創建好了。

 

然後就是else,我們也不再去判斷另外一種方式了,我們直接給用戶提示。

else {

    alert("您的瀏覽器不支持ajax");

    return false;

}


3) 因為是個函數,所以必須要有返回值,我們就返回false。

return false;


4) 好,這就是我們生成XMLHttpRequest對象的代碼了。

Ajax1.png


我們在向服務器發送數據之前,我們有必要了解這個對象的一些屬性。


它有3個比較重要的屬性。

1) 第一個是我們的onreadystatechange這個屬性。

這個屬性有什麽作用呢?

它存儲處理服務器響應的函數。


假如這個request是我們已經生成好的對象,然後我給它的屬性賦一個空函數,裏面寫一些代碼。

request.onreadystatechange = function() {

//這裏要寫一些代碼


}


2) 第二個屬性是readyState。

它用來存儲服務器響應的狀態信息。

每當它的狀態值改變的時候,onreadystatechange這個屬性對應的函數就要被調用一次。


這個readyState屬性有5個值。

a) 0:表示請求未初始化,也就是還沒有發起請求。

b) 1:表示請求已經提出,在請求發出去之前。

c) 2:表示請求已發送,這裏通常可以從響應得到頭部信息。

d) 3:表示服務器已經正在處理中,但是沒有響應完成。

e) 4:表示服務器已經請求完成,並且使用它。


這個readyState,其實針對的這些狀態,我們都要調用onreadystatechange對應的函數。

那,我們必須要在這個函數裏面寫上一條if語句,才能判斷我們的響應是否已經完成,意味著是否可以獲取異步的數據。


好,我們在這裏示範一下:

request.onreadystatechange = function() {

//這裏要寫一些代碼

if (request.readyState == 4) {

//從服務器獲取數據的代碼,並做相應處理


}

}


3) 那,接下來這個屬性叫做:responseText。

這個屬性是用來獲取,由服務器返回的數據,就是當

readyState為4的時候,我們可以獲取到數據。

例如:我們把它打印出來。

request.onreadystatechange = function() {

//這裏要寫一些代碼

if (request.readyState == 4) {

//從服務器獲取數據的代碼,並做相應處理

alert(request.responseText);

}

}

這樣我們就把這個服務器返回的數據alert出來了。


4. 但是我們要把請求發送到服務器,那我們就要調用它的兩個方法。


1) 第一個是open(),這個參數需要3個參數。

a) 第一個參數是GET或者是POST,表名這個HTTP方法

b) 第二個參數就是規定服務器端腳本的url。

c) 第三個參數,規定應當對請求作異步的處理,也就是一個異步處理的標識。

2) 第二個方法:就是send()方法,send方法可以將請求發送到服務器端。


我們假設當前這個網頁,跟我們請求的url在同一個目錄下面。

a) 那我們的代碼可以是這樣的。

request.open("GET", "test.txt", true);

這個時候,我們就已經建立了這個請求。

b) 然後,加一個對服務器響應狀態的代碼。

request.onreadystatechange = function() {

//這裏要寫一些代碼

if (request.readyState == 4) {

//從服務器獲取數據的代碼,並做相應處理

alert(request.responseText);

}

}

c) 然後,我們就可以通過send方法,將我們的請求發送給服務器端。


接下來,我們就可以在方法裏面做一些處理了。

做處理的時候,我們其實什麽也不用做,只要等到

request.readyState == 4的時候,才做一些處理。


做處理,其實一般來說,就是獲取這個

responseText這個屬性,把它裏面的數據做一下解析,然後在相應的網頁位置展示出來。

這就是我們的ajax裏面的核心技術。


相关文章

本文来自电脑技术网www.it892.com),转载本文请注明来源.
本文链接:http://www.it892.com/content/web/ajax/0G410B462018.html

推荐阅读
无觅相关文章插件,快速提升流量