Ajax基礎(chǔ)詳解教程(一)

什么是Ajax?

在研究ajax之前首先讓我們先來討論一個(gè)問題 ——什么是Web 2.0 。聽到 Web 2.0 這個(gè)詞的時(shí)候，應(yīng)該首先問一問 “Web 1.0 是什么？” 雖然很少聽人提到 Web 1.0，實(shí)際上它指的就是具有完全不同的請(qǐng)求和響應(yīng)模型的傳統(tǒng) Web。比如，到 hdu.edu.cn 網(wǎng)站上點(diǎn)擊一個(gè)按鈕。就會(huì)對(duì)服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后響應(yīng)再返回到瀏覽器。該請(qǐng)求不僅僅是新內(nèi)容和項(xiàng)目列表，而是另一個(gè)完整的 HTML 頁面。因此當(dāng) Web 瀏覽器用新的 HTML 頁面重繪時(shí)，可能會(huì)看到閃爍或抖動(dòng)。事實(shí)上，通過看到的每個(gè)新頁面可以清晰地看到請(qǐng)求和響應(yīng)。

Ajax也是前端必備技能了，學(xué)習(xí)任何語言，都需要以理論為基礎(chǔ)的大量實(shí)踐才能真正學(xué)會(huì)，之前學(xué)了Ajax很多遍，因?yàn)槿狈Υ罅繉?shí)踐，總是會(huì)忘。所以不實(shí)踐是失敗之母。。。當(dāng)然理論基礎(chǔ)也很重要啦，今天談?wù)勎覍?duì)Ajax的基礎(chǔ)認(rèn)知。

定義：全稱：Asynchronous JavaScript and XML（用異步的形式的JavaScript去操作XML) 用來傳輸進(jìn)行數(shù)據(jù)交互 其實(shí)就是拿數(shù)據(jù)發(fā)數(shù)據(jù)。

應(yīng)用：我們來想想我們編寫的HTML代碼的時(shí)候，當(dāng)我們改變了里面內(nèi)容了并且想看效果的時(shí)候，是不是先保存，然后去瀏覽器刷新頁面，而Ajax就是做到當(dāng)頁面內(nèi)容發(fā)生改變的時(shí)候能不刷新頁面，就能把改變告知我們。比如，我們注冊(cè)的時(shí)候信息填寫錯(cuò)誤，是不是沒刷新頁面就能直接看到信息提示，比如我們玩QQ的時(shí)候，有什么消息都會(huì)提醒你，絲毫沒有刷新頁面，絲毫沒有影響你干別的事情，這就是Ajax做的事情。

下面我們先不解析具體的原理，先來看一個(gè)大致的實(shí)現(xiàn)過程。

當(dāng)然首先，你得知道是把代碼放在服務(wù)器下運(yùn)行的，打開的時(shí)候不能用本地的地址，要用localhost/。。這種形式才是在服務(wù)下訪問的。要是這不了解的話，可以先自行百度下。

栗子需求：新建一個(gè)文字1.txt,隨便輸入什么內(nèi)容，新建HTML頁面，點(diǎn)擊頁面里的按鈕獲取1.txt里面的內(nèi)容

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = new XMLHttpRequest(); //創(chuàng)建Ajax對(duì)象
xhr.open('get','1.txt',true); //設(shè)置請(qǐng)求信息 
xhr.send();//提交請(qǐng)求
//等待服務(wù)器返回內(nèi)容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
alert( xhr.responseText ); //彈出內(nèi)容
} 
} 
}

當(dāng)點(diǎn)擊按鈕的時(shí)候，你會(huì)發(fā)現(xiàn)彈出了1.txt里面的內(nèi)容。

我們來具體解析一下這個(gè)步驟

var xhr = new XMLHttpRequest(); //創(chuàng)建Ajax對(duì)象

我們要用Ajax獲取數(shù)據(jù)，首先呢，要?jiǎng)?chuàng)建一個(gè)Ajax對(duì)象，就跟你想獲取系統(tǒng)時(shí)間要?jiǎng)?chuàng)建一個(gè)時(shí)間對(duì)象是一個(gè)道理。對(duì)象的名稱就是 XMLHttpRequest()，創(chuàng)建好之后我們就可以用對(duì)象下的方法屬性進(jìn)行數(shù)據(jù)交互了。

需要說明的是，這個(gè)對(duì)象實(shí)際是存在兼容問題的，IE6以下沒有這個(gè)對(duì)象的，所以是獲取不到數(shù)據(jù)的，IE6以下用的實(shí)際是一個(gè)插件的方式：

