Ext3.4 Ext.Ajax.request 的同步与异步

前端之家收集整理的这篇文章主要介绍了Ext3.4 Ext.Ajax.request 的同步与异步前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、问题的引出: 在实现动态生成grid表头的需求时,需要用ajax进行同步请求,async:false参数却死活不起作用,google了好半天才发现原来ext3.x本不支持ajax的同步请求,瞬间凌乱。ext4就开始支持了。

2、ext3.4 Ext.Ajax.request的源码解读:

其实作为一个小菜,我还不是很会阅读源码,只是能看个大概。

2.1 确认项目使用的ext版本

在引用js的jsp页面上找引用的js文件,如果出现类似于".../ext3.4/../*.js"的东西,恭喜你,不用继续了;

否则,找“<%@ page import="com.www.uiframe.util.UiframeUtil"%>”貌似是引用框架通用东东的语句,一般UiframeUtil.java里会有对当前页面需要引用的js文件的处理,找到为止。

2.2 找到ext3.4目录下的ext-base.js文件

某行处有代码如下:

Ext.lib.Ajax = function(){ ......}

........

return asyncRequest(method || options.method || "POST",uri,cb,data);

............

function asyncRequest(method,callback,postData) { ...... }


以上可以看出,文件中只有asyncRequest函数的定义和调用, 而没有出现syncRequest函数的定义和调用,一切都已明了,这就是为什么ext3.4 Ext.Ajax.Request只能进行Ajax的异步请求。

3、如何在ext3.4 中使用ajax进行同步请求呢?

这个是在网上google来的,文章出处:http://reason2003.blog.163.com/blog/static/1164994692009103012317465/

现将全文粘贴如下:

------------------------------------------------------ 引用文章原文 the beginning --------------------------------------

Ext.Ajax.request在2.x是异步请求的,这样话在当前请求没有完成之前就不能在它的外部使用它的返回值,在下面这个表单验证中如果不是同步请求的话就有问题了,如:

var text = new Ext.form.TextField({
fieldLabel : '名称',
height : 23,
width : 400,
id : 'flowName',
name : 'flowName',
allowBlank : false,
blankText : '名称不能为空',
validateOnBlur : true,
validationEvent : true,
validator : function() {
var resultValue;
Ext.Ajax.request({
url : '',
sync:true,
params : {
name : text.getValue()
},
success : function(response,options) {
var responseArray = Ext.util.JSON.decode(response.responseText);
resultValue=responseArray.resultValue;
}
});
if (resultValue!=null && resultValue!="") {
text.invalidText = "该名称己经存在,请重新输入!";
return false;
} else {
return true;
}
},
anchor : '95%'
});

上面是通过修改ext-base.js中的Ext.lib.Ajax.request来实现同步请求:

/**
Adding a synchronous request to the Ext asynchronous only mode of operation.

History: coded from Ext 2.2.

Additional configs.

@param {Object} options
@config {Mixed} [sync] include this for a synchronous request
*/
Ext.lib.Ajax.request = function(method,data,options) {
if(options){
var hs = options.headers;
if(hs){
for(var h in hs){
if(hs.hasOwnProperty(h)){
this.initHeader(h,hs[h],false);
}
}
}
if(options.xmlData){
if (!hs || !hs['Content-Type']){
this.initHeader('Content-Type','text/xml',false);
}
method = (method ? method : (options.method ? options.method : 'POST'));
data = options.xmlData;
}else if(options.jsonData){
if (!hs || !hs['Content-Type']){
this.initHeader('Content-Type','application/json',false);
}
method = (method ? method : (options.method ? options.method : 'POST'));
data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
}
}

return this["sync" in options ? "syncRequest" : "asyncRequest"](method,data););//这句制定调用方法,如果sync传递了就调用syncRequest, 否则调用原来的方法asyncRequest};

};

把下面这个方法加上,直接加在asyncRequest方法后面就可以,形式和asyncRequest相同,调用时如果需要同步调用加上sync:true,属性即可

/**
Synchronous request.

@param {Object} method
@param {Object} uri
@param {Object} callback
@param {Object} postData
*/
Ext.lib.Ajax.syncRequest = function(method,postData)
{
var o = this.getConnectionObject();

if (!o) {
return null;
}
else {
o.conn.open(method,false);

if (this.useDefaultXhrHeader) {
if (!this.defaultHeaders['X-Requested-With']) {
this.initHeader('X-Requested-With',this.defaultXhrHeader,true);
}
}

if(postData && this.useDefaultHeader && (!this.hasHeaders || !this.headers['Content-Type'])){
this.initHeader('Content-Type',this.defaultPostHeader);
}

if (this.hasDefaultHeaders || this.hasHeaders) {
this.setHeader(o);
}

o.conn.send(postData || null);
this.handleTransactionResponse(o,callback);
return o;
}
};

但是在ext3.0的源码中已经找不到Ext.lib.Ajax.syncRequest方法

所以在ext3.0中可以这样实现同步做:

var obj;

var value;
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
var url = '../../servlet/TestServlet‘;

obj.open('GET',url,false);
obj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
obj.send(null);
value = obj.responseText;


------------------------------------------------------ 引用文章原文 the end --------------------------------------

原文链接:https://www.f2er.com/ajax/165743.html

猜你在找的Ajax相关文章