ExtJS4.2：AJAX提交數據的三種方式，80%人都沒用過第三種

參考資料

HTTP：https://zh.wikipedia.org/wiki/HTTP

MIME：https://zh.wikipedia.org/wiki/MIME

國內博文：http://blog.csdn.net/gueter/article/details/1524447

第一種方式

示例代碼

 1 var data = {
 2     name: '段光偉',
 3     email: '[e-mail]'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'GET',
 9     params: { users: Ext.encode(data) }
10 });

 執行結果

服務器端代碼

1 context.Response.Write(context.Request.QueryString["users"]);

第二種方式

示例代碼

 1 var data = {
 2     name: '段光偉',
 3     email: '[e-mail]'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'POST',
 9     params: { users: Ext.encode(data) }
10 });

執行結果

服務器端代碼

1 context.Response.Write(context.Request.Form["users"]);

第三種方式

示例代碼

 1 var data = {
 2     name: '段光偉',
 3     email: '[e-mail]'
 4 };
 5 
 6 Ext.Ajax.request({
 7     url: '../handlers/GetData.ashx',
 8     method: 'POST',
 9     jsonData: data
10 });

 執行結果

服務器端代碼

1 StreamReader sr = new StreamReader(context.Request.InputStream);
2 context.Response.Write(sr.ReadToEnd());

ExtJs中Proxy的配置

配置為第一種方式的代碼

 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         actionMethods: {
13             create : 'GET',
14             read   : 'GET',
15             update : 'GET',
16             destroy: 'GET'
17         },
18         reader: {
19             type: 'json',
20             root: 'users'
21         },
22         writer: {
23             type: 'json',
24             encode: true,
25             root: 'users'
26         }
27     }
28 });

配置為第二種方式的代碼

 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         reader: {
13             type: 'json',
14             root: 'users'
15         },
16         writer: {
17             type: 'json',
18             encode: true,
19             root: 'users'
20         }
21     }
22 });

配置為第三種方式的代碼

 1 Ext.define('Demo.model.User', {
 2     extend: 'Ext.data.Model',
 3     fields: [
 4         { name: 'name' },
 5         { name: 'email' }
 6     ],
 7     proxy: {
 8         type: 'ajax',
 9         api: {
10             create: '../handlers/GetData.ashx'
11         },
12         reader: {
13             type: 'json',
14             root: 'users'
15         }
16     }
17 });

備注

這里沒有總結着三種方式的使用場景，請大家給我個建議吧。我大概的想法是這樣的。

• 獲取數據：如果參數少用第一種，否則就用第二種。多少看瀏覽器的限制。
• 發送數據：如果數據少就用第二種，否則就用第三種。多少看瀏覽器的限制。