最近一直有老哥问我,能不能说一下跨域,讲一下前后端通信,其实我就想说一句,这么大的题你让我怎么说,一时半会也说不完,索性就把各种方法拆开来解析,讲一下它们是如何实现通信,自己封装了几个方法,不定时更新~
今天说一下ajax,ajax到现在应该说除了不能跨域,别的通信功能该有的都有了,但是有的老哥只会用API,怎么实现的都不会,这就有点说不过去了。好了下面贴一个封装好的代码
var opt = {
//这里就是ajax需要用到的参数
url: '',
type: 'get',
data: {},
success: function () {},
error: function () {},
};
util.extend(opt, options);
if (opt.url) {
//因为ajax是基于XMLHttpRequest对象,在IE低版本中是基于
//ActiveXObject,首先要做兼容性判断,如果浏览器存在
//XMLHttpRequest对象,则new一个XMLHttpRequest对象,如果不存
//在则创建一个ActiveXObject对象
var xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
//将需要传递数据封装
dataArr.push(k + '=' + data[k]);
}
//判断get或者post方法,当然还有别的方法我暂时没写
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
//打开ajax连接
xhr.open(type, url.replace(/\?$/g, ''), true);
//发送数据
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
//定义请求头可以忽略
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
//响应onload事件(也就是请求成功)
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res ==== 'string') {
//这里返回数据类型可以自己定义,比如jquery的
//xml,json等
res = JSON.parse(res);
opt.success.call(xhr, res);
}
}
} else {
//请求失败
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
};
}
};
原理就是如此简单,过几天不定时讲一下jsonp的实现原理。