复杂的ajax 原生js实现
- WBOYOriginal
- 2016-06-07 11:44:25988browse
复杂的ajax实现
复杂的原生js ajax实现，加入了时间超时，超时处理模仿百度的js写的/**<br>
* 复杂的ajax封装<br>
* @version 1.0<br>
*<br>
* 用法<br>
* var xmlhttp = new YAjax();<br>
* xmlhttp.request({<br>
* url : "./demo.php", // get请求时 可以这样写 "./demo.php?name=zhangsan"<br>
* method : "POST",<br>
* data : "name=李四", // 支持json传值 {"name":"zhangsan"} get时不用该参数<br>
* receiveType : "html", // json html or xml<br>
* timeout : 3000, // 3秒<br>
* success : function(d) {alert(d);},<br>
* error : function(xmlhttp){alert('timeout');}<br>
* });<br>
*<br>
*/<br>
function YAjax() {<br>
this._self = this;<br>
this.xmlhttp = this.init();<br>
}<br>
<br>
YAjax.prototype = {<br>
constructor : YAjax,<br>
<br>
// 初始化xmlhttpRequest<br>
init : function() {<br>
var xmlhttp = null;<br>
<br>
// 针对不同浏览器建立这个对象的不同方式写不同代码<br>
if(window.XMLHttpRequest) {<br>
xmlhttp = new XMLHttpRequest();<br>
//针对某些特定版本的Mozillar浏览器的BUG进行修正<br>
if(xmlhttp.overrideMimeType) {<br>
xmlhttp.overrideMimeType("text/xml");<br>
}<br>
<br>
} else if (window.ActiveXObject) {<br>
var activexName = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];<br>
for (var i=0; i<activexname.length></activexname.length>
try {<br>
xmlhttp = new ActiveXObject(activexName[i]);<br>
break;<br>
} catch(e) {}<br>
}<br>
}<br>
<br>
return xmlhttp;<br>
},<br>
<br>
extend : function(destination, source, override) {<br>
if(undefined == override) override = true;<br>
if(typeof destination != "object" && typeof destination != "function") {<br>
if(!override) <br>
return destination;<br>
else <br>
destination = {};<br>
} <br>
var property = '';<br>
for(property in source) {<br>
if(override || !(property in destination)) {<br>
destination[property] = source[property];<br>
}<br>
}<br>
<br>
return destination; <br>
},<br>
<br>
// json to string {name: 'lisi', age: 10} --> name=lisi&age=10<br>
json2String : function(jsonData) {<br>
var strArr = [];<br>
for(var k in jsonData) {<br>
strArr.push(k + "=" + jsonData[k]); <br>
}<br>
<br>
return strArr.join("&");<br>
},<br>
<br>
// 发送http 请求<br>
request : function(opt) {<br>
var _self = this,<br>
isTimeout = false,<br>
timeFlag = 0,<br>
options = {<br>
url : "", // string<br>
data : "", // json or string<br>
method : "POST",<br>
receiveType : "html", // html json or xml<br>
timeout : 7000,<br>
async : true,<br>
success : function(){alert("define your success function");},<br>
error : function(xmlhttp){}<br>
};<br>
if("data" in opt) {<br>
if(typeof opt.data == "string"){} else {opt.data = this.json2String(opt.data); } <br>
}<br>
options = this.extend(options, opt);<br>
<br>
this.xmlhttp.onreadystatechange = function(){<br>
if(_self.xmlhttp.readyState == 4) {<br>
if(!isTimeout && _self.xmlhttp.status == 200) {<br>
clearTimeout(timeFlag);<br>
var t = options.receiveType.toLowerCase();<br>
if(t == "html") {<br>
options.success(_self.xmlhttp.responseText);<br>
<br>
} else if(t == "xml") {<br>
options.success(_self.xmlhttp.responseXML); <br>
<br>
} else if(t == 'json') {<br>
try {<br>
var obj = JSON.parse(_self.xmlhttp.responseText);<br>
options.success(obj); <br>
} catch(e) {<br>
var str = '(' + _self.xmlhttp.responseText + ')'; //json字符串<br>
options.success(eval(str));<br>
}<br>
} else {}<br>
<br>
} else {<br>
clearTimeout(timeFlag);<br>
options.error(_self.xmlhttp);<br>
}<br>
}<br>
};<br>
<br>
timeFlag = setTimeout(function(){<br>
if(_self.xmlhttp.readyState != 4) {<br>
isTimeout = true;<br>
_self.xmlhttp.abort();<br>
clearTimeout(timeFlag);<br>
} <br>
}, options.timeout);<br>
<br>
this.xmlhttp.open(options.method.toUpperCase(), options.url, options.async); //打开与服务器连接<br>
if(options.method.toUpperCase() == "POST") {<br>
this.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //post方式要设置请求类型<br>
this.xmlhttp.send(options.data); //发送内容到服务器<br>
<br>
} else {<br>
this.xmlhttp.send(null);<br>
}<br>
}<br>
};
AD：真正免费，域名+虚机+企业邮箱=0元