简单的ajax封装
- WBOY원래의
- 2016-06-07 11:44:261035검색
简单的原生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元