【转载】ExtJS之Ext.Ajax.request用法详解

时间 2019-11-17

标签转载 extjs ext.ajax.request ext ajax request 用法详解栏目 Ajax 繁體版

原文原文链接

<!-- lang: js -->
<span style="font-size: medium;">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); 
                  }   
   
  });</span>

在Ext开发过程当中，基本上时刻须要用到异步请求，那么这个请求究竟是怎么执行的呢，咱们接下来来探讨下html

首先：Ext.Ajax类继承了Ext.data.Connection，为Ajax的请求提供了最大灵活性的操做方式再简单请求基础上咱们加上一个使用的java

说明的是这种请求一般都是放在触发某个事件的处理方法中的 url:就是咱们要请求的路径 params:里面的参数用逗号隔开，就是咱们要发出请求带的参数 success:是服务器处理成功返回 failure:是服务器处理失败返回重点讲的就是如何处理返回值信息，咱们的resp这个参数就显得很是重要了 resp是Ext构造的一个返回结果对象，如服务器端返回“this is a test！”（能够经过throw new Exception("this is a test!")简单实现)。那么返回将是以下内容：json

<!-- lang: java -->
    <span style="font-size: medium;">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</span>服务器

从上面结果能够看出来，最开始是一些状态属性，咱们也不经常使用，无论他。里面真正经常使用的是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 : Objectapp

请求所调用的参数。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（一般状况下会自动探测）less

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异步