ActiveXObject(‘Microsoft.XMLHTTP') 
//ActiveXObject: IE6下插件的總稱，包含很多插件
//Microsoft.XMLHTTP：具體某個(gè)插件的名字

所以我們需要對(duì)上面做一個(gè)兼容性的處理：

var xhr = null;
if(window.XMLHttpRequest){ //加window是因?yàn)槿绻苯优袛郔E下不存在的東西會(huì)報(bào)錯(cuò)，加了window，就是在判斷一個(gè)屬性是否存在，這樣就不會(huì)報(bào)錯(cuò)了（當(dāng)然我們都知道所有的東西都在window對(duì)象下，所以這樣判斷是有效的）
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}

接著看

xhr.open('get','1.txt',true); //設(shè)置請(qǐng)求信息

Open方法

三個(gè)參數(shù)的含義

1、提交方式 Form-method(get/post)

2、提交地址 Form-action

3、是否異步，是為(true)

首先講提交方式：get/post 這兩種的區(qū)別。

這里我們不用ajax的方式，先直接通過傳統(tǒng)的表單提交數(shù)據(jù)來分析。

傳統(tǒng)的表單提交就是在表單里面設(shè)置提交的一些參數(shù)，用戶的信息輸入提交，會(huì)跳到指定后臺(tái)的頁面。

表單的參數(shù)：

action：提交到哪里 默認(rèn)是當(dāng)前頁面

method：提交方式 默認(rèn)是Get

enctype: 提交的數(shù)據(jù)格式，默認(rèn)是application/x-www-form-urlencoded

我們來具體看個(gè)get方式請(qǐng)求的栗子，并且了解前后端到底是怎么交互的。

栗子需求：建立HTML頁面，PHP頁面，填入數(shù)據(jù)，點(diǎn)擊提交，然后輸出我們輸入的內(nèi)容。

HTML頁面：

form action="1.get.php">
input type="text" name="username">
input type="text" name="age">
input type="submit" value="按鈕" />
/form>

1.get.php（如果不了解PHP語言，大概看下面的注釋簡(jiǎn)單知道干啥就行了）

?php
header('content-type:text/html;charset="utf-8"'); //設(shè)置編碼格式，以及文檔類型
error_reporting(0);
$username = $_GET['username'];//獲取get請(qǐng)求方式的數(shù)據(jù)
$age = $_GET['age'];
echo "你的名字：{$username}，年齡：{$age}"; //輸出內(nèi)容

觀察實(shí)驗(yàn)結(jié)果，當(dāng)點(diǎn)擊按鈕，頁面會(huì)跳到1.get.php頁面，把內(nèi)容輸出。并且觀察上面的地址欄，會(huì)發(fā)現(xiàn)我們輸入的信息被放在了地址欄上。

其實(shí)整個(gè)GET請(qǐng)求過程是這樣的。

1 輸入用戶信息，點(diǎn)擊提交，跳到指定后臺(tái)的頁面

2 GET方式會(huì)把用戶輸入的數(shù)據(jù)名稱和對(duì)應(yīng)的值以這樣的格式(username=valueage=value )串連起來，放在指定后臺(tái)頁面的地址欄的問號(hào)（？）后面。

3 后臺(tái)的代碼 通過PHP語言中的$_GET方法，獲取到地址欄中的用戶信息，$_GET['username']; $_GET['age'];然后賦給變量，輸出信息。

由此，我們可以知道GET方式：

1 把數(shù)據(jù)名稱和對(duì)應(yīng)的值串連(username=valueage=value ),然后把數(shù)據(jù)放到指定頁面的url地址？后面。

2 我們其實(shí)完全可以在后臺(tái)頁面的地址欄上手動(dòng)更改用戶信息，相應(yīng)的輸出也會(huì)變化。因?yàn)楹笈_(tái)代碼是從地址欄中獲取的信息。

所以也因?yàn)檫@樣，這種傳輸方式，是不安全的，

GET方式還有一些其他的特點(diǎn)：

3 因?yàn)閡rl有長(zhǎng)度限制原因 Get請(qǐng)求的方式有數(shù)據(jù)量限制，每個(gè)瀏覽器都不同，所以不要用這種方式傳遞過長(zhǎng)的數(shù)據(jù)。不然會(huì)被截取，導(dǎo)致傳遞數(shù)據(jù)不完整。

4 只能傳遞字符串類型

下面來看看POST方式，同樣是這樣的需求

HTML頁面：

form action="1.get.php" method="post">
input type="text" name="username">
input type="text" name="age">
input type="submit" value="按鈕" />
/form>

1.get.php

?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];//不同的請(qǐng)求方式方法不同，$_POST方法專門用來獲取POST方式請(qǐng)求的數(shù)據(jù) $age = $_POST['age']; echo "你的名字：{$username}，年齡：{$age}";

1.輸入頁面，跟前面一樣就沒有截取，輸出信息頁面，我們可以看到，地址欄上已經(jīng)沒有用戶信息了，但頁面還是輸出了用戶信息。那從哪看出傳遞的過程呢？

