原生js實現Ajax例項講解
Ajax簡介
ajax = 非同步 JavaScript 和 XML。
ajax是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。我們知道，傳統的網頁（不使用ajax）如果需要更新內容，必須重新載入整個網頁。Ajax的出現，使得使網可以實現非同步更新，這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
注意：ajax本身不支援跨域請求，需要在伺服器端處理。
工作原理
ajax的技術核心是 XMLHttpRequest 物件。
ajax請求過程：建立XMLHttpRequest、連線伺服器、傳送請求、伺服器做出響應、接收響應資料
圖示：
ajax與jsonp
區別
從實現方式上來講，ajax是通過建立XMLHttpRequest來獲取同源的資料。而jsonp是通過
jsonp產生原因
1. Ajax直接請求普通檔案存在跨域無許可權訪問的問題（靜態頁、動態頁、web服務、wcf只要是跨域請求一律不準）
2. web的頁面上呼叫js檔案是不受跨域的影響（凡擁有src屬性的標籤都擁有跨域能力script img iframe）
3. 可以判斷 現在想通過純web端(ActiveX控制元件、服務端代理、H5之Websocket等方式不算)跨域訪問資料就只有一種可能，就是在遠端伺服器上設法把資料裝進js格式的檔案裡，供客戶度呼叫和進一步處理；
4. json的純字元數格式可以簡潔的描述複雜資料還被js原生支援
5. web客戶端通過與呼叫指令碼一樣的方式來呼叫跨域伺服器上動態生成的js格式檔案(字尾.json)，伺服器之所以要動態生成json檔案目的把客戶端需要的資料裝入進去
6. 客戶端在對json檔案呼叫成功後獲得自己所需的資料剩下的就按照自己需求進行處理和展現，這種獲取遠端資料的方式非常像ajax其實並一樣
7. 為了方便客戶端使用資料逐漸形成非正式傳輸協議jsonp
其實，說到ajax就會面臨兩個不可避免的問題，一是以何種格式來減緩資料；二是如何解決跨域問題。目前來說，所被推崇的方案是JSON作資料交換，JSONP來解決跨域問題。
JSON與JSONP雖然看上去只有一字之差，但是實際上根本不是一回事。JSON是一種key/value形式的資料格式，二JSONP則是一種跨域資料互動協議。
例項
題目：註冊時，會要求輸入使用者名稱和密碼，同時要驗證使用者名稱是否合法。
實現功能，使用者在輸入使用者名稱後，需要給出提醒該名稱是否已經存在。
html文件結構
<!DOCTYPE HTML>
<html>
<head JavaScript程式碼
<script type="text/javascript">
//初始化一個儲存XMLHttpRequest物件的變數
var xhr = null;
//定義一個函式用來建立XMLHttpRequest物件,相容各個版本
function CreatXHR()
{
//判斷瀏覽器是否支援ActiveX控制元件，針對IE6及之前版本
if (window.ActiveXObject)
{
//將所有可能出現的ActiveXObject版本都放在一個數組中
var arrXHR = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//通過迴圈建立XMLHttpRequest物件
var temp = arrXHR.length;
for (var i=0;i<temp;i++)
{
try
{
//建立XMLHttpRequest物件
xhr = new ActiveXObject(arrXHR[i]);
//如果建立XMLHttpRequest物件成功，則跳出迴圈
break;
}
catch(ex)
{
}
}
}
//判斷瀏覽器是否將XMLHttpRequest作為本地物件實現，針對IE7，Firefox，Opera等瀏覽器
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
//響應XMLHttpRequest物件狀態變化的函式
function httpStateChange()
{
if (xhr.readyState==4)//非同步呼叫完畢
{
if (xhr.status==200 || xhr.status==0)//非同步呼叫成功，在本機上除錯
{
//獲得伺服器返回的資料
var Names = xhr.responseText;
var arrName = Names.split(";");//把獲取到的一個字串分割成字串陣列。
//定義一個變數，用於判斷使用者名稱是否已經存在
var Flag = false;
for(i=0;i<arrName.length;i++)
{
if (arrName[i]== Form.Name.value)
{
Flag = true;//使用者名稱存在
break;
}
}
//合法性驗證提醒
var OWarn = document.getElementById("Warn");
if (Flag)
{
OWarn.innerHTML = "您輸入的使用者名稱已存在，請重新輸入！";
Form.Btn.disabled = true;//提交按鈕不可用
}
else
{
OWarn.innerHTML = "合法使用者名稱";
Form.Btn.disabled = false;//提交按鈕可用
}
}
}
}
//校驗使用者名稱是否有效
function check()
{
//建立XMLHttpRequest物件，呼叫前面定義好的函式
CreatXHR();
if (xhr!=null)
{
//建立響應XMLHttpRequest物件狀態變化的函式
xhr.onreadystatechange = httpStateChange;
//建立http請求
xhr.open("get","Readme.txt", true);
//傳送http請求
xhr.send(null);
}
else
{
alert("您的瀏覽器不支援XMLHTTP");
}
}
</script>注意
注意：需要在html同級目錄下建立一個Reademe.text檔案來儲存已經存在的使用者名稱，多個使用者名稱之間用分好隔開。
效果圖
