jQuery MiniUI,Ajax Web开发

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

作者:肥占
出处:http://extjs.org.cn
本文版权归作者和ExtJs中文资讯站共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。