ExtCore AJAX使用入门

[ 380 查看 / 1 回复 ] 相关帖子

返回列表
发新话题 回复该主题
lan58006
头像

  • 超级版主
  • 434
  • 512
  • 2008-07-16
Medal No.1Medal No.2Medal No.3
2010-02-04 12:54 |只看楼主 1#
t T

ExtCore AJAX使用入门

ExtCore是Ext团队继ExtJs后发布的一款轻量级,适合在网站上使用的JS框架.目标就是要争夺jQuery所占领的市场.
那么ExtCode有什么新的功能可以吸引我们呢?
废话少说,我们先来从下面几个例子来看看它在AJAX方面是如何简化我们开发的.
1,利用元素自身的load方法更新自己的innerHTML.
JS部分:
  1.  
  2. //利用元素的load方法更新html 
  3. Ext.fly("btnLoad").on('click', function() { 
  4.     Ext.fly("lblServerDateTime").load({ url: 'server_time.php' }); 
  5. }); 
复制代码
后台代码(server_time.php):

  2. <?php 
  3. if($_POST['type'] == "date") 
  4. { 
  5.     echo date("Y-m-d"); 
  6. } 
  7. else 
  8. { 
  9.     echo date("Y-m-d H:i:s"); 
  10. } 
  11. ?>
复制代码
2.利用request更新服务器时间
JS部分

  2. //利用request更新服务器时间 
  3. Ext.fly("btnRequest").on('click', function() { 
  4.     Ext.Ajax.request({ 
  5.         url: 'server_time.php', 
  6.         params: { 
  7.             type: 'date' 
  8.         }, 
  9.         success: function(response, opts) { 
  10.             Ext.fly('lblServerDate').dom.innerHTML = response.responseText; 
  11.         }, 
  12.         failure: function(response, opts) { 
  13.             Ext.fly('lblServerDate').dom.innerHTML = '请求失败,错误代码：' + response.status; 
  14.         } 
  15.     }); 
  16. }); 
复制代码
后台代码(server_time.php)跟例1是一样的.

3.AJAX提交整个form表单
JS部分

  2. //AJAX提交整个form表单 
  3. Ext.fly("btnRegister").on('click', function() { 
  4.     Ext.Ajax.request({ 
  5.         url: 'register.php', 
  6.         form: 'formRegister', 
  7.         method:  'POST', 
  8.         success: function(response, opts) { 
  9.             Ext.fly('lblMessage').dom.innerHTML = response.responseText; 
  10.         }, 
  11.         failure: function(response, opts) { 
  12.             Ext.fly('lblMessage').dom.innerHTML = '请求失败,错误代码：' + response.status; 
  13.         } 
  14.  
  15.     }); 
  16. }); 
复制代码
后台代码(register.php)


  3. <?php 
  4. print_r($_POST); 
  5. //TODO 
  6. ?> 
复制代码
4.设置所有请求的缺少头部信息
JS部分


  3. //设置所有请求的缺少头部信息 
  4. Ext.Ajax.defaultHeaders = { 
  5.     'Powered-By': 'extjs.org.cn' 
  6. }; 
  7. //发送并验证服务器得到的头部信息 
  8. Ext.fly("btnHeader").on('click', function() { 
  9.     Ext.fly("lblHeader").load({ url: 'headers.php' }); 
  10. });
复制代码
后台代码(header.php)

  2. <?php 
  3. echo "[HTTP_POWERED_BY] => ".$_SERVER['HTTP_POWERED_BY']; 
  4. ?> 
复制代码
引自:http://extjs.org.cn
分享 转发
我们要好好活着，因为我会死很久很久。。。
TOP
ai0loveyou
头像

  • 中级会员
  • 216
  • 217
  • 2009-01-13
2010-07-24 13:13 |只看该用户 2#
t T

ExtCore AJAX使用入门

学习ing...
QQ空间免费播放器代码
TOP
返回列表
上一主题 | 下一主题