jQuery与Extjs的Ajax的跨域访问

最新推荐文章于 2021-08-06 22:14:14 发布

最新推荐文章于 2021-08-06 22:14:14 发布 · 277 阅读

文章标签：

#Ajax #jQuery #json #jsonp #EXT #ViewUI

Ajax 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用jQuery和Extjs进行跨域请求的方法，并对比了两种方式的实现细节。文中详细展示了如何配置请求参数、处理响应数据及自定义HTTP头部信息。

jquery的代码:

  <script>
    $(function() {
      //      $.getJSON("http://10.128.3.104/edi/rest/GetBillCaseInfo?_out=json&_callback=?", function(json) {
      //        alert(json.ROWSET.ROW[0].CaseName);
      //      });

      $.ajax({
        async:false,
        //url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo', //跨域的dns/document!searchJSONResult.action,
        url: 'testjson.do',
        type: "GET",
        dataType: 'jsonp',
        jsonp: '_callback',
        data: '_out=json',
        timeout: 5000,
        header: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='},
        beforeSend: function(request) {
          //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
        },
        success: function (json) {  //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
          alert($.toJSON(json));
          alert($.toJSON(json.ROWSET.ROW[0]));
        },
        error: function(request) {
          //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
          //请求出错处理
          alert("请求出错(请检查相关度网络状况.)");
        }
      });

    });
  </script>

Extjs的代码:

      ss = new Ext.data.ScriptTagProxy({
        //url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        url: 'testjson.do',
        callbackParam: "_callback",
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='}
      });
      ss.load({'_out': 'json'},
              new Ext.data.JsonReader({root:"ROWSET.ROW"},
                      [{name: 'CaseCode', mapping: 'CaseCode'},
                        {name: 'CaseName', mapping: 'CaseName'}]),
              function(recordsBlock, arg, isok) {
                alert(Ext.encode(recordsBlock));
                alert(Ext.encode(recordsBlock.records[0].data));
              }
              );

      Ext.Ajax.request({
        url: 'http://10.128.3.104/edi/rest/GetBillCaseInfo',
        //url: 'testjson.do',
        scriptTag: true,
        success: function(req) {
          alert(req.responseText);
        },
        failure: function(req) {
          alert(req.responseText);
        },
        headers: { 'Authorization': 'Basic YWRtaW46YWRtaW4xMjM='},
        params: { _out: 'json' }
      });

注意:无论是jQuery还是Extjs都不能发送自定义HTTP的信息,因为他们都是通过动态生成<scripe>标签的方式来实现跨域的访问!