/** * 异步通信Ajax * @param {object} config * <code> var config={ action:"test.json",//请求的URL; sync:true,//是否异步,默认异步true; method:"get",//请求类型,默认get; data:null,//post请求的数据; loaded: funLoadOk//回调方法 ; }; 调用代码: <script type="text/javascript" src="Ajax.js?t=0"></script> <script type="text/javascript"> var funLoadOk=function(httpRequest){ alert(httpRequest.responseText); } var config={ action:"test.json", sync:true, method:"get", data:null, loaded: funLoadOk }; var ajax=new Ajax(config); ajax.load(); </script> * </code> */ function Ajax(config){ this._config =config; this.initXmlHttp=function(){ if(typeof XMLHttpRequest == "function")return new XMLHttpRequest(); var MsxmlArr =['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP']; if (window.ActiveXObject){ for(var i=0;i<MsxmlArr.length;i++){ try{ XMLHttpRequest =function(){ return new ActiveXObject(MsxmlArr[i]); }; return new XMLHttpRequest(); }catch(e){ //创建失败跳过; } } } return null; }; /** * 给请求的URL添加一个随机数 * @param {string} url */ this.appendUrlRandom = function(url){ var rnd = "t=" + new Date().getTime(); if(url.indexOf("?")!=-1)url +="&" + rnd; else url += "?" + rnd; return url; }; /** * 状态 * @param {object} req */ this.stateOK = function(req){ var s = req.status || 0; return ((s>=200)&&(s<300))|| (s==304)|| (s==1223)|| (!s && (location.protocol=="file:" || location.protocol=="chrome:")); }; /** * 加载完毕执行内容 * @param {XMLHttpRequest} xmlHttpRequest */ this.loaded=function(xmlHttpRequest){ //加载完毕执行内容 //xmlHttpRequest.responseText; }; /** * 加载失败执行内容 */ this.loadFail=function(){ // }; /** * 给请求的URL添加一个随机数 * @param {string} url */ this.load = function(config){ var c=config || this._config; var action = c.action || c, sync = c.sync || true, method = c.method || "get", loaded = c.loaded || this.loaded, data = c.data || null; try { var rpc=this.initXmlHttp(); var stateIsOk=this.stateOK; action=this.appendUrlRandom(action); alert(action); if (rpc) { rpc.open(method, action ,sync); if(sync)rpc.onreadystatechange = function(){//异步请求 if (rpc.readyState == 4) { if (stateIsOk(rpc)) { loaded(rpc); } } }; if(method=="post"){ rpc.setRequestHeader("content-length",data.length); rpc.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } rpc.send(data); if(!sync){if(rpc.readyState == 4)//同步请求 if(stateIsOk(rpc)) { loaded(rpc); } } } }catch (exception) { this.loadFail(); return null; } }; this.toString = function(){return "[object Ajax]";}; }
测试的HTML页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试页</title>
</head>
<body>
<script type="text/javascript" src="Ajax.js?t=0"></script>
<script type="text/javascript">
var funLoadOk=function(httpRequest){
alert(httpRequest.responseText);
}
var config={
action:"test.json",
sync:true,
method:"get",
data:null,
loaded: funLoadOk
};
var ajax=new Ajax(config);
ajax.load();
</script>
</body>
</html>
JSON 格式的数据
[{"email":"abc@163.com","id":1,"mobile":"13532129825","name":"testName","password":"25F340A32C609AE4"}]