ext的ajax请求,ExtCore AJAX使用入门

ExtCore是Ext团队继ExtJs后发布的一款轻量级,适合在网站上使用的JS框架.目标就是要争夺jQuery所占领的市场.

那么ExtCode有什么新的功能可以吸引我们呢?

废话少说,我们先来看看它在AJAX方面是如何简化我们开发的.ExtCore是Ext团队继ExtJs后发布的一款轻量级,适合在网站上使用的JS框架.目标就是要争夺jQuery所占领的市场.

那么ExtCode有什么新的功能可以吸引我们呢?

废话少说,我们先来从下面几个例子来看看它在AJAX方面是如何简化我们开发的.

1,利用元素自身的load方法更新自己的innerHTML.

JS部分://利用元素的load方法更新html

Ext.fly("btnLoad").on('click', function() {

Ext.fly("lblServerDateTime").load({ url: 'server_time.php' });

});后台代码(server_time.php)<?php

if($_POST['type'] == "date")

{

echo date("Y-m-d");

}

else

{

echo date("Y-m-d H:i:s");

}

?>2.利用request更新服务器时间

JS部分//利用request更新服务器时间

Ext.fly("btnRequest").on('click', function() {

Ext.Ajax.request({

url: 'server_time.php',

params: {

type: 'date'

},

success: function(response, opts) {

Ext.fly('lblServerDate').dom.innerHTML = response.responseText;

},

failure: function(response, opts) {

Ext.fly('lblServerDate').dom.innerHTML = '请求失败,错误代码：' + response.status;

}

});

});后台代码(server_time.php)跟例1是一样的.

3.AJAX提交整个form表单

JS部分//AJAX提交整个form表单

Ext.fly("btnRegister").on('click', function() {

Ext.Ajax.request({

url: 'register.php',

form: 'formRegister',

method: 'POST',

success: function(response, opts) {

Ext.fly('lblMessage').dom.innerHTML = response.responseText;

},

failure: function(response, opts) {

Ext.fly('lblMessage').dom.innerHTML = '请求失败,错误代码：' + response.status;

}

});

});后台代码(register.php)<?php

print_r($_POST);

//TODO

?>4.设置所有请求的缺少头部信息JS部分//设置所有请求的缺少头部信息

Ext.Ajax.defaultHeaders = {

'Powered-By': 'extjs.org.cn'

};

//发送并验证服务器得到的头部信息

Ext.fly("btnHeader").on('click', function() {

Ext.fly("lblHeader").load({ url: 'headers.php' });

});后台代码(header.php)<?php

echo "[HTTP_POWERED_BY] => ".$_SERVER['HTTP_POWERED_BY'];

?>DEMO查看:

http://extjs.org.cn/ext-core/user-examples/ajax/

作者：肥占

出处：

本文版权归作者和ExtJs中文资讯站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。