【轉載】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異步

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。