Ajax大家每天都在用，jquery庫對Ajax的封裝也很完善、很好用，下面我們看一下他的內部原理，并手動(dòng)封裝一個(gè)自己的Ajax庫。
更多有關(guān)ajax封裝及數據處理，請參看上海尚學(xué)堂《
Ajax中replace+Jq封裝的ajax》、《
ajax+json數據處理》
一、原理
原生Ajax的發(fā)送需要四步：
1) 創(chuàng )建Ajax對象: XMLHttpRequest
2) 設置請求參數: open(請求參數[get/post],url地址, 是否異步[true/false] )
3) 設置回調函數: onreadystateChange 用于處理返回的數據
4) 發(fā)送請求: send()
- //TODO step1: 創(chuàng )建ajax對象
- var xhr = new XMLHttpRequest();
- //TODO step2: 設置請求參數
- xhr.open('get','01.php',true);
- //TODO step3: 設置回調
- xhr.onreadystatechange = function () {
- //接收返回數據
- console.log(xhr.responseText);//responseText 用于接收后臺響應的文本
- }
- //TODO step4: 發(fā)送請求
- xhr.send();
二、封裝
封裝的核心思想就是把需要動(dòng)態(tài)變化的部分當成參數，不變的部分就留在那里，在上面的代碼中請求方式（get、post）、請求地址url、請求參數data、成功的回調success、失敗回調error等，這些參數都是動(dòng)態(tài)變化的；而創(chuàng )建Ajax對象 XMLHttprequest、事件監聽(tīng)onreadystatechange等是固定的，所以第一步我們要確定好封裝的參數：
- function ajax(option){
- //用戶(hù)配置option 默認配置init
- var init = {
- type:'get',
- async:true,
- url:'',
- success: function () { },
- error: function () { },
- data:{},
- beforeSend: function () {
- console.log('發(fā)送前...');
- return false;
- }
- };
- //TODO step1: 合并參數
- for(k in option){
- init[k] = option[k];
- }
- //TODO step2: 參數轉換
- var params = '';
- for(k in init.data){
- params += '&'+k+'='+init.data[k];
- }
- var xhr = new XMLHttpRequest();
- // type url
- //TODO step3: 區分get和post,進(jìn)行傳參
- var url = init.url+'?__='+new Date().getTime();
- //TODO step4: 發(fā)送前
- var flag = init.beforeSend();
- if(!flag){
- return;
- }
- if(init.type.toLowerCase() == 'get'){
- url += params;
- xhr.open(init.type,url,init.async);
- xhr.send();
- }else{
- xhr.open(init.type,url,init.async);
- xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
- xhr.send(params.substr(1));
- }
- xhr.onreadystatechange = function () {
- if(xhr.readyState == 4){
- if(xhr.status == 200){
- init.success(xhr.responseText);
- }else{
- //error
- init.error();
- }
- }
- }
- }
這里我們要注意的是get和post的傳參方式位置不一樣，get請求需要直接拼接在url地址后邊，post請求需要在send方法里面傳參，而且需要這是請求頭setRequestHeader('content-type','application/x-www-
form-urlencoded')，所以封裝時(shí)要進(jìn)行區分。
由于參數過(guò)多，用戶(hù)不需要每次都傳入很多參數，否則用起來(lái)會(huì )非常繁瑣。所以我們采取默認參數的形式，用戶(hù)不傳入就是用默認值，傳入就是用用戶(hù)的參數。
三、使用示例
- ajax({
- url: 'test.json',
- data:{test:123,age:456},
- //type:'post',
- success: function (res) {
- console.log(res);
- }
- });
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
