投放本站广告请联系:
extjscn#126.com
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/
源代码下载:
http://extjs.org.cn/ext-core/user-examples/ajax/ajax.zip
- 关键字:
- 要发表评论,请先登录

