創(chuàng)建一個ajax.js文件
封裝ajax:
/*ajax封裝
? ? ?????? @param option:傳入一個對象
? ? ?????? 屬性分別為(順序可以打亂):
? ? ??????????? url:請求的路徑
? ? ??????????? type:請求的不同類型get或post
? ? ??????????? data:發(fā)送的數(shù)據(jù),格式:key1=value1&key2=value2
? ? ??????????? callback:回調(diào)函數(shù),方便用戶處理自己的數(shù)據(jù),傳遞邏輯????????? ?
? ? */
? ? function ajax(option){
? ? ?????? //創(chuàng)建異步對象
? ? ?????? var xhr = new XMLHttpRequest();
? ? ?????? //如果是get并且有數(shù)據(jù)
? ? ?????? if(option.type=='get'&&option.data){
? ? ??????????? option.url=option.url+'?'+option.data;
? ? ?????? }
? ? ?????? //設(shè)置請求行
? ? ?????? xhr.open(option.type,option.url);
? ? ?????? //設(shè)置請求頭(post有數(shù)據(jù)發(fā)送才需要設(shè)置請求頭)
? ? ?????? //判斷是否有數(shù)據(jù)發(fā)送
? ? ?????? if(option.type=='post'&&option.data){
? ? ???????????? xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
? ? ?????? }
? ? ?????? //注冊回調(diào)函數(shù)
? ? ?????? xhr.onreadystatechange = function(){
? ? ???????????? if(xhr.readyState==4&&xhr.status==200){
? ? ???????????????? //接收返回的數(shù)據(jù)類型
? ? ???????????????? var type = xhr.getResponseHeader('Content-Type');
? ? ???????????????? //json格式
? ? ???????????????? if(type.indexOf('json')!=-1){
? ? ????????????????????? option.callback(JSON.parse(xhr.responseText));
? ? ???????????????? }
? ? ???????????????? //xml格式
? ? ???????????????? else if(type.indexOf('xml')!=-1){
? ? ????????????????????? option.callback(xhr.responseXML);
? ? ???????????????? }
? ? ???????????????? //普通格式
? ? ???????????????? else{
? ? ????????????????????? option.callback(xhr.responseText);
? ? ???????????????? }
? ? ???????????? }
? ? ?????? }
? ? ?????? //發(fā)送請求主體
? ? ?????? //判斷不同的請求類型
? ? ?????? xhr.send(option.type=='post'?option.data:null);
? ? }
get方法：
? ??/*ajax封裝-get
?????? @param url:請求的路徑
?????? @param data:發(fā)送的數(shù)據(jù),格式:key1=value1&key2=value2
?????? @param callback:回調(diào)函數(shù),方便用戶處理自己的數(shù)據(jù),傳遞邏輯
*/
function get(url, data, callback){
? ? ?????? //創(chuàng)建異步對象
? ? ?????? var xhr = new XMLHttpRequest();
? ? ?????? //判斷data是否為空
? ? ?????? if(data){
? ? ?????????? url=url+'?'+data;
? ? ?????? }
? ? ?????? //設(shè)置請求行
? ? ?????? xhr.open('get',url);
? ? ?????? //設(shè)置請求頭(get可以省略)
? ? ?????? //注冊回調(diào)函數(shù)
? ? ?????? xhr.onreadystatechange = function(){
? ? ??????????? if(xhr.readyState==4&&xhr.status==200){
? ? ??????????????? //調(diào)用傳遞的回調(diào)函數(shù)
? ? ??????????????? callback(xhr.responseText);
? ? ??????????? }
? ? ?????? }
? ? ?????? //發(fā)送請求主體
? ? ?????? xhr.send(null);
? ? }
post方法：
/*ajax封裝-post
? ? ?????? @param url:請求的路徑
? ? ?????? @param data:發(fā)送的數(shù)據(jù),格式:key1=value1&key2=value2
? ? ?????? @param callback:回調(diào)函數(shù),方便用戶處理自己的數(shù)據(jù),傳遞邏輯
? ? */
? ? function post(url, data, callback){
? ? ?????? //創(chuàng)建異步對象
? ? ?????? var xhr = new XMLHttpRequest();
? ? ?????? //設(shè)置請求行
? ? ?????? xhr.open('post',url);
? ? ?????? //設(shè)置請求頭(post有數(shù)據(jù)發(fā)送才需要設(shè)置請求頭)
? ? ?????? //判斷是否有數(shù)據(jù)發(fā)送
? ? ?????? if(data){
? ? ???????????? xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
? ? ?????? }
? ? ?????? //注冊回調(diào)函數(shù)
? ? ?????? xhr.onreadystatechange = function(){
? ? ???????????? if(xhr.readyState==4&&xhr.status==200){
? ? ???????????????? //調(diào)用傳遞的回調(diào)函數(shù)
? ? ???????????????? callback(xhr.responseText);
? ? ???????????? }
? ? ?????? }
? ? ?????? //發(fā)送請求主體
? ? ?????? xhr.send(data);
? ? }
