`
JavaCrazyer
  • 浏览: 3011896 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

ExtJS之Ext.Ajax.request用法详解

阅读更多

Ext.Ajax.request({   
       url:'findbyid.action',
       params:{
        id:cell.getId()
        },
        success: function(resp,opts) { 
                             var respText = Ext.util.JSON.decode(resp.responseText);                                                 
                             name=respText.name;
                             oid=respText.id;  
                          findbyid(graph,cell,oid,name);
                             //Ext.Msg.alert('错误', respText.name+"====="+respText.id); 
                     }, 
                     failure: function(resp,opts) { 
                             var respText = Ext.util.JSON.decode(resp.responseText); 
                             Ext.Msg.alert('错误', respText.error); 
                      }   
       
      });

 在Ext开发过程中,基本上时刻需要用到异步请求,那么这个请求到底是怎么执行的呢,我们接下来来探讨下

 

 

首先:Ext.Ajax类继承了Ext.data.Connection,为Ajax的请求提供了最大灵活性的操作方式

再简单请求基础上我们加上一个使用的

 

说明的是这种请求通常都是放在触发某个事件的处理方法中的

url:就是我们要请求的路径

params:里面的参数用逗号隔开,就是我们要发出请求带的参数

success:是服务器处理成功返回

failure:是服务器处理失败返回

重点讲的就是如何处理返回值信息,我们的resp这个参数就显得非常重要了

resp是Ext构造的一个返回结果对象,如服务器端返回“this is a test!”(可以通过throw new Exception("this is a test!")简单实现)。那么返回将是
如下内容:
tId.1
status.200
statusText.OK
getResponseHeader.[object Object]
getAllResponseHeaders.Server: Apache-Coyote/1.1
Content-Type: text/html;charset=GBK
Content-Language: zh-CN
Content-Length: 108
Date: Wed, 31 Oct 2007 12:51:23 GMT
responseText.
<html>
<head>
<title>错误</title>
</head>
<body>
  <h1>错误:this is a test!</h1>
</body>
</html>
responseXML.
argument.undefined
 
从上面结果可以看出来,最开始是一些状态属性,我们也不常用,不管他。里面真正常用的是responseText与responseXML两个属性,那么这里面的responseText内容又被Ext用html包装了,但使用Ext.MessageBox展示出来正合适;reponseXML将在服务器端返回“text/xml”类型时使用。若服务器端返回是“text/json”类型时,客户端需要使用obj= Ext.util.JSON.decode(result.responseText);进行构造json对象,然后就可以正常使用了
具体操作返回值 我们用JSON就这么写
ServletActionContext.getResponse().setContentType("text/json; charset=utf-8");
ServletActionContext.getResponse().getWriter().write("{success:true,info:'更新信息成功',name:'" + oo.getName() + "',id:'" + id + "'}");
显然我这里返回的是JSON的值了(记住里面的属性值一定要加单引号)
 var respText = Ext.util.JSON.decode(resp.responseText); 
这个就可获得返回结果对象,要使用属性的话respText.id等都可直接用了
说到这里如果还想对这里面其他配置感兴趣的话可以参考下面的语句
  • url : String/Function (Optional)
    (可选项)发送请求的url,默认为配置的url。 若为函数类型那么其作用域将由配置项scope所指定。默认为配置好的URL。 The URL to which to send the request, or a function to call which returns a URL string. The scope of the function is specified by the scope option. Defaults to configured URL.
  • params : Object/String/Function (可选项)(Optional)
    一包含属性的对象(这些属性被用作request的参数)或一个编码后的url字串或一个能调用其中任一一属性的函数。 若为函数类型那么其作用域将由配置项scope所指定。 An object containing properties which are used as parameters to the request, a url encoded string or a function to call to get either. The scope of the function is specified by the scope option.
  • method : String (可选项)(Optional)
    该请求所用的http方面,默认值为配置的方法,或者当没有方法被配置时,如果没有发送参数时用get,有参数时用post。 The HTTP method to use for the request. Defaults to the configured method, or if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent. Note that the method name is case-sensitive and should be all caps.
  • callback : Function (可选项)(Optional)
    该方法被调用时附上返回的http response对象。不管成功还是失败,该回调函数都将被调用,该函数中传入了如下参数: The function to be called upon receipt of the HTTP response. The callback is called regardless of success or failure and is passed the following parameters:
    • options : Object
      >请求所调用的参数。The parameter to the request call.
    • success : Boolean
      请求成功则为true。True if the request succeeded.
    • response : Object
      包含了返回数据的xhr对象。The XMLHttpRequest object containing the response data. See http://www.w3.org/TR/XMLHttpRequest/ for details about accessing elements of the response.
  • success: Function (可选项)(Optional)
    该函数被调用取决于请求是否成功。该回调函数被传入如下参数: The function to be called upon success of the request. The callback is passed the following parameters:
    • response : Object
      包含数据的xhr对象。The XMLHttpRequest object containing the response data.
    • options : Object
      请求所调用的参数。The parameter to the request call.
  • failure : Function (可选项)(Optional)
    该函数被调用取决于请求失败。该回调函数被传入如下参数: The function to be called upon failure of the request. The callback is passed the following parameters:
    • response : Object
      包含数据的xhr对象。 The XMLHttpRequest object containing the response data.
    • options : Object
      请求所调用的参数。 The parameter to the request call.
  • scope : Object (可选项)(Optional)
    回调函数的作用域:回调函数"this"对象指针。默认值为浏览器窗口。 The scope in which to execute the callbacks: The "this" object for the callback function. If the url, or params options were specified as functions from which to draw values, then this also serves as the scope for those function calls. Defaults to the browser window.
  • form : Element/HTMLElement/String (可选项)(Optional)
    用来压入参数的一个<form>元素或<form>的标识。 The <form> Element or the id of the <form> to pull parameters from.
  • isUpload : Boolean (可选项)(Optional)
    如果该form对象是上传form,为true(通常情况下会自动探测)
  •   
  • headers : Object (可选项)(Optional)
    为请求所加的请求头。 Request headers to set for the request.
  • xmlData : Object (可选项)(Optional)
    用于发送的xml document。注意:它将会被用来在发送数据中代替参数任务参数将会被追加在url中。 XML document to use for the post. Note: This will be used instead of params for the post data. Any params will be appended to the URL.
  • jsonData : Object/String (可选项)(Optional)
    JSON data to use as the post. Note: This will be used instead of params for the post data. Any params will be appended to the URL.
  • disableCaching : Boolean (可选项)(Optional)
    设置为True,则添加一个独一无二的cache-buster参数来获取请求。 True to add a unique cache-buster param to GET requests                                   
  • 13
    8
    分享到:
    评论

    相关推荐

      ExtJS之Ext.Ajax.request用法详解.docx

      ExtJS之Ext.Ajax.request用法详解.docx

      ExtJS之Ext.Ajax.request用法详解.pdf

      ExtJS之Ext.Ajax.request用法详解.pdf

      ExtJS之Ext.Ajax.request用法详解 (2).docx

      ExtJS之Ext.Ajax.request用法详解 (2).docx

      ExtJS之Ext.Ajax.request用法详解 (2).pdf

      ExtJS之Ext.Ajax.request用法详解 (2).pdf

      ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

      ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

      ExtJS对Ajax的支持

      ##### 1.1 Ext.Ajax.request方法详解 `Ext.Ajax.request`方法是Ext.Ajax中最常用的功能,它允许开发者以配置参数的形式发送异步请求。这种方法简化了Ajax请求的过程,开发者只需提供请求URL、请求类型(默认为GET)...

      精通JS脚本之ExtJS框架.part2.rar

      12.1.1 Ext.Ajax.request方法详解 12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用...

      精通JS脚本之ExtJS框架.part1.rar

      12.1.1 Ext.Ajax.request方法详解 12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用...

      extjs的数据传递

      ExtJS作为一个强大的JavaScript框架,提供了多种方式进行数据传输,其中使用AJAX进行前后端通信是最常见的方式之一。本文将详细介绍如何在ExtJS中使用AJAX来实现前后端之间的数据传递,特别是关注JSON格式的数据传输...

      ext核心api详解(3)

      - 示例代码展示了如何使用`Ext.Ajax.request()`发起请求,包括设置URL、回调函数、头部信息以及参数等。 3. `Ext.data.Record` - `Ext.data.Record`是EXTJS中的数据模型,类似于.NET中的DataRow或SQL Server中的...

      extjs加载远程数据

      ExtJS中的`Ext.Ajax.request`方法是执行Ajax请求的核心方法。它接受一个配置对象作为参数,可以通过不同的配置项来定制请求行为。 **2. `url`属性** `url`属性用于指定请求的目标URL。例如,在示例一中,`url:...

      extjs帮助文档

      - **概述**:Ext类是ExtJS的核心基础类之一,它提供了一系列用于简化DOM操作和浏览器兼容性问题的方法。 - **常用方法**: - `Ext.isEmpty(value)`:检查给定值是否为空或未定义。 - `Ext.isObject(value)`:判断...

      extjs3.0 ajax 同步请求

      在 ExtJS 3.0 中,可以使用 `Ext.Ajax.request` 方法来发起 AJAX 请求。通过将 `async` 参数设置为 `false` 来实现同步请求。此外,还可以通过回调函数来处理请求成功或失败的情况。 #### 四、兼容性问题及解决方案...

      Extjs4.0学习指南(中文)

      ### Extjs4.0 学习指南核心知识点详解 #### 一、Extjs4.0 简介 ...通过以上介绍,我们可以了解到 Extjs4.0 的基础使用方法以及一些高级功能。这为开发者提供了强大的工具集来构建高效、美观的 Web 应用程序。

      ExtJS中文手册.pdf

      可以通过`Ext.Ajax.request`方法发送HTTP请求,并处理服务器返回的数据。 - **PHP**:EXT与PHP结合可以实现动态数据加载等功能。 - **ASP.Net**:同样支持与其他服务器端技术如ASP.Net集成。 - **ColdFusion**:...

      ExtJS 3.2的中文参考手册

      - **请求数据**: 使用 `Ext.Ajax.request` 方法发送异步请求获取数据,例如:`Ext.Ajax.request({ url: 'data.php', success: function(response) { var data = Ext.decode(response.responseText); console.log...

      extjs帮助文档pdf版

      ### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...

      extjs数据存储与传输详解

      **Ext.data**是Extjs框架中的核心组件之一,负责处理数据的加载、存储、转换以及与后端服务器之间的通信。它提供了一系列用于管理数据的类,包括Store、Reader、Writer、Proxy等。这些类共同协作,使得开发者能够...

    Global site tag (gtag.js) - Google Analytics