AJax技术

JavaCrazyer的ItEye(codewu.com)技术博客

字号+ 作者:H5之家 来源:H5之家 2018-01-19 16:00 我要评论( )

Ext.Ajax.request({ url:

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

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

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

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

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

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
  • 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)

     

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • Ajax请求发送成功但不进success的解决方法

      Ajax请求发送成功但不进success的解决方法

      2018-01-19 16:00

    • Ajax有什么用途?

      Ajax有什么用途?

      2018-01-19 15:01

    • Ajax push与pull模式的比较 技术核心

      Ajax push与pull模式的比较 技术核心

      2018-01-19 12:08

    • AJAX技术之网易滚动新闻简单实现(附源码)

      AJAX技术之网易滚动新闻简单实现(附源码)

      2018-01-18 16:08

    网友点评
    b