利用script标签实现的跨域名AJAX请求（ExtJS）

最新推荐文章于 2024-01-14 08:22:30 发布
最新推荐文章于 2024-01-14 08:22:30 发布
阅读量888 收藏 1
点赞数
分类专栏： WEBGIS ajax javascript 文章标签： extjs ajax function xmlhttprequest javascript callback
javascript 同时被 3 个专栏收录
311 篇文章 0 订阅
订阅专栏
ajax
213 篇文章 0 订阅
订阅专栏
WEBGIS
123 篇文章 0 订阅
订阅专栏

在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不便。很多同行，研究了各种各样的解决方案：

1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。

2.通过请求当前域的代理，由服务器代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源，将要访问的目标资源提供给服务器，交由服务器去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。

3. 通过HTML中可以请求跨域资源的标签引用来达到目的，比如Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。

这里，我们来介绍第三种方案。先来看一段在网络上找到的例子（具体来源已经不得而知了，如果有人知道请提供原文链接，谢谢）：

JavaScript:

   1: var scriptBlock = document.createElement("script");
   2:  
   3: function StartGet()
   4: {
   5:     scriptBlock.src = "";
   6:     scriptBlock.src = "http://Domain2/GetData.aspx";
   7:     scriptBlock.type = "text/javascript";
   8:     scriptBlock.language = "javascript";
   9:     document.getElementsByTagName("head")[0].appendChild(scriptBlock);
  10:     scriptBlock.onreadystatechange = ReturnData;
  11: }
  12:  
  13: function ReturnData()
  14: {
  15:     //alert(scriptBlock.readyState);
  16:  
  17:     //uninitialized        Object is not initialized with data. 
  18:     //loading            Object is loading its data. 
  19:     //loaded            Object has finished loading its data. 
  20:     //interactive       User can interact with the object even though it is not fully loaded. 
  21:     //complete          Object is completely initialized. 
  22:  
  23:     if("loaded" == scriptBlock.readyState)
  24:     {
  25:         var div = document.getElementById("htmldiv");
  26:         div.innerHTML = a.project[0].name; //a是返回的json里面的变量
  27:     }    
  28: }

通过调用StartGet方法，发送一个跨域请求。用onreadystatechange事件监听请求结束事件，并且将返回的结果显示到页面上。

Thumbsup在这个事件函数中，a的对象是从何而来的呢？它就是通过http://Domain2/GetData.aspx输出的一段JSON对象，并被浏览器解析过。看看下面的服务器端的代码就应该明白了。

ASP.NET：

protected void Page_Load(object sender, EventArgs e)
{
   Response.Write("var a = {'project':[{'name':'a1'},{'name':'a2'}]};");
}

服务器通过这段代码输出一段JSON对象的脚本内容。

上面的例子就可以完整的描述通过Script来进跨域请求资源。但是，这里还有一个问题script标签的onreadystatechange事件并不是W3C标准的事件定义，只在IE中有效。下面的例子，它是ExtJS团队给出的对Ext.data.Connection类的扩展，以支持跨域的请求。通过它的扩展我们可以方便的使用Ext.Ajax来请求跨域资源，并且保证的资源回收的安全。下面先看看它的代码：

Ext.lib.Ajax.isCrossDomain = function(u) {
    var match = /(?:(\w*:)\/\/)?([\w\.]*(?::\d*)?)/.exec(u);
    if (!match[1]) return false; // No protocol, not cross-domain
    return (match[1] != location.protocol) || (match[2] != location.host);
};
 
