简单实现jQuery 风格的 Ajax
Ajax 已经是一个很老的话题了，现在各种框架都会有成熟的封装，使得开发人员可以以较低的学习成本就可以熟练的创建基于ajax技术的应用。
这里面的缺点也很明显，相当一部分开发人员对ajax底层的知识了解甚少，如果脱离框架，可能就会不知所措————
当然，这种情形一般不会发生在开发过程中，更多的出现在面试过程中～ 大家都懂。
看一百遍不如自己实现一遍，动手之前建议参考一下 w3cschool 的 AJAX 教程 简单基础实用。
今天要实现的是 模仿 jQuery 风格的 ajax 调用方式：
$.get(url,[data],[callback]); $.post(url,[data],[callback]);
最终完成的目标是像这样发起异步请求并且处理返回数据：
Ajax.get('get.php',{foo:'bar'},function(data){
onGet(data);
});
Ajax.post('post.php',{pre:'huvtx',last:'ZHONGWEN中文@##@太热teshuf'},function(data){
onPost(data);
});
开始动手，动手之前先思考一下代码如何组织 思考完了：
var Ajax = Ajax || {};
Ajax = (function(){
//如果有jQuery 的 ajax实现就直接用jQuery.ajax
if(window.jQuery && jQuery.ajax) return jQuery.ajax;
/*
*没有，还是用熟悉的单例模式完成对Ajax对象的配置
*xhrs 用来存放每次调用建立的xhr 对象，xhr不需要复用
*/
var it = {}, win = window, doc = document , xhrs = {};
it.createXhr = function(){
/*
*产生一个兼容大部分浏览器的XMLHttpRequest 对象
*return xhr;
*/
};
it.getXhr = function(t){
/*
*按照调用时间生成一个xhr对象 并存到 xhrs 中去
*需要调用 it.createXhr
*return xhrs[t];
*/
};
it.dataQuest = function(data){
/*
*将 data 对象转换为字符串
*{foo:bar,foo2:bar2} => foo=bar&foo2=bar2
*如果传进来的是字符串 保持原样
*return string;
*/
};
it.mixUrl = function(url,query){
/*
*把url 和 quest 链接起来
*return url;
*/
};
it.request = function(method, url, data, callback, async){
/*
*创建一个xhr 并发送一个请求
*method string [GET]|[POST]
*url string
*data string|object
*callback function
*async true | false true 为异步
*/
/*
*主要几步如下 记不住的话可以简称为 COOS：
*createXhr open onreadystatechange send
*/
var xhr = it.getXhr(t);
xhr.open(method, url, syn);
xhr.onreadystatechange = function(e){ };
/*
*如果是POST 方式 sentData 需要有值
*如果想像提交表单一样提交 需要如下设置 requestHeader
*如果是GET 方式 sentData 可以不传，或者为 null
*/
if(method == 'POST'){
sentData = quest;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
};
xhr.send(sentData);
};
/*
*get 方法实现 调用 request方法
*/
it.get = function(url,data,callback,async){
it.request('GET', url, data, callback, async);
};
/*
*post 方法实现 调用 request方法
*/
it.post = function(url, data, callback, async){
it.request('POST', url, data, callback, async);
};
/*
*清除使用完的xhr 对象
*/
it.clearXhr = function(t){
if(xhrs[t]){
xhrs[t].onreadystatuschange = null;
xhrs[t] = null;
}
};
/*
* 简单的trim 用于处理 responseText
*/
it.trim = function(s){
return s.replace(/(^\s*)|(\s*$)/g,'');
};
/*
*配置完成 返回 Ajax 对象
*/
return it;
})();
完整代码：
var Ajax = Ajax || {};
Ajax = (function(){
var it = {}, win =window , doc = document , xhrs = {};
it.createXhr = function(){
var xhr = null;
if(win.XMLHttpRequest){
try{
xhr = new XMLHttpRequest()
}catch(e){
xhr = null;
}
}else {
try{
xhr = new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
xhr = null;
}
}
}
return xhr;
};
it.getXhr = function(t){
if(xhrs[t]) return xhrs[t];
xhrs[t] = it.createXhr();
return xhrs[t];
};
it.dataQuest = function(data){
var quest = '';
if(typeof data == 'string'){
quest = data;
}else if(typeof data == 'object'){
var parms = [];
for(var o in data){
parms.push(o+'='+ encodeURIComponent( data[o]));
};
quest = parms.join('&');
};
return quest;
};
it.mixUrl = function(url,query){
url+= url.indexOf('?') > 0 ? '&' : '?';
url+= query;
return url.replace(/(\?)+/g,'?').replace(/(\&)+/g,'&');
};
it.request = function(method, url, data, callback, async){
var t = new Date()*1,
xhr = it.getXhr(t),
sentData = null,
quest = it.dataQuest(data),
syn = (typeof async == 'undefined') ? true : async;
if(method == 'GET'){
url = it.mixUrl(url,quest);
};
xhr.open(method, url, syn);
xhr.onreadystatechange = function(e){
//alert(xhr.status);
if(xhr.readyState == 4){
if(xhr.status >=200 && xhr.status < 400){
var data = it.trim(xhr.responseText);
if(data && typeof callback == 'function'){
callback(data);
setTimeout(function(){
it.clearXhr(xhr);
},0);
}
}
}
};
if(method == 'POST'){
sentData = quest;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
};
xhr.send(sentData);
};
it.get = function(url,data,callback,async){
it.request('GET', url, data, callback, async);
};
it.post = function(url, data, callback, async){
it.request('POST', url, data, callback, async);
};
it.clearXhr = function(t){
if(xhrs[t]){
xhrs[t].onreadystatuschange = null;
xhrs[t] = null;
}
};
it.trim = function(s){
return s.replace(/(^\s*)|(\s*$)/g,'');
};
return it;
})();
调用方法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ajax test</title>
<script src="at.js"></script>
</head>
<body>
<script>
function getTest(){
Ajax.get('get.php',{foo:'bar'},function(data){
alert(data);
})
};
function postTest(){
Ajax.post('post.php',{pre:'huvtx',last:'ZHONGWEN中文@##@太热teshuf'},function(data){
alert(data);
})
};
</script>
<button onClick="getTest()">GET</button>
<button onClick="postTest()">POST</button>
</body>
</html>
看看服务端干了些啥：
/* *get.php 太简陋了 */ <?php $foo = $_GET['foo']; echo 'your foo is ~'.$foo; ?> /* *post.php 更简陋～ */ <?php $pre = $_POST['pre']; $last = $_POST['last']; echo $pre.$last; ?>
完～
最后补充几点相关的文章：
关于GET 和 POST 的区别
http://www.nowamagic.net/librarys/veda/detail/1919
不再以讹传讹，GET和POST的真正区别
网上的多数答案都是错的
http://www.yining.org/2010/05/04/http-get-vs-post-and-thoughts/
# 从HTTP GET和POST的区别说起