本文通過2個示例來給大家分享了下原生javascript結合ajax實現(xiàn)數(shù)據(jù)請求的方法以及原理，非常的簡單實用，有需要的小伙伴可以參考下
ajax：一種請求數(shù)據(jù)的方式，不需要刷新整個頁面；
ajax的技術核心是 XMLHttpRequest 對象；
ajax 請求過程：創(chuàng)建 XMLHttpRequest 對象、連接服務器、發(fā)送請求、接收響應數(shù)據(jù)；
/**
* 得到ajax對象
*/
function getajaxHttp() {
var xmlHttp;
try {
//chrome, Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
//IE5，6
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//IE7以上
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的瀏覽器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
/**
* 發(fā)送ajax請求
* url--url
* methodtype(post/get)
* con (true(異步)|false(同步))
* parameter(參數(shù))
* functionName(回調(diào)方法名，不需要引號,這里只有成功的時候才調(diào)用)
* (注意：這方法有二個參數(shù)，一個就是xmlhttp,一個就是要處理的對象)
* obj需要到回調(diào)方法中處理的對象
*/
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
var xmlhttp=getajaxHttp();
xmlhttp.onreadystatechange=function(){
// readyState值說明
// 0,初始化,XHR對象已經(jīng)創(chuàng)建,還未執(zhí)行open
// 1,載入,已經(jīng)調(diào)用open方法,但是還沒發(fā)送請求
// 2,載入完成,請求已經(jīng)發(fā)送完成
// 3,交互,可以接收到部分數(shù)據(jù)
// status值說明
// 200:成功
// 404:沒有發(fā)現(xiàn)文件、查詢或URl
// 500:服務器產(chǎn)生內(nèi)部錯誤
if(xmlhttp.readyState==4&& XHR.status == 200){
//HTTP響應已經(jīng)完全接收才調(diào)用
functionName(xmlhttp,obj);
}
};
xmlhttp.open(methodtype,url,con);
xmlhttp.send(parameter);
}
//這就是參數(shù)
function createxml(){
var xml="<user><userid>asdfasdfasdf<\/userid><\/user>";//"\/"這不是大寫V而是轉義是左斜杠和右斜杠
return xml;
}
//這就是參數(shù)
function createjson(){
var json={id:0,username:"好人"};
return json;
}
function c(){
alert("");
}
//測試
ajaxrequest("http://www.baidu.com","post",true,createxml(),c,document);
我們再來看一個示例
ajax({
url: "./TestXHR.aspx", //請求地址
type: "POST", //請求方式
data: { name: "super", age: 20 }, //請求參數(shù)
dataType: "json",
success: function (response, xml) {
// 此處放成功后執(zhí)行的代碼
},
fail: function (status) {
// 此處放失敗后執(zhí)行的代碼
}
});
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
//創(chuàng)建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本瀏覽器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
//連接 和 發(fā)送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//設置表單提交時的內(nèi)容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
//格式化參數(shù)
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
我們來看看原理
1、創(chuàng)建
1.1、IE7及其以上版本中支持原生的 XHR 對象，因此可以直接用： var oAjax = new XMLHttpRequest();
1.2、IE6及其之前的版本中，XHR對象是通過MSXML庫中的一個ActiveX對象實現(xiàn)的。有的書中細化了IE中此類對象的三種不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；個人感覺太麻煩，可以直接使用下面的語句創(chuàng)建： var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
2、連接和發(fā)送
2.1、open()函數(shù)的三個參數(shù)：請求方式、請求地址、是否異步請求(同步請求的情況極少，至今還沒用到過)；
2.2、GET 請求方式是通過URL參數(shù)將數(shù)據(jù)提交到服務器的，POST則是通過將數(shù)據(jù)作為 send 的參數(shù)提交到服務器；
2.3、POST 請求中，在發(fā)送數(shù)據(jù)之前，要設置表單提交的內(nèi)容類型；
2.4、提交到服務器的參數(shù)必須經(jīng)過 encodeURIComponent() 方法進行編碼，實際上在參數(shù)列表”key=value”的形式中，key 和 value 都需要進行編碼，因為會包含特殊字符。每次請求的時候都會在參數(shù)列表中拼入一個 “v=xx” 的字符串，這樣是為了拒絕緩存，每次都直接請求到服務器上。
encodeURI() ：用于整個 URI 的編碼，不會對本身屬于 URI 的特殊字符進行編碼，如冒號、正斜杠、問號和井號；其對應的解碼函數(shù) decodeURI()；
encodeURIComponent() ：用于對 URI 中的某一部分進行編碼，會對它發(fā)現(xiàn)的任何非標準字符進行編碼；其對應的解碼函數(shù) decodeURIComponent()；
3、接收
3.1、接收到響應后，響應的數(shù)據(jù)會自動填充XHR對象，相關屬性如下
responseText：響應返回的主體內(nèi)容，為字符串類型；
responseXML：如果響應的內(nèi)容類型是 "text/xml" 或 "application/xml"，這個屬性中將保存著相應的xml 數(shù)據(jù)，是 XML 對應的 document 類型；
status：響應的HTTP狀態(tài)碼；
statusText：HTTP狀態(tài)的說明；
3.2、XHR對象的readyState屬性表示請求/響應過程的當前活動階段，這個屬性的值如下
0-未初始化，尚未調(diào)用open()方法；
1-啟動，調(diào)用了open()方法，未調(diào)用send()方法；
2-發(fā)送，已經(jīng)調(diào)用了send()方法，未接收到響應；
3-接收，已經(jīng)接收到部分響應數(shù)據(jù)；
4-完成，已經(jīng)接收到全部響應數(shù)據(jù)；
只要 readyState 的值變化，就會調(diào)用 readystatechange 事件，(其實為了邏輯上通順，可以把readystatechange放到send之后，因為send時請求服務器，會進行網(wǎng)絡通信，需要時間，在send之后指定readystatechange事件處理程序也是可以的，我一般都是這樣用，但為了規(guī)范和跨瀏覽器兼容性，還是在open之前進行指定吧)。
3.3、在readystatechange事件中，先判斷響應是否接收完成，然后判斷服務器是否成功處理請求，xhr.status 是狀態(tài)碼，狀態(tài)碼以2開頭的都是成功，304表示從緩存中獲取，上面的代碼在每次請求的時候都加入了隨機數(shù)，所以不會從緩存中取值，故該狀態(tài)不需判斷。
4、ajax請求是不能跨域的！