Ext.override(Ext.data.Connection, {
 
    request : function(o){
        if(this.fireEvent("beforerequest", this, o) !== false){
            var p = o.params;
 
            if(typeof p == "function"){
                p = p.call(o.scope||window, o);
            }
            if(typeof p == "object"){
                p = Ext.urlEncode(p);
            }
            if(this.extraParams){
                var extras = Ext.urlEncode(this.extraParams);
                p = p ? (p + '&' + extras) : extras;
            }
 
            var url = o.url || this.url;
            if(typeof url == 'function'){
                url = url.call(o.scope||window, o);
            }
 
            if(o.form){
                var form = Ext.getDom(o.form);
                url = url || form.action;
 
                var enctype = form.getAttribute("enctype");
                if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
                    return this.doFormUpload(o, p, url);
                }
                var f = Ext.lib.Ajax.serializeForm(form);
                p = p ? (p + '&' + f) : f;
            }
 
            var hs = o.headers;
            if(this.defaultHeaders){
                hs = Ext.apply(hs || {}, this.defaultHeaders);
                if(!o.headers){
                    o.headers = hs;
                }
            }
 
            var cb = {
                success: this.handleResponse,
                failure: this.handleFailure,
                scope: this,
                argument: {options: o},
                timeout : this.timeout
            };
 
            var method = o.method||this.method||(p ? "POST" : "GET");
 
            if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
                url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
            }
 
            if(typeof o.autoAbort == 'boolean'){ // options gets top priority
                if(o.autoAbort){
                    this.abort();
                }
            }else if(this.autoAbort !== false){
                this.abort();
            }
            if((method == 'GET' && p) || o.xmlData || o.jsonData){
                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
                p = '';
            }
            if (o.scriptTag || this.scriptTag || Ext.lib.Ajax.isCrossDomain(url)) {
               this.transId = this.scriptRequest(method, url, cb, p, o);
            } else {
               this.transId = Ext.lib.Ajax.request(method, url, cb, p, o);
            }
            return this.transId;
        }else{
            Ext.callback(o.callback, o.scope, [o, null, null]);
            return null;
        }
    },
    
    scriptRequest : function(method, url, cb, data, options) {
        var transId = ++Ext.data.ScriptTagProxy.TRANS_ID;
        var trans = {
            id : transId,
            cb : options.callbackName || "stcCallback"+transId,
            scriptId : "stcScript"+transId,
            options : options
        };
 
        url += (url.indexOf("?") != -1 ? "&" : "?") + data + String.format("&{0}={1}", options.callbackParam || this.callbackParam || 'callback', trans.cb);
 
        var conn = this;
        window[trans.cb] = function(o){
            conn.handleScriptResponse(o, trans);
        };
 
//      Set up the timeout handler
        trans.timeoutId = this.handleScriptFailure.defer(cb.timeout, this, [trans]);
 
        var script = document.createElement("script");
        script.setAttribute("src", url);
        script.setAttribute("type", "text/javascript");
        script.setAttribute("id", trans.scriptId);
        document.getElementsByTagName("head")[0].appendChild(script);
 
        return trans;
    },
 
    handleScriptResponse : function(o, trans){
        this.transId = false;
        this.destroyScriptTrans(trans, true);
        var options = trans.options;
        
//      Attempt to parse a string parameter as XML.
        var doc;
        if (typeof o == 'string') {
            if (window.ActiveXObject) {
                doc = new ActiveXObject("Microsoft.XMLDOM");
                doc.async = "false";
                doc.loadXML(o);
            } else {
                doc = new DOMParser().parseFromString(o,"text/xml");
            }
        }
 
//      Create the bogus XHR
        response = {
            responseObject: o,
            responseText: (typeof o == "object") ? Ext.util.JSON.encode(o) : String(o),
            responseXML: doc,
            argument: options.argument
        }
        this.fireEvent("requestcomplete", this, response, options);
        Ext.callback(options.success, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, true, response]);
    },
    
    handleScriptFailure: function(trans) {
        this.transId = false;
        this.destroyScriptTrans(trans, false);
        var options = trans.options;
        response = {
            argument:  options.argument,
            status: 500,
            statusText: 'Server failed to respond',
            responseText: ''
        };
        this.fireEvent("requestexception", this, response, options, {
            status: -1,
            statusText: 'communication failure'
        });
        Ext.callback(options.failure, options.scope, [response, options]);
        Ext.callback(options.callback, options.scope, [options, false, response]);
    },
    
    // private
    destroyScriptTrans : function(trans, isLoaded){
        document.getElementsByTagName("head")[0].removeChild(document.getElementById(trans.scriptId));
        clearTimeout(trans.timeoutId);
        if(isLoaded){
            window[trans.cb] = undefined;
            try{
                delete window[trans.cb];
            }catch(e){}
        }else{
            // if hasn't been loaded, wait for load to remove it to prevent script error
            window[trans.cb] = function(){
                window[trans.cb] = undefined;
                try{
                    delete window[trans.cb];
                }catch(e){}
            };
        }
    }
});

