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, 然后返回一个 formXMLHttpRequest 支持同步请求的同时最大的优点就是支持异步传输接受数据, 新建一个 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 解决跨域问题几种方案?
1document.domain+iframe
对于主域相同而子域不同的请求可以使用域名 + iframe 作为解决办法具体思想是假如有两个域名下的不同 ab 文件 www.a.com/a.html
以及 hi.a.com/b.html, 我们可以在两个 html 文件中加上 document.domain="a.com", 之后通过在 a 文件中创建一个 iframe 去控制 iframe 的 contentDocument, 这样两个文件就可以对话了举例如下:
www.a.com 上的 a.html 文件中
- document.domain = "a.com";
- var selfFrame = document.createElement("iframe");
- selfFrame.src = "http://hi.a.com/b.html";
- selfFrame.style.display = "none";
- document.body.appendChild(selfFrame);
- selfFrame.onload = function() {
- var doc = selfFrame.contentDocument || selfFrame.contentWindow.document; // 得到操作 b.html 权限
- alert(doc.getElementById("ok_b").innerHTML()); // 具体操作 b 文件中元素
- }
hi.a.com 上的 b.html 文件中
document.domain="a.com";
问题:
1 安全性, 当一个站点 (hi.a.com) 被攻击后, 另一个站点 (www.a.com) 会引起安全漏洞 2 如果一个页面中引入多个 iframe, 要想能够操作所有 iframe, 必须都得设置相同 domain
2 动态创建 script(传说中 jsonp 方式)
浏览器默认禁止跨域访问, 但不禁止在页面中引用其他域名的 js 文件, 并且可以执行引入 js 文件中的方法等, 根据这点我们可以通过创建 script 节点方法来实现完全跨域的通信实现步骤为:
a. 在请求发起方页面动态加载一个 script,script 的 url 指向接收方的后台, 该地址返回的 javascript 方法会被发起方执行, url 可以传参并仅支持 get 提交参数
b. 加载 script 脚本时候调用跨域的 js 方法进行回调处理(jsonp)
举例如下:
发起方
- function uploadScript(options){
- var head=document.getElementsByTagName("head")[0];
- var script=document.createElement("script");
- script.type="text/javasctipt";
- options.src += '?callback=' + options.callback;
- script.src=options.src;
- head.insertBefore(script,head.firstChild);
- }
- function callback(data){}
- window.onload=function(){// 调用
- uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
- }
接收方:
接收方只需要返回一个执行函数, 该执行函数就是请求中的 callback 并赋参数
3 使用 html5 的 postMessage:
html5 新功能有一个就是跨文档消息传输, 如今大部分浏览器都已经支持并使用(包括 ie8+), 其支持基于 web 的实时消息传递并且不存在跨域问题 postMessage 一般会跟 iframe 一起使用
举例如下:
父页面:
- <iframe id="myPost" src="http//www.a.com/main.html"></iframe>
- window.onload=function(){
- document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
- // 第二个参数表示确保数据发送给适合域名的文档
- }
a.com/main.html 页面:
- window.addEventListener("message",function(event){
- if(event.origin.indexOf("a.com")>-1){
- document.getElementById("textArea").innerHTML=event.data;
- }
- },false)
- <body>
- <div>
- <span id="textArea"></span>
- </div>
- </body>
这样在父页面加载完成后 main.html 页面的 textArea 部分就会显示 "显示我" 三个字
ajax 方法封装 code:
- ZIP_Ajax.prototype = {
- request: function(url options) {
- this.options = options;
- if (options.method == "jsonp") { // 跨域请求
- return this.jsonp();
- }
- var httpRequest = this.http();
- options = Object.extend({
- method: 'get',
- async: true
- },
- options || {});
- if (options.method == "get") {
- url += (url.indexOf('?') == -1 ? '?': '&') + options.data;
- options.data = null;
- }
- httpRequest.open(options.method, url, options.async);
- if (options.method == 'post') {
- httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
- }
- httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
- httpRequest.send(options.data || null); //get 请求情况下 data 为 null
- return httpRequest;
- },
- jsonp: function() {
- jsonp_str = 'jsonp_' + new Date().getTime();
- eval(jsonp_str + '=' + this.options.callback + ';');
- this.options.url += '?callback=' + jsonp_str;
- for (var i in this.options.data) {
- this.options.url += '&' + i + '=' + this.options.data[i];
- }
- var doc_head = document.getElementsByTagName("head")[0],
- doc_js = document.createElement("script"),
- doc_js.src = this.options.url;
- doc_js.onload = doc_js.onreadystatechange = function() {
- if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
- // 清除 JS
- doc_head.removeChild(doc_js);
- }
- }
- doc_head.appendChild(doc_js);
- },
- http: function() { // 判断是否支持 xmlHttp
- if (window.XMLHttpRequest) {
- return new XMLHttpRequest();
- } else {
- try {
- return new ActiveXObject('Msxml2.XMLHTTP')
- } catch(e) {
- try {
- return new ActiveXObject('Microsoft.XMLHTTP');
- } catch(e) {
- return false;
- }
- }
- }
- },
- _onStateChange: function(http, url, options) {
- if (http.readyState == 4) {
- http.onreadystatechange = function() {}; // 重置事件为空
- var s = http.status;
- if (typeof(s) == 'number' && s > 200 && s < 300) {
- if (typeof(options.success) != 'function') return;
- var format = http;
- if (typeof(options.format) == 'string') { // 判断请求数据格式
- switch (options.format) {
- case 'text':
- format = http.responseText;
- break;
- case 'json':
- try {
- format = eval('(' + http.responseText + ')');
- } catch(e) {
- if (window.console && console.error) console.error(e);
- }
- break;
- case 'xml':
- format = http.responseXML;
- break;
- }
- }
- options.success(format); // 成功回调
- } else { // 请求出问题后处理
- if (window.closed) return;
- if (typeof(options.failure) == 'function') {
- var error = {
- status: http.status,
- statusText: http.statusText
- }
- // 判断是否是网络断线或者根本就请求不到服务器
- if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
- // 是
- error.status = -1;
- }
- options.failure(error);
- }
- }
- }
- }
- };
使用方法:
ajax 调用举例:
- var myAjax = new ZIP_Ajax("http://www.a.com/you.php", {
- method: "get",
- data: "key=123456&name=yuchao",
- format: "json",
- success: function(data) {......
- }
})跨域请求调用举例:
- var jsonp = new ZIP_Ajax("http://www.a.com/you.php", {
- method: "jsonp",
- data: {
- key: "123456",
- name: "yuchao"
- },
- callback: function(data) {......
- }
- })
来源: http://www.jb51.net/article/134725.htm