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