zoukankan      html  css  js  c++  java
  • Ext JS_Sencha Ext JS 4.0.3 利用 Ext.Ajax.request({…}) 发出 Ajax 请求

    Ext.Ajax.request({…})


    该方法向远程服务器发送一个HTTP请求。

    注意:Ajax服务请求是异步的。服务器的响应到达后,这个调用将会返回。在回调函数中处理回调返回的数据。

    参考 http://dev.sencha.com/deploy/ext-4.0.2a/docs/index.html#/api/Ext.Ajax-method-request

     

    例子


    本例,页面ExtNetAjaxRequest.aspxExtNetAjaxRequestPage.aspx页面发送一个Ajax请求,如果没有请求变量,则返回全部,否则返回指定的数据。

    ExtNetAjaxRequestPage.aspx 响应页面创建数据源

    在该页面创建数据源,并在Page_Load事件里判断是否有参数传过来。如果有,则按参数返回相应的值。否则,返回全部数据。

     1 protected void Page_Load(object sender, EventArgs e)
    2 {
    3 if (!X.IsAjaxRequest)
    4 {
    5 if (Request["id"] == null)
    6 {
    7 DataTable dt = this.CreateDataSource();
    8 string json = Ext.Net.JSON.Serialize(dt);
    9 Response.Write(json);
    10 Response.End();
    11 }
    12 else
    13 {
    14 DataTable dt = this.CreateDataSource();
    15 DataRow[] dr = dt.Select("id=" + Request["id"]);
    16 Response.Write(Ext.Net.JSON.Serialize(dr[0].Table));
    17 Response.End();
    18 }
    19 }
    20 }
    21 private DataTable CreateDataSource()
    22 {
    23 DataTable dataSource = new DataTable();
    24 dataSource.Columns.Add(new DataColumn("ID", typeof(int)));
    25 dataSource.Columns.Add(new DataColumn("NAME", typeof(string)));
    26 for (int i = 0; i < 100; i++)
    27 {
    28 DataRow dr = dataSource.NewRow();
    29 dr[0] = i;
    30 dr[1] = "名称" + i;
    31 dataSource.Rows.Add(dr);
    32 }
    33 dataSource.AcceptChanges();
    34 return dataSource;
    35 }

    ExtNetAjaxRequest.aspx 请求Ajax服务

     1 Ext.Ajax.request({
    2 url: 'ExtNetAjaxRequestPage.aspx',
    3 type: 'post',
    4 success: function(response) {
    5 var respText = response.responseText;
    6 var json = Ext.encode(respText);
    7 var obj = Ext.decode(respText);
    8
    9 Ext.net.Notification.show({
    10 iconCls: 'icon-information',
    11 pinEvent: 'click',
    12 html: respText,
    13 title: 'response',
    14 800,
    15 height: 300
    16 });
    17 ......
    18 });

     1 var find = function() {
    2 var txt = Ext.getCmp("TextField1");
    3 var val = txt.getValue();
    4 Ext.Ajax.request({
    5 url: 'ExtNetAjaxRequestPage.aspx',
    6 type: 'post',
    7 params: { id: val },
    8 success: function(response) {
    9 var obj = Ext.decode(response.responseText);
    10 Ext.net.Notification.show({
    11 iconCls: 'icon-information',
    12 pinEvent: 'click',
    13 html: obj[0].ID + obj[0].NAME,
    14 title: 'Result',
    15 800,
    16 height: 300
    17 });
    18 }
    19 }
    20 )
    21 };

    第一个方法不带参数的Ajax请求;第二个方法是带参数的。

    说明


    1,在ExtNetAjaxRequestPage.aspx页面创建一个DataTable,然后系列化到页面里,供ExtNetAjaxRequest.aspxAjax请求使用。

    2,Ext.Net向某个页面发送Ajax请求使用Ext.Ajax.request({…}),大括号中是请求时的相关设置,包括请求的页面(可以是页面,如.aspx.html,也可以是文件),请求类型(如post),超时时间、是否传递变量等等,以及回调函数,如successfailure

    3,Ext.encode转换成json字符串;Ext.decodejson字符串转换成object。

    4,例子里 四个Ext.net.Notification.show({…}) 仅仅以各种方式将回调的字符串显示出来。



    下载 Demo

  • 相关阅读:
    exe4j的使用
    java线程生命周期及其对应方法
    自动登录开心网
    java小知识点
    java工具类目录
    java 上传图片
    eclipse+svn
    maven
    读propert文件
    hadoop学习
  • 原文地址:https://www.cnblogs.com/liuning8023/p/2135801.html
Copyright © 2011-2022 走看看