Ajax大家每天都在用,jquery庫對Ajax的封裝也很完善、很好用,下面我們看一下它的內部原理,並手動封裝一個自己的Ajax庫。
一、原理
原生Ajax的傳送需要四個步驟:
1) 建立Ajax物件: XMLHttpRequest
#2)設定請求參數: open(請求參數[get/post],url位址, 是否非同步[true/false] )
3) 設定回呼函數: onreadystateChange 用於處理傳回的資料
# 4) 發送請求: send()
//TODO step1: 创建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: 发送请求 xhr.send();
二、封裝
封裝的核心思想就是把需要動態變化的部分當成參數,不變的部分就留在那裡,在上面的程式碼中請求方式(get、post)、請求位址url、請求參數data、成功的回呼success、失敗回呼error等,這些參數都是動態變化的;而創建Ajax物件XMLHttprequest、事件監聽onreadystatechange等是固定的,所以第一步我們要確定好封裝的參數:
v url 請求位址
v data 請求資料
##v type 請求類型v success 成功回呼v error 失敗回呼v beforeSend 發送前呼叫return false 阻止發送v complete ajax請求成功的回調, 無論什麼時候都會執行function ajax(option){ //用户配置option 默认配置init var init = { type:'get', async:true, url:'', success: function () { }, error: function () { }, data:{}, beforeSend: function () { console.log('发送前...'); 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,进行传参 var url = init.url+'?__='+new Date().getTime(); //TODO step4: 发送前 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(); } } } }
三、使用範例
ajax({ url: 'test.json', data:{test:123,age:456}, //type:'post', success: function (res) { console.log(res); } });
以上是原生JS封裝AJAX方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!