其實(shí)在傳遞數(shù)據(jù)的過程中，瀏覽器還會(huì)向服務(wù)端（后臺(tái)）發(fā)送一個(gè)請(qǐng)求頭包含一些請(qǐng)求的信息（GET請(qǐng)求也有頭部信息），我們打開開發(fā)者工具，找到網(wǎng)絡(luò)就可以看到我們的請(qǐng)求，點(diǎn)進(jìn)去就是具體內(nèi)容，看上面的第二種圖，可以看到一些請(qǐng)求信息，有請(qǐng)求的編碼格式，還有請(qǐng)求地址等，具體可以自己私下了解。

我們看第三張圖，可以看到請(qǐng)求的數(shù)據(jù)，上面的其實(shí)是瀏覽器已經(jīng)按照某種格式輸入的信息，下面的源代碼才是實(shí)際傳遞的信息，可以看到串連的格式和GET請(qǐng)求是一樣的，不過把用戶名加密了，更加安全了。

由此我們可以知道

Post請(qǐng)求

1 數(shù)據(jù)的串連格式和Get請(qǐng)求是一樣的

2 通過請(qǐng)求頭信息 通過瀏覽器內(nèi)部傳輸:

還有別的區(qū)別就是

3 傳輸數(shù)據(jù)量 Post理論上無限

4 可以傳遞多種數(shù)據(jù)類型（文本類型，二進(jìn)制）

還有一定是后端獲取數(shù)據(jù)格式不僅有 $_GET, $_POST還有一個(gè) 3 $_REQUEST 可以獲取任何提交方式的數(shù)據(jù) 。

我們需要注意的是數(shù)據(jù)傳輸方式 和 數(shù)據(jù)獲取方式 必須保持一致才能成功獲取

關(guān)于Open方法的第一個(gè)參數(shù)提交方式就講到這里，第二個(gè)地址先簡(jiǎn)單了解，下面來看第三個(gè)參數(shù)關(guān)于異步和同步。

同步：就是一種阻塞模式，比如代碼var a =1 ;alert(a);這就是一種同步，必須執(zhí)行了第一種var a =1，你才會(huì)彈出a的值。

缺點(diǎn)：一般當(dāng)你后面的代碼需要用到前面的東西的時(shí)候 適合用同步 ，但用的很少，因?yàn)楹竺娴拇a都要等前面，體驗(yàn)是不好的。

異步：就是一種非阻塞模式，最明顯的例子，就是定時(shí)器，當(dāng)我們寫了一個(gè)30s后執(zhí)行的定時(shí)器的時(shí)候，在30S內(nèi)其實(shí)后面的代碼是可以執(zhí)行的，而不是過了30s后面代碼才能執(zhí)行，這就是一種異步。

缺點(diǎn)：當(dāng)你后面的代碼需要用到前面的東西的時(shí)候 如果用異步，那么后面的代碼會(huì)在前面還沒加載好就出來，可能會(huì)有問題。幸運(yùn)的是我們可以解決。

解決：當(dāng)你后面的代碼需要用到前面的東西的時(shí)候，可以用條件判斷來決定這些代碼的執(zhí)行，如果條件達(dá)成了就可以執(zhí)行。

還拿上面的舉個(gè)栗子

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //設(shè)置請(qǐng)求信息 
xhr.send();//提交請(qǐng)求
//等待服務(wù)器返回內(nèi)容 這里后面會(huì)具體講，大概就是監(jiān)聽服務(wù)器的狀態(tài)，先簡(jiǎn)單了解即可
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { //如果對(duì)接收到的數(shù)據(jù)相應(yīng)到，并解析完成
alert( xhr.responseText ); //彈出內(nèi)容 
} 
}
}

在上面的代碼中xhr.send()提交請(qǐng)求是需要時(shí)間的，所以必須要等到一定時(shí)間提交成功后，我們后面的才能正確獲取到內(nèi)容，所以這就是后面的代碼正確執(zhí)行，依賴于前面，但是如果用同步的話，我們后面那些不依賴這些前面代碼的代碼也沒辦法執(zhí)行，體驗(yàn)就不好了，所以我們選擇用異步，而對(duì)于這些依賴前面代碼執(zhí)行的代碼，我們就進(jìn)行判斷

if ( xhr.readyState == 4 )就是判斷如果數(shù)據(jù)響應(yīng)到了，收到了，再?gòu)棾鰞?nèi)容。（如果我們不判斷，按照異步的原理，就會(huì)立馬彈出來，獲取數(shù)據(jù)需要時(shí)間，因?yàn)閷?shí)際還沒獲取到數(shù)據(jù)，所以會(huì)彈出空，怕誤解，所以這里我再?gòu)?qiáng)調(diào)下）.

以上所述是小編給大家介紹的Ajax基礎(chǔ)詳解教程(一)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！