ExtJS之Ext.Ajax.request用法詳解

 

在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 thescope 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 thescope 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 theurl, 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)
( 指定要提交的表單id或表單數據對象)用來壓入參數的一個 <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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章