ExtJS2.0快速入门（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/jonahzheng/article/details/12113029

本文介绍了如何使用Ajax技术实现客户端与服务器之间的异步数据交换，包括JavaScript代码示例及不同服务器端语言处理Ajax请求的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Ajax

在弄好一些页面后，你已经懂得在页面和脚本之间的交互（interact）原理。接下来，你应该掌握的是，怎样与远程服务器（remote server）交换数据，常见的是从数据库加载数据（load）或是保存数据（save）到数据库中。通过JavaScript异步无刷新交换数据的这种方式，就是所谓的Ajax。Ext内建卓越的Ajax支持，例如，一个普遍的用户操作就是，异步发送一些东西到服务器，然后，UI元素根据回应（Response）作出更新。这是一个包含text input的表单，一个div用于显示消息（注意，你可以在ExtStart.html中加入下列代码，但这必须要访问服务器）：

<div id="msg"></div>
<div>
    Name: <input type="text" id="name" />
    <input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>

接着，我们加入这些处理交换数据的JavaScript代码到文件ExtStart.js中(用下面的代码覆盖)：

Ext.onReady(function(){
        Ext.get('okButton').on('click', function(){
                var msg = Ext.get('msg');
                msg.load({
                        url: 'ajax-example.php', // <-- 按实际改动
                        params: 'name=' + Ext.get('name').dom.value,
                        text: 'Updating...'
                });
                msg.show();
        });
});

注意： 这个例子需要web server才可运行。浏览器的URL地址不应是以file://开头，而是http://开头，否则的话Ajax的数据交互将不会工作。Localhost就可以工作得很好，但必须是通过http的。

这种模式看起来已经比较熟悉了吧！先获取按钮元素，加入一个匿名函数监听单击。在事件处理器中（event handler），我们使用一个负责处理Ajax请求、接受响应（Response）和更新另一个元素的Ext内建类，称作UpdateManagerUpdater。UpdateManager可以直接使用，或者和我们现在的做法一样，通过Element的load方法来引用（本例中该元素是id为“msg“的div）。当使用Element.load方法，请求（request)会在加工处理后发送，等待服务器的响应（Response），来自动替换元素的innerHTML。简单传入服务器url地址，加上字符串参数，便可以处理这个请求（本例中，参数值来自“name”元素的value),而text值是请求发送时提示的文本，完毕后显示那个msg的div（因为开始时默认隐藏）。当然，和大多数Ext组件一样，Ext.Ajax 有许多的参数可选，不同的Ajax请求有不同的方案。而这里仅演示最简单的那种。

最后一个关于Ajax隐晦的地方就是，服务器实际处理请求和返回（Resposne）是具体过程。这个过程会是一个服务端页面，一个Servlet，一个Http调度过程，一个WebService,甚至是Perl或CGI脚本，即不指定一个服务器都可以处理的http请求。让人无法预料的是，服务器返回什么是服务器的事情，无法给一个标准的例子来覆盖阐述所有的可能性。。

下面的例子是一些常见的语言以方便开始测试(这段代码输出刚才我们传入'name'的那个值到客户端，即发送什么，返回什么，然后在我们刚才写的'msg' div中加入该文本）。PHP的已经包含在下载文件中，文件名为'ajax-example.php'，可换成你自己服务端的代码：

Plain PHP

<?php if(isset($_POST['name'])) {
                echo 'From Server: '.$_POST['name'];
        }
?>

CakePHP

<?php if(isset($this->data['name'])) {
                $this->flash('From Server: '.$this->data['name']);
        }
?>

Django

from django.http import HttpResponse
 
def ajax_request(request):
    return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))

Perl

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
 
my $Query = new CGI;
 
print $Query->header();
print "Hello from : ".$Query->param('name');
 
exit;

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
        if (Request.Form["name"] != null)
        {
                Response.Write("From Server: " + Request.Form["name"]);
                Response.End();
        }
}

ColdFusion

<cfif StructKeyExists(form, "name")>
    <cfoutput>From Server: #form.name#</cfoutput>
</cfif>

JSP

From Server: ${param.name}

使用Ajax的真正挑战，是需要进行适当的手工编码，并相应格式化为服务端可用接受的数据结构。有几种格式供人们选择（最常用为JSON/XML)。 Ext没有跟任何服务器语言有独家联系，因此其它特定语言的库亦可用于Ext处理Ajax服务。只要页面接受到结果是EXT能处理的数据格式，Ext绝不会干涉服务器其他的事情！推荐参阅我们提供的各个平台资源以了解服务端框架的更多资讯和辅助。