详解自定义ajax支持跨域组件封装
需积分: 0 44 浏览量
2020-11-29
11:34:57
上传
评论
收藏 83KB PDF 举报
详解自定义详解自定义ajax支持跨域组件封装支持跨域组件封装
Class.create()分析分析
仿prototype创建类继承
var Class = {
create: function () {
var c = function () {
this.request.apply(this, arguments);
}
for (var i = 0, il = arguments.length, it; i < il; i++) {
it = arguments[i];
if (it == null) continue;
Object.extend(c.prototype, it);
}
return c;
}
};
Object.extend = function (tObj, sObj) {
for (var o in sObj) {
tObj[o] = sObj[o];
}
return tObj;
};
ajax定义：ZIP_Ajax=Class.create();
其中create方法返回的是一个构造函数request，这里相当于var ZIP_Ajax= function(){ this.request.apply(this, arguments); };
用对象冒充的方式在函数内部执行了一次构造的过程，相当于把构造函数任务交给了request方法，这里的this.request是
ZIP_Ajax的实例的方法，而this指向的就是ZIP_Ajax的实例，apply后面的this指向的是ZIP_Ajax，最后根据new关键字将this
才真正指向ZIP_Ajax类。有了类ZIP_Ajax的定义，接下来就可以定义其方法：
XMLHttpRequest详解：详解：
XMLHttpRequest不是一项技术而是一个内置于主流浏览器内的一个可以完全访问http协议的对象。传统的http请求大部分都是
基于form提交请求http，然后返回一个form。XMLHttpRequest支持同步请求的同时最大的优点就是支持异步传输接受数据，
新建一个ajax请求实际就是实例化一个XMLHttpRequest对象。简单介绍一下主要事件及方法：
readystatechange事件：事件：
当XMLHttpRequest发送一个http请求之后就会激发一个readystatechange事件，事件返回有五个值，0,1,2分别代表创建
XMLHttpRequest、初始化完成XMLHttpRequest、发送了请求，3代表响应没结束（即只接收到响应头数据）4才是真正获得
完整响应。
返回的status状态表示服务器返回的状态码：
常用的有200表示成功返回数据，301永久重定向，302为临时重定向（不安全）304读取的缓存数据400表示请求出现语法错
误，403表示服务器拒绝请求，404表示请求网页资源不存在，405找不到指定位置服务器，408表示请求超时，500服务器内
部错误，505表示服务器不支持请求的http协议版本。
200-300表示成功，300-400表示重定向，400-500表示请求内容或者格式或者请求体过大导致错误，500+表示服务器内部错
误
open方法：方法：
open接收三个参数分别是请求类型（get,post,head等）、url、同步或者异步
send方法：方法：
当请求就绪后会触发send方法，发送的内容就是请求的数据（如果是get请求则参数为null；
请求成功之后会执行success自定义方法，其参数为返回数据；
ajax跨域：跨域：
什么是跨域？
如果两个站点www.a.com想向www.b.com请求数据就出现了因为域名不一致导致的跨域问题。即使是域名相同，如果端口不
同的话也是会存在跨域问题（这种原因js是只能袖手旁观了）。判断是否跨域仅仅是通过
window.location.protocol+window.location.host来判断例如http://www.baidu.com.
js解决跨域问题几种方案？
评论0