在reqeust方法中，做好参数的处理工作后（这些都是原先的实现）。在发送请求时，判断是否有scriptTag 属性（值为true)，如果scriptTag有定义并且为true，那么调用scriptRequest 来通过script标签发送跨域请求。在请求中，它会将所有的参数拼接成地址传参的方式，并且还有一个callback参数（或自己指定的参数名），用于标识客户端在接收返回的回调方法（在服务器端生成的javascript代码中调用），这个回调函数会根据不同的请求动态生成，在同一个上下文环境中每次请求的回调函数名都不一样。通过指定参数就可以解决在script标签中没有onreadystatechange事件定义带来的麻烦。在出错处理上，它使用的是超时的出错处理，因为没有事件，所以它会有一个请求超时时间延迟函数调用来进行资源的回收工作。

经过上面的扩展，我们在使用Ext.Ajax.request方法时，只需要新增一个标志标识它是一个跨域请求：scriptTag: true 。如下的调用：

Ext.Ajax.request({
    url: 'http://localhost:8080/aspicio/getxml.do',
    params: {
        listId: 'CountryListManager141Grid509',
        format: 'xml'
    },
    scriptTag: true, // Use script tag transport
    success: function(r) {
        console.log(r);
    }
});

下面是一段服务器端的示例代码：

   1: //取得客户端回调函数名
   2: string callBack = Reqeust.QueryString("callback");
   3: //其它参数均可以通过Reqeust.QueryString得到。
   4: //向客户端输出javascript调用。
   5: Response.Write(callBack + "('[value:0]')";);

通过服务器发起对回调函数的调用，从而完成整个跨域请求过程。

阿不 http://hjf1223.cnblogs.com
extJs中通过jQuery的ajax进行跨域(即jsonp进行跨域)获取数据
CHEN的技术积累
08-16 3772
extJs中通过jQuery的ajax进行跨域(即jsonp进行跨域)获取数据
ajax跨域jsonp返回值,JSONP的原理和使用
weixin_33158887的博客
08-06 3475
一、什么是JSONP首先我们得先了解JSONP是怎么产生的。最开始跨域请求数据没有现在方便，Ajax直接请求普通文件存在跨域无权限访问的问题，然后聪明的程序员想出了一套非官方的解决办法，程序员发现凡是带有“src”这个属性的标签都拥有跨域的能力，比如、、。早期的程序员也是这么干的，最后程序员们发现最好的解决办法就是——动态创建script标签发起请求，然后从后端拿到请求回来的数据进行处理，再然后把...
动态创建script标签实现跨域资源访问的方法介绍
09-04
本篇文章主要是对动态创建script标签实现跨域资源访问的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
script 跨域请求
LeeTse的博客
02-23 385
index.php<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <sc
动态script标签（jsonp）-跨域调用
tann888的博客
10-10 1085
跨域是指不符合同源策略； 同源策略： （1）协议相同； （2）端口号相同； （3）域名相同； http://www.demo.com http://www.demo.com:8080 https://www.demo.com     http://www.demo.com http://www.demo.com/index.html     原生代码： clien...
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
前端常见面试题
DJxyyy的博客
09-27 481
前端常见面试题 1、 响应式布局如何实现 响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好 的体验。方案一：百分比布局 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、 font-size 不能用百分比设置的，先看一个简单例子： 顶部是利用设置图片 width: 50%来适应不同的分辨率，由于原始图片高度 不同，所以第一张图片顶部会有空白，这种情况最好两张图片宽高保持
面试题集锦
weixin_38289699的博客
04-19 956
一、HTML和CSS你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)每个HTML文件里开头都有个很重要的东西，D...
Script标签解决跨域
等，你的到来。
11-16 6188
关于跨域，首先我们来讲一下基础知识。 –什么是跨域请求：从一个域下去访问另一个域下的脚本(js/php)或者文档结构(html)。 –为什么跨域：因为我们往往需要其他域下的数据，另一个因为同源策略的限制，不进行跨域无法直接请求另一个域的数据。 –怎么样进行跨域请求：img、a、form、link、iframe可以跨域，但是没有返回值，所以不进行使用，最主要使用的是script标签。然后，通过j
script 解决 跨域访问
weixin_30690833的博客
05-23 235
跨域访问，简单来讲，就是A服务器的javascript代码访问B服务器，包括提交内容、获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。写过跨域访问 ajax 的朋友相信都遇到过被告知“没有权限”的情况。通过 XMLHttp 来发送数据给 Bookmark 服务器的尝试失败了。最终，在一篇文章中看到，与 iframe 不同，如果 A 网站从 B 网站加载 javascript ， A 网...
script跨域请求前端
u012197726的博客
08-13 1191
通过script标签实现跨域 HTML 页面来个按钮 <button id="btn">点击请求数据</button> JS 调用发送跨域请求 const btn = document.getElementById('btn') btn.onclick = function () { jsonp({ // 天气预报 url: 'https://wis.qq.com/weather/common', data: {
JavaScript跨域的6种方法
明天回火星
07-14 783
1 通过JSONP跨域（此方法对全域跨域和子域跨域都满足） Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。 例如有个1.html，其中的代码需要获取一个不同域上的json数据，假设这个json数
script 标签中 crossorigin 属性说明
kill370354的博客
09-28 816
一个令我困惑的问题：为什么跨域脚本一定要加crossorigin属性，才可以捕获到错误？深入研究了一番……
JavaScript解决跨域常用办法
weixin_43450479的博客
06-28 274
跨域 跨域的产生原因 处于对安全方面的考虑，浏览器采取同源策略，即前端不允许跨域调用后端接口 所谓同源/同域：协议，域名，端口 三者都相同才是同源/同域 1. JSONP JSONP（JSON with padding），解决方案：script标签不受浏览器同源策略的影响（script标签的开放策略） 前端设置好回调函数，并将回调函数作为请求url中的参数 服务器通过请求url获取回调函数，并将回调函数放在响应中返回 浏览器收到响应，由于相应的内容是js脚本，浏览器会执行脚本从而达到了跨域的作用 //s
跨域问题，解决方案（前后端代码）
最新发布
kkkys_kkk的博客
01-14 1208
因此，利用 `` 标签的这两个特性，可以通过动态创建 `` 标签，给 `src` 属性设置跨域的 URL，从而实现在浏览器中跨域请求资源的效果。1. JSONP（JSON with Padding）：通过动态创建 `` 标签，利用 `` 标签可以跨域请求数据的特性，将响应数据包装在回调函数中返回，通过调用回调函数来获取数据。3. 代理：通过服务器端进行中转，将前端的请求发送到同源的后端，由后端代为请求目标资源，并将结果返回给前端。
【Web】跨域请求
qq_45677671的博客
02-23 1306
文章目录同源策略实现一个跨域请求JSONPscript 标签的本质配置代理正向代理反向代理 同源策略 同源策略是由浏览器给的 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求 当我们向别人的服务器发送请求的时候，就会被浏览器阻止了 什么是“别人的服务器”？ 当 请求协议/域名/端口号 有任意一个不同的时候，那么就算是别人的服务器 这个时候就会触发同源策略 我们管触发了同源策略的请求叫做跨越请求 实现一个跨域请求 有的时候我们是需要实现跨域请求的 我们需要多个服务器给一个页面提供数据 那
EXTJS 3.0 中 AJAX 同步请求的实现方法
在 ExtJS 3.0 中，AJAX 请求的实现是基于浏览器的 XMLHttpRequest 对象的。在不同的浏览器中，XMLHttpRequest 对象的实现有所不同。例如，在 IE 浏览器中，我们需要使用 `ActiveXObject` 对象，而在其他浏览器中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值