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對象的代碼了。
我們在向服務器發送數據之前,我們有必要了解這個對象的一些屬性。
它有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裏面的核心技術。
相关文章
本文链接:http://www.it892.com/content/web/ajax/0G410B462018.html