投放本站广告请联系:
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
- 关键字:
- 要发表评论,请先登录