Home > php教程 > php手册 > 简单的ajax封装

简单的ajax封装

WBOY
Release: 2016-06-07 11:44:26
Original
1066 people have browsed it

简单的原生javascript ajax情趣方法
我怎么总是上床不了附件。。。
是不是有时候只想简单的利用一下ajax功能,而不像引入jquery呢,这时候这个东西可以帮你
这个是简单版本 没有加入时间超时限制,用法和jquery的get post 相似

供大家参考/**<br>  * 简单的ajax封装方法 默认返回 html<br>  * @Author yulipu<br>  * @version 1.0<br>  *<br>  * @param receiveType 返回数据类型<br>  *        参数取值 html xml json<br>  * 用法<br>  *        function demo() {<br>  *            var xmlhttp = new simpleYAjax('html');  //不填参数默认就是html<br>  *            xmlhttp.post('ajax.php', 'name=张三', function(s) {<br>  *                document.getElementById('conDiv').innerHTML = s;<br>  *            });<br>  *            <br>  *            var xmlhttp = new simpleYAjax('json');  //不填参数默认就是html<br>  *            xmlhttp.get('ajax.php?param=1', function(json) {<br>  *                alert(json.xxx);<br>  *            });<br>  *        }<br>  * <br>  */<br> function simpleYAjax(receiveType) {<br>     var self = this;<br>     <br>     //一个变量定义了但没赋值则值为undefined<br>     //typeof 后面若是一个没有定义过的变量则值为 undefined 若是定义过但没赋值的变量 值也是undefined<br>     this.receiveType = (undefined == receiveType ? 'html' : receiveType);<br>     this.callBack = null;  //回调函数<br>     this.xmlhttp = this.init();  //xmlHttpRequest对象<br>     <br>     //把服务器返回数据传给回调函数<br>     this.processCallBack = function() {<br>         if(self.xmlhttp.readyState == 4) {<br>             if(200 == self.xmlhttp.status || 0 == self.xmlhttp.status) {  // 0是没经过服务器<br>                 if(self.receiveType == 'html') {<br>                     self.callBack(self.xmlhttp.responseText);  //调用回调函数<br>                     <br>                 } else if(self.receiveType == 'xml') {<br>                     self.callBack(self.xmlhttp.responseXML);<br>                     <br>                 } else if(self.receiveType == 'json') {<br>                     try {<br>                         self.callBack(JSON.parse(self.xmlhttp.responseText));<br>                     } catch(e) { <br>                         var str = '(' + self.xmlhttp.responseText + ')';  //json字符串<br>                         self.callBack(eval(str));<br>                     }<br>                     <br>                 } else {<br>                     //others<br>                 }<br>             }<br>         }<br>     };<br>     <br> }<br> <br> /**<br>  * 初始化xmlHttpRequest对象<br>  */<br> simpleYajax.prototype.init = function() {<br>     var xmlhttp = null;<br>     <br>     //需要针对不同轮浏览器建立这个对象的不同方式写不同代码<br>     if (window.XMLHttpRequest) {<br>         //针对FireFox、Mozillar、Opera、Safari、IE7、IE8<br>         xmlhttp = new XMLHttpRequest();<br>         //针对某些特定版本的Mozillar浏览器的BUG进行修正<br>         if (xmlhttp.overrideMimeType) {<br>             xmlhttp.overrideMimeType("text/xml");<br>         }<br>     } else if (window.ActiveXObject) {<br>         //针对IE6、IE5.5、IE5<br>         //IE中创建XMLHttpRequest对象要用到对象的控件名,例如:<br>         //var xmlhttp = new ActiveXObject("控件名");<br>         //可用的控件名有:MSXML2.XMLHTTP, Microsoft.XMLHTTP<br>         //我们用一个for循环来让他自己判断用哪个控件名可以创建出XMLHttpRequest对象<br> <br>         var activexName = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];<br>         for (var i=0; i<activexname.length></activexname.length>             try {<br>                 //取出一个控件名进行创建,如果成功就结束循环<br>                 //如果创建失败就抛出异常,不做处理,让他继循环尝试创建<br>                 xmlhttp = new ActiveXObject(activexName[i]);<br>                 break;<br>             } catch(e) {}<br>         }<br>     }<br>     <br>     return xmlhttp;<br> };<br> <br> /**<br>  * post方式发送请求<br>  * @param targetUrl 服务端地址<br>  * @data 发送的数据<br>  * @callBack 回调函数 回调函数接收一个参数,就是服务器端返回的结果<br>  */<br> simpleYajax.prototype.post = function(targetUrl, data, callBack) {<br>     if(callBack) {  //typeof 后面是函数 则 结果是'function'<br>         this.callBack = callBack;<br>         this.xmlhttp.onreadystatechange = this.processCallBack;<br>         this.xmlhttp.open('POST', targetUrl, true);  //打开与服务器连接<br>         this.xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //post方式要设置请求类型<br>         this.xmlhttp.send(data);  //发送内容到服务器<br>     }<br> };<br> <br> /**<br>  * get方式发送请求<br>  * @param targetUrl 服务端地址<br>  * @callBack 回调函数 回调函数接收一个参数,就是服务器端返回的结果<br>  */<br> simpleYajax.prototype.get = function(targetUrl, callBack) {<br>     if(callBack) {<br>         this.callBack = callBack;<br>         this.xmlhttp.onreadystatechange = this.processCallBack;  //注册回调函数 processCallBack把内容处理后回传给callBack<br>         <br>         //if(window.XMLHttpRequest) {<br>             this.xmlhttp.open('GET', targetUrl);<br>             this.xmlhttp.send(null);<br>         //} else {<br>         //    this.xmlhttp.open('GET', targetUrl, true);<br>         //    this.xmlhttp.send();<br>         //}<br>     }<br> };

AD:真正免费,域名+虚机+企业邮箱=0元

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template