`

Ext.Ajax教程,及Get和Post请求的使用拾遗

阅读更多

于Ajax请求的使用为RIA(Rich Internet Applications)的开始,但大多数刚接触富客户端的同学还不是很清楚具体的使用方法,所以根据自己的使用心得写下此篇Blog留作拾遗。

(PS: 看网上大多数的技术Blog都写的毫无生气,只有严谨的态度,所以我一直在努力尝试使用生趣的方式展现技术文章,毕竟希望技术能带给大家快乐,乐知才最重要,生活才最最重要)

 

大概在2005年末,开始接触Ajax技术,开始于对《Ajax基础教程-Foundations of Ajax》 一书的阅读,其深入浅出的讲述方式、典型的实例和简洁清晰的代码,让这本书很适合刚开始使用Ajax技术的Web开发人员用来基础学习。

 

 

此书中的例子是最原始的Ajax使用方式,没有任何的封装及使用JS类库,也因当时的Prototype类库不是很成熟。对于这种未加封装的Ajax使用,自然就会面临Web浏览器类型的判别及数据乱码的问题,所以以这种方式写Ajax请求不免很多的判断条件的繁琐代码,让人看起来以为你是在coding凑数,无良的骗取钱财。以下是这些繁琐代码的示例,有兴趣的同学可以研究一下:

 

// Origin Ajax program paradigm

var xmlHttp;

// 判断浏览器,决定使用哪种创建请求的方式
function createXMLHttpRequest(){
	if(window.ActiveXObject){
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}
}

// 回调方法中需判断浏览器的返回状态
function callBack(){
	if(xmlHttp.readyState == 4){
		if(xmlHttp.status == 200){
			var message =xmlHttp.responseText;
			if(message == 'T'){
				alert("Insert successful!");
				opener.location.reload();
				self.close();
			}
			else if(message == 'F'){
				alert("Insert failed!");
			}
		}
	}
}

// 
function sendSaveURL(){

	var tableId = $F("tableId");
	tableId = trim(tableId);
	var validateValue = inputValidate(
	'表名:tableId:text',
	'机构:bankId:text',
	'币种:currId:text',
	'日期:reportDate:date',
	'申请理由:reason:text'
	);
	
	if(validateValue){
		var queryString = Form.serialize("form1");
                // 需使用JS添加时间参数,确保服务器端的请求认定
		var url = "saveRedoApply.do?timeStamp=" + new Date().getTime();
		createXMLHttpRequest();
               // 设置xmlHttp请求的报文头
		xmlHttp.open("POST",url,false);	
		xmlHttp.onreadystatechange = callBack;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
		xmlHttp.send(queryString);
		return xmlHttp.responsText;
	}

}

 

上面代码中的方法已做了注释,从中可以看出未加任何封装的Ajax请求的繁琐。后来自己封装了以上方法才看起来简洁些。

根据定义,Ajax请求的生命周期为:

 

  1. Created (创建)
  2. Initialized (初始化)
  3. Request sent (发送请求)
  4. Response being received (can occur many times, as packets come in) (接收响应过程)
  5. Response received, request complete (已接收响应,请求完成)

这也是开发前必须清楚的事项。

 

随后Prototype中也提供了比较稳定易用的Ajax封装,这使得使用Ajax请求不必再了解Origin般原汁原味的繁琐处理了。

下面是Prototype的Ajax实例:

 

new Ajax.Request('/your/url', {
  onSuccess: function(transport) {
      // yada yada yada
  }
});

 可以看出来封装后的确很易用,概念也明朗了许多。

 

然后是ExtJS中的Ajax对象提供的请求方法,很类似于Prototype的封装及使用方式。就Get及Post两种方式说明一下

其使用方式,首先来看Get方式:

 

Ext.Ajax.request({
			url: 'dashboardChartFormProvider.do',
			success: function(response) {
		    	        // 接收响应文本的示例
				var str = response.responseText;
                                // 将响应转换为对象的示例
				var obj = response.responseText.evalJSON();
			},
			failure: Ext.emptyFn,
			params: { pid: parmId }
		});
 

Ext的ajax默认的请求方式为Get,所以也就不用特别声明使用何种请求方式了。url 是请求的链接,success 是请求成功后的回调方法,failure 是失败后的回调方法,params 为请求参数。

 

在这里特别要说明的是对于success和failure方法的理解,对此有很多小盆友有误解,认为后台成功后设置响应参数success为true自然就调用成功的处理方法,否则则调用十倍的处理方法,但发现不管后台(backend)处理逻辑失败与否最后调用的都是Ajax的success方法,而不解。其实这里的ajax的success方法指的并不是逻辑上的成功或失败,而指的是http通讯的响应状态成功与否,也就是在上面origin那段代码示例中判断的xmlHttp.status == 200的响应状态。这样我们也就明确了回调方法的使用,对于逻辑上的成功失败的判断需要我们自己在success中完成并添加对应的处理方法。

 

另附xmlHttp.statu状态码,具体如下:

 

100:Continue
101:Switching Protocols
102:Processing
200:OK
201:Created
202:Accepted
203:Non-Authoriative Information
204:No Content
205:Reset Content
206:Partial Content
207:Multi-Status
300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
306:(Unused)
307:Temporary Redirect
400:Bad Request
401:Unauthorized
402:Payment Granted
403:Forbidden
404:File Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Time-out
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large
414:Request-URI Too Large
415:Unsupported Media Type
416:Requested range not satisfiable
417:Expectation Failed
422:Unprocessable Entity
423:Locked
424:Failed Dependency
500:Internal Server Error
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout
505:HTTP Version Not Supported
507:Insufficient Storage 
 

最后让我们看看Post方式的请求方法,Post可以使用url或form的方式来发送请求。首先是form的方式,示例代码如下:

 

Ext.Ajax.request({
        form: 'formId',
        method: 'POST',
        success: function(response, opt) {
           // TODO: finish this method
        },
        failure: Ext.emptyFn
    });
<!-- 表单示例 -->
<form id='foo' method='post' action='something.do'>
  <input name='parm1' type="text" />
  <input name='parm2' type="text" />
  <input name='parm3' type="text" />
</form>

 方法很简洁,不过不足之处是需要由你来维护表单中的值,而且html也中的代码也会因为form而增多。而使用url的方式就会利用js的对象技术而使html页更简洁些,示例如下:

 

Ext.Ajax.request({
        url: 'something.do',
        method: 'POST',
        params: form,
        success: function(response) {
           // TODO: finshed this method here
        },
        failure: Ext.emptyFn
    });
/**
 * Object for ajax request defined
 */
function Object1(){
	this.parm1 = "";
	this.parm2 = "";
	this.parm3 = "";
}

ChartForm.prototype.getParm1 = function(){
	return this.parm1;
}

ChartForm.prototype.setParm1 = function(parm1){
	this.parm1= parm1;
}

 

 其中params中对应填入你的js请求的Object,此种方式优点在于利用JS的面向对象的封装方式来做ajax请求,代码更为简洁,设计思路更为清晰。而这样前台为JS对象,返回后将其映射为java对象的做法让你可以利用OO的思想来开发Web程序,这也是目前JS编程的流行的做法,你可以更多的关注领域模型的设计,对于你来说前后台交互所面对的都是业务对象。

 

至此,我已简要的向你介绍了Ajax的请求使用历程。通过此篇你可以学习到ajax的原始请求形式,利用类库简化后的请求,及如何使用JS面向对象的方式来与后台交互,还有Ajax的生命周期及状态码的意义。值得注意的是ext对于ajax封装后的success方法的理解,这里的成功指的是http通讯状态的成功而非方法逻辑上的成功与否。

 

让我们继续关注Ajax能带给我们什么惊喜。

 

 

2
0
分享到:
评论
1 楼 dk101 2010-08-05  
我对这些知识一知半解,看完楼主的解释,清楚多了,对楼主心得的共享表示感谢!

相关推荐

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.Ajax.request跨域

    标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...

    ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常

    在处理异步和同步请求时,Ext.Ajax是ExtJS中的一个关键组件。标题提到的"ext-basex.js进行Ext.Ajax.request同步请求 FF无法正常"问题,涉及到浏览器兼容性和异步/同步请求的理解。 `Ext.Ajax.request`是ExtJS中的一...

    Ext.Ajax.request 小问题收集

    在EXTJS框架中,`Ext.Ajax.request`是进行异步AJAX通信的核心方法,它提供了与服务器端交互的能力,支持GET、POST等多种HTTP请求方式。这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...

    Ext.get与Ext.fly的区别

    我们可以使用`Ext.get`和`Ext.fly`来操作这些元素: ```javascript // 使用Ext.get var el = Ext.get('foo'); el.hide(); // 使用Ext.fly var flyEl = Ext.fly('bar'); flyEl.show(); ``` 在这个例子中,`Ext.get...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    Ext.js教程和Ext.js API

    通过结合中文API文档和教程,开发者可以全面掌握Ext.js 3.0的使用,从而构建出高效、用户体验良好的Web应用程序。虽然现在有更新的版本(如Ext JS 7.x),但学习旧版本有助于理解框架的发展历程,同时许多核心概念在...

    Ext2.0.2的Ajax请求拦截示例

    然而,如果我们需要为整个应用的Ajax请求设置统一的拦截器,可以使用`Ext.Ajax.on`方法来监听`beforerequest`和`requestcomplete`事件: ```javascript Ext.Ajax.on('beforerequest', function(connection, options...

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理.doc

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理

    Ext中Ajax的应用

    Ext.Ajax.request 方法是 ExtJS 框架中用于执行 Ajax 请求的核心功能之一,它允许开发者轻松地向服务器发起异步请求并处理响应结果。此方法提供了非常丰富的配置选项,能够满足大多数情况下对于 Ajax 通信的需求。 ...

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (1)Ext.FormPanel f.getForm().submit({ url:”... }, failure:function(c,v,e){} }) (2)Ext.Ajax.request Ext.Ajax.request({ url:”….”, params:{XX:xx….}, success: function (v,c) { var json=Ext.decode(v.r

    Ext3.1 Ajax 精简包以及使用方法

    `Ext.Ajax`提供了丰富的API,可以进行POST、GET、PUT、DELETE等多种HTTP请求,并且支持异步和同步操作。下面将详细介绍`Ext.Ajax`的一些关键方法和使用场景: 1. **发送请求:** `Ext.Ajax.request`是核心方法,...

    extjs ajax同步请求所需js

    在使用`Ext.Ajax.request`方法时,设置`async`参数为`false`可以使请求变为同步。例如: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', async: false, // 设置为false表示同步请求 ...

    Ext.data.Store的基本用法

    这样做会使得`Ext.data.Store`在向服务器请求数据时自动添加`sort`和`dir`参数,从而让服务器端能够根据这些参数进行排序处理。 ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({...

    Ext ajax 上传文件

    在Ext JS中,我们可以使用`Ext.Ajax`类来发送Ajax请求。这个类提供了异步请求的接口,支持POST、PUT、DELETE等HTTP方法。对于文件上传,我们需要设置`useXhrUpload`为true,并将文件字段添加到FormData对象中。以下...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

Global site tag (gtag.js) - Google Analytics