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

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

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

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);
                      }  
      
       });

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

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
分享到:
评论

相关推荐

    Ext.Ajax.request跨域

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

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

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.Ajax.request 小问题收集

    这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小问题。 首先,`Ext.Ajax.request`的基本语法如下: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', // 可选值有...

    ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常

    `Ext.Ajax.request`是ExtJS中的一个方法,用于发起Ajax(异步JavaScript和XML)请求。它可以执行GET、POST、PUT、DELETE等各种HTTP操作。在默认情况下,这些请求是异步的,这意味着它们不会阻塞页面的其他操作,而是...

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

    这一实现过程涉及了ExtJs框架中的一些核心组件使用方法,需要开发者具备一定的ExtJs框架使用基础和JavaScript编程经验。通过上述方法,可以在不直接修改Ext.Ajax.request方法的前提下,实现一个用户友好的等待提示,...

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理.doc

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (1)Ext.FormPanel f.getForm().submit({ url:”... }, failure:function(c,v,e){} }) (2)Ext.Ajax.request Ext.Ajax.request({ url:”….”, params:{XX:xx….}, success: function (v,c) { var json=Ext.decode(v.r

    Ext ajax 上传文件

    Ext.Ajax.request({ url: 'upload.php', // 文件上传的服务器端处理程序 method: 'POST', useXhrUpload: true, headers: { 'Content-Type': undefined }, // 必须取消Content-Type以让浏览器自动设置 params: ...

    Ext+JSP实现数据提交

    3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...

    Ext3.1 Ajax 精简包以及使用方法

    在"ajax使用方法.txt"文件中,可能包含了更具体的使用示例和注意事项,如如何配置请求头、处理跨域问题、使用JSONP等。建议详细阅读此文件,以获取更全面的使用指南。 总之,Ext3.1的Ajax功能强大且灵活,能够帮助...

    Ext2.0.2的Ajax请求拦截示例

    然而,如果我们需要为整个应用的Ajax请求设置统一的拦截器,可以使用`Ext.Ajax.on`方法来监听`beforerequest`和`requestcomplete`事件: ```javascript Ext.Ajax.on('beforerequest', function(connection, options...

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

    Ext.Ajax.request({ url: "updateuser.aspx", params: { data: Ext.encode(record.data), // 将数据编码成字符串形式 id: record.id }, success: function() { alert(10); } }); grid.getView().refresh...

    ext_ext_knew7pi_ajax_

    在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于EXT AJAX的实例,包括如何使用EXT组件(如GridPanel、Menu和Window)与服务器进行AJAX交互,实现动态内容展示和用户...

    ext 前后台数据交互

    在handler函数中,我们使用Ext.Ajax.request方法来发送请求到后台,并将后台的响应返回到前台。 三、后台控制器 在上面的代码中,我们可以看到后台控制器shenHeQuanBuTongGuoXueLiShuJv方法,该方法用于处理前台...

    使用Ext2.0的Ajax连接ArcIMS例子

    - **请求配置**:使用`Ext.Ajax.request`方法发起POST请求,并配置请求头、请求参数等。 - **处理响应**:通过`success`和`failure`回调函数来处理服务器的响应。 #### 四、关键技术点解释 1. **XMLHttpRequest...

    extjs ajax同步请求所需js

    在使用`Ext.Ajax.request`方法时,设置`async`参数为`false`可以使请求变为同步。例如: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', async: false, // 设置为false表示同步请求 ...

Global site tag (gtag.js) - Google Analytics