`

jQuery与Extjs的Ajax的跨域访问

    博客分类:
  • Ajax
阅读更多

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>标签的方式来实现跨域的访问!

0
0
分享到:
评论

相关推荐

    Ajax(Jquery与ExtJs)

    Ajax(Jquery与ExtJs) 框架对比 web前端开发

    Jquery-Extjs4.0框架

    **jQuery与Ext JS 4.0框架详解** jQuery和Ext JS是两种广泛应用于前端开发的JavaScript框架,它们各自有着独特的特性和优势。本篇将详细探讨这两个框架在Jquery-Extjs4.0中的结合使用及其核心概念。 **jQuery框架*...

    Ext.Ajax.request跨域

    标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...

    JavaScript框架jQuery和ExtJS的对比研究.pdf

    "JavaScript框架jQuery和ExtJS的对比研究" 本文将对JavaScript框架jQuery和ExtJS进行对比研究,旨在帮助Web开发者选择合适的JavaScript框架。 JavaScript框架的重要性 随着Web 2.0时代的到来,Web应用程序越来越...

    jquery/extjs智能提示所需文件spket.7z

    jQuery的核心特性包括选择器(用于高效地查找DOM元素)、DOM操作(添加、删除和修改元素)、事件处理(绑定和触发事件)以及Ajax交互(与服务器进行异步通信)。通过使用jQuery,开发者可以方便地实现动画效果、Ajax...

    tree 动态树 extjs ajax

    在给定的标题和描述中,主要涉及了ExtJS中的动态树(tree)功能以及与AJAX的结合使用。下面将详细介绍这些知识点。 **动态树(Dynamic Tree)** 动态树是ExtJS中的一种控件,用于展示层次结构的数据。它可以实时地...

    浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf

    "浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库,并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点,...

    extjs ajax tree(js动态树,无需递归)

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

    ExtJs Ajax 同步问题

    总之,理解和正确使用Ajax同步与异步是ExtJS开发中的重要技能。遇到问题时,应首先检查配置,然后关注服务器响应和回调处理,最后考虑优化请求策略以提高用户体验。对于具体的解决方案,建议查看博客链接中的内容,...

    jQuery模仿ExtJS之TabPanel最新

    将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 items&lt;array&gt; 选项卡元素集合 选项卡组件渲染后就会显示的选项卡元素集合,具体参数...

    浅谈JavaScript 库———jQuery, ExtJs 的对比研究

    ### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...

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

    在网站开发中,EXTJS AJAX常与后端框架如Spring、Django、Node.js等配合,实现数据的增删改查。同时,EXTJS还支持RESTful API,便于前后端分离的架构。 总结,EXTJS AJAX方式发送数据给后台服务器是Web开发中常见的...

    jQuery和ExtJs代码提示spket插件的下载和使用说明

    **jQuery和ExtJS代码提示Spket插件的下载与使用指南** 在开发JavaScript应用程序时,尤其是在使用特定框架如jQuery和ExtJS时,拥有一个能够提供代码提示和自动完成功能的工具是极其重要的。Spket IDE是一款针对...

    基于vs2010的省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs) 示例源代码

    本示例代码“基于vs2010的省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs) 示例源代码”正是为了解决这个问题。它提供了在Visual Studio 2010环境下,使用ASP.NET、jQuery和ExtJS三种不同...

    jQuery EasyUI仿Extjs界面

    尽管两者在定位上有所不同,jQuery EasyUI 通过其简洁的API和较低的学习曲线,为开发者提供了一种仿制ExtJS界面效果的方式。 在"jQuery EasyUI 仿 Extjs 界面布局"中,主要涉及以下知识点: 1. **布局管理**:...

    extjs对ajax的支持文档

    在ExtJS中,Ajax支持是核心功能之一,它使得在浏览器端与服务器进行异步通信成为可能,无需刷新整个页面。以下是对Ajax支持的详细说明: 1. **Ajax基础**: - Ext.Ajax是ExtJS中的核心模块,用于处理所有与Ajax...

    模仿extjs风格写的jquery combobox

    标题中的“模仿extjs风格写的jquery combobox”指的是一个基于jQuery的下拉选择框组件,它的设计灵感来源于ExtJS库的ComboBox控件。ExtJS是一款功能丰富的JavaScript框架,以其强大的组件化和数据绑定机制著名,而...

    Extjs Ajax 购物车

    在用户操作购物车时,如增加、删除商品,ExtJS通过AJAX调用与服务器进行通信,执行相应的数据库操作。服务器可能使用诸如MySQL、PostgreSQL等关系型数据库,或者MongoDB等NoSQL数据库来存储购物车数据。 **4. ExtJS...

    jquery extjs example

    综上所述,这些资源可以帮助开发者深入了解和实践jQuery与ExtJS的结合使用,以及如何利用Ajax进行异步数据交互,提升Web应用的用户体验。通过学习和应用这些知识点,你可以构建更加高效、互动的Web应用程序。

    extjs ajax同步请求所需js

    在ExtJS中,Ajax(异步JavaScript和XML)请求是数据交互的核心部分,用于与服务器进行通信,获取或更新数据。Ajax请求使得页面无需刷新即可更新部分内容,提高了用户体验。 标题中提到的"extjs ajax同步请求所需js...

Global site tag (gtag.js) - Google Analytics