首頁 > php教程 > php手册 > 复杂的ajax 原生js实现

复杂的ajax 原生js实现

WBOY
發布: 2016-06-07 11:44:25
原創
1041 人瀏覽過

复杂的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元

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板