简单的ajax封装

WBOY
リリース: 2016-06-07 11:44:26
オリジナル
1046 人が閲覧しました

简单的原生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元

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート