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

复杂的ajax 原生js实现

WBOY
Freigeben: 2016-06-07 11:44:25
Original
1041 Leute haben es durchsucht

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage