`
yeminping
  • 浏览: 181063 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

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

    博客分类：
  • web
AjaxEXTJavaScriptjson应用服务器 
阅读更多

在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://www.cnblogs.com/hjf1223/archive/2008/05/31/1211221.html

分享到：
| JavaScript函数中arguments对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs3.0 ajax 同步请求

    在 ExtJS 3.0 中实现同步 AJAX 请求通常有两种方法：一种是利用原生的 XMLHttpRequest 对象；另一种是使用 Ext.Ajax.request 方法，并通过配置选项来实现。 ##### 1. 原生 XMLHttpRequest 实现 ```javascript var ...

    extjs ajax同步请求所需js

    在ExtJS中，Ajax请求通常通过`Ext.Ajax`对象来实现。与传统的异步请求不同，同步请求会阻塞浏览器，直到请求完成并返回结果。虽然这种方式在某些特定场景下可能有用，但大多数情况下，由于其可能导致页面无响应，...

    extjs对ajax的支持文档

    - Ext.Ajax是ExtJS中的核心模块，用于处理所有与Ajax相关的操作。它提供了发送异步请求、处理响应和错误处理等功能。 - 使用`Ext.Ajax.request`方法发起Ajax请求，该方法接受一系列参数，如URL、方法（GET或POST）...

    利用SSH和ExtJS框架实现Ajax的开发.pdf

    利用SSH和ExtJS框架实现Ajax的开发 本文主要介绍了如何利用SSH和ExtJS框架实现Ajax的开发。Ajax是一种异步交互技术，可以在不刷新整个页面的情况下更新页面中的部分内容，从而提高Web应用程序的用户体验度和响应...

    国信安Java培训之Ajax框架ExtJs

    总的来说，这个视频教程将为Java开发者提供一个快速了解和上手ExtJs框架的机会，使他们能够在Web开发中有效地利用Ajax技术，提升应用程序的交互性和用户体验。虽然内容可能较为基础，但对于初学者而言，是建立坚实...

    Ajax框架ExtJS3.0源代码

    4. **Ajax通信**：Ext.Ajax模块提供了一套完整的AJAX请求处理机制，包括异步请求、响应处理、请求头设置、超时控制等功能，使得与服务器的数据交换变得简单。 5. **事件驱动**：事件系统是ExtJS的重要组成部分，...

    ExtJs Ajax 同步问题

    在ExtJS中，Ajax请求主要通过`Ext.Ajax`对象来实现。`Ext.Ajax.request()`方法是进行Ajax请求的核心函数，它接受一系列参数，包括URL、方法（GET或POST）、请求数据、回调函数等。同步与异步的控制则通过`async`参数...

    extjs ajax tree（js动态树,无需递归）

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构，它利用AJAX技术来异步加载节点数据，无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度，尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    extjs实现的带标签、翻页动画的书

    在本项目中，“extjs实现的带标签、翻页动画的书”显然利用了ExtJS的组件化特性和动画功能，创建了一个模拟真实书籍阅读体验的应用。 首先，我们来看看“标签”这一概念。在Web应用中，标签（Tab）通常用来组织和...

    extjs最全项目 js struts Ajax

    通过研究项目代码和文档，可以掌握前端EXTJS界面的构建、后端Struts的控制器设计以及如何利用Ajax实现页面的异步通信。同时，全面的功能覆盖使得这个项目成为一个宝贵的参考资料，对于提升开发者在实际项目中的技能...

    Ext.Ajax.request2.x实现同步请求

    本文将详细解析如何利用`Ext.Ajax.request`实现同步请求，并探讨其背后的原理和注意事项。 首先，我们需要理解Ajax的本质，它是Asynchronous JavaScript and XML的缩写，虽然现在XML已不再是主要的数据交换格式，但...

    ajax extjs 入门ppt 我和ajax有个约会

    本资源是关于Ajax与ExtJS入门的PPT，通过这个教程，我们将一起走进Ajax的世界，并探讨如何利用ExtJS这一强大的JavaScript框架来实现更高效、更富交互性的Web应用。 Ajax的核心理念在于局部刷新，通过XMLHttpRequest...

    tree 动态树 extjs ajax

    动态树通常通过Ajax请求来获取并填充数据，从而实现异步加载，提高页面性能。这种特性使得树结构在不阻塞用户界面的情况下，能够逐步加载子节点，减少了初次加载时的数据量。 **ExtJS TreePanel** 在ExtJS中，动态...

    ExtJs异步请求和特殊用途

    在ExtJS中，异步请求（通常指的是Ajax请求）是实现动态数据加载、用户界面更新等关键功能的基础。Ajax框架允许开发者在不刷新整个页面的情况下与服务器进行通信，从而提供更流畅的用户体验。 1. **异步请求原理**：...

    ExtJs事件处理 ajax

    - ExtJs提供了`Ext.Ajax`类来处理Ajax请求。例如，发送一个GET请求： ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', success: function(response) { var result = Ext.decode(response....

    ajax框架之extjs2.0

    ExtJS内置了AJAX通信机制，通过Ext.Ajax对象可以发送异步请求到服务器，获取或提交数据。它支持XML、JSON等多种数据格式，以及自定义请求头和参数。 **8. Drag and Drop** 拖放功能在ExtJS 2.0中得到了很好的支持，...

    Extjs Ajax 购物车

    总结来说，"Extjs Ajax 购物车"是一个结合了ExtJS UI组件和AJAX技术的实例，展示了如何利用现代Web技术构建一个功能齐全、用户体验良好的在线购物系统。理解其工作原理和实现细节，对于提升Web开发技能非常有帮助。

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    在使用ExtJs开发Web应用程序时，实现用户在进行耗时的Ajax请求时的等待提示效果是一个常见的需求。ExtJs提供了Ext.Ajax.request方法来进行Ajax请求，但默认情况下，该方法不支持waitMsg属性，不像fp.form.submit方法...

    extjs spring tree ajax

    5. **数据绑定**：当Ajax请求成功返回时，ExtJS的TreePanel会自动将数据绑定到树结构中。如果数据包含子节点，这些子节点也会被动态加载。 6. **监听事件**：可以添加监听器来处理用户点击树节点等交互事件。例如，...

    EXTJS AJAX方式发送数据给后台服务器.rar

    本教程主要讲解如何使用EXTJS的AJAX方法向后台服务器发送数据，这对于实现动态交互和数据同步至关重要。 一、EXTJS AJAX基础 EXTJS中的AJAX调用通过Ext.Ajax对象来实现，它提供了一系列的方法，如`request`、`post...

Magicbox
Global site tag (gtag.js) - Google Analytics