ext ext.ajax
Ajax的概念使Web应用程序可以从缓慢,无响应和违反直觉的方式发展为类似于桌面应用程序的行为,提供即时反馈,消除页面刷新的需求并促进更好的用户体验。 Ajax的问题在于,它为应用程序开发增加了一层额外的复杂性。 在事件驱动的应用程序中,当用户单击按钮时,您可能会执行操作。 在传统的应用程序开发中,您可以将所有逻辑该操作应正确地放在事件处理程序中,但是使用Ajax并不是那么容易。 您可能进行了一些客户端验证,如果通过了验证,则准备数据并创建一个新的Ajax请求。 然后,您定义用于处理成功响应和失败的功能。 然后,您必须创建将处理Ajax请求并返回适当响应的服务器端代码。 这可能需要采用某种数据格式,例如JavaScript Object Notation(JSON)或XML,并且您必须以客户端期望接收的方式提供它。
简而言之,Ajax开发要求Web应用程序开发人员在客户端和服务器端都维护一组代码,并且两者的工作方式可能存在巨大差异,从而使其难以调试和维护。 如果开发人员能够在客户端调用服务器端操作,从而将其对所有Ajax请求和响应处理的影响降至最低,那就太好了。 那就是Ext.Direct的用武之地。
起初,Ext.Direct似乎是解决一个小问题的过分热衷的解决方案,但是从一开始就花时间和精力在它上面,您将开始收获红利。 获得Ext.Direct工作的构建基础的最初障碍似乎很复杂,但是通常只需要完成一次,然后添加新类和方法所需的更改就非常简单。 在本文中,您将学习如何开始并将构建基块放在适当的位置,以及如何实际使用Ext.Direct从JavaScript调用远程PHP方法。 然后,您将学习Ext.Direct必须提供的一些更高级的功能,以及如何在自己的应用程序中充分利用它们。
先决条件
本文使用Ext.Direct与PHP服务器端脚本进行通信。 如果没有安装PHP的网络服务器,则流行的XAMPP软件包可用于Linux®,Windows®,Mac OS X和Solaris。 请参阅相关主题的安装Apache,PHP,MySQL和其他一些东西的链接。
要使用Ext.Direct,您需要下载ExtJS JavaScript库并将其解压缩到Web服务器文档根目录中的某个位置。 如果使用XAMPP,请在XAMPP安装目录中查找名为htdocs的子目录-这是您的Apache文档根目录。 在该目录内创建一个名为direct的目录。 现在去sencha.com(参见相关主题 )和下载的ExtJS的最新公开发行(3.2.1在写作的时候)。 下载完成后,将所有文件解压缩到刚创建的直接目录中。 最后一步是将目录从ext-3.xx重命名为ext。 我将在代码示例中将目录称为ext,以防止版本之间出现不一致(本文中的示例请参见可下载资源以访问源代码)。
Ext.Direct入门
学习Ext.Direct如何工作的最好方法是直接使用它。 乍一看,它可能看起来很复杂,但是当您了解了基础知识之后,它的潜在用途和功能就会变得非常清晰。 在本节中,您将学习如何创建一个基本网页,该网页使用Ext.Direct通过PHP date函数从服务器获取当前日期和时间。
配置文件
当您想使用Ext.Direct将服务器端类中的方法公开给ExtJS时,必须创建一个配置文件来定义客户端上可用的类和方法。 此配置可以是您正在使用的编程语言的一组本机键/值对,或者可以是JSON或XML文档。 本示例使用PHP数组来避免解析JSON或XML的需要。 打开您喜欢的文本编辑器,并将清单1中的代码添加到其中,并将文件另存为config.php在先前创建的直接目录中。
清单1. config.php-Ext.Direct类和方法PHP配置文件
<?php
$API = array(
'Now'=>array(
'methods'=>array(
'getNow'=>array(
'len'=>0
)
)
)
);
清单1中的代码定义了API。 外部数组包含一个键/值对,键为Now
。 这是您要公开PHP类的名称,由一个数组组成。 该数组包含一个具有key methods
成员,表明该方法包含要从Now
类公开的方法。 在methods
数组中,有一个成员getNow
,它表示要公开的方法getNow()
。 它本身是一个定义len
属性的数组,该属性指示getNow()
函数接受的参数数量。 在这种情况下,您没有传递任何参数,因此该值为0。
PHP类
接下来,看一下相应PHP类文件。 直接创建一个新目录并将其命名为class。 在此目录中,创建一个名为Now.php的新文件,并将清单2的内容添加到其中。
清单2. classes / Now.php-您将从Ext.Direct调用PHP类
<?php
class Now {
function getNow() {
return date('jS F Y @ g:i:s a');
}
}
如您所见,该类名为Now
,它与您在config.php中声明的类名称相对应。 它只有一个方法getNow()
,它不接受任何参数。 getNow()
函数以27th August 2010 @ 12:21:34 pm
的格式返回当前时间。
您需要放置的下一个块是JavaScript API,该API公开了Ext.Direct可用的方法。 您将使用PHP编写此API,加载config.php文件的内容,并生成Ext.Direct将能够读取和理解的JSON版本。 该API是通用的,如果您需要添加更多的类或方法,则无需修改。 稍后,您将看到如何在网页本身中加载API。
API
创建一个名为api.php的新文件,其中包含清单3中的代码。
清单3. api.php-用于PHP类和方法的动态JavaScript API
<?php
require('config.php');
header('Content-Type: text/javascript');
$actions = array();
foreach($API as $aname=>&$a){
$methods = array();
foreach($a['methods'] as $mname=>&$m){
$md = array(
'name'=>$mname,
'len'=>$m['len']
);
if(isset($m['formHandler']) && $m['formHandler']){
$md['formHandler'] = true;
}
$methods[] = $md;
}
$actions[$aname] = $methods;
}
$cfg = array(
'url'=>'router.php',
'type'=>'remoting',
'actions'=>$actions
);
echo 'Ext.app.REMOTING_API = ';
echo json_encode($cfg);
echo ';';
该脚本首先加载config.php文件,并向Web浏览器指定输出的内容类型为JavaScript。 实际上,您将使用<script>标记将此文件加载到HTML页面中,因此输出被视为JavaScript。 config.php文件声明一个变量$API
,该变量包含键/值对以及Ext.Direct可用的类和方法。 清单3中的脚本扫描$API
变量中的这些类和方法名称,以定义可通过JavaScript进行的操作。 然后创建一个$cfg
键/值数组,以定义路由器的URL(稍后将创建),类型(将其设置为remoting
)以及可用的操作。 最后,输出JavaScript,定义Ext.app.REMOTING_API
,并将其值设置为$cfg
变量的JSON表示形式。 您将很快看到浏览器将从该文件实际读取的内容。
路由器
在实际使用Ext.Direct调用服务器端方法之前,需要放置的最后一个组件是路由器。 这个难题将客户端发出的请求带到服务器端,并将它们路由到所需的类。 然后,它将调用适当的方法,并传入与该方法关联的所有参数。 路由器必须处理两种形式的请求-JSON编码的原始HTTP帖子,用于检索数据; 以及用于更新数据的表单发布。 如果同时发送多个请求,则HTTP帖子将是一个数组,并且路由器将需要适当地路由每个单独的请求。
要创建路由器,请创建一个新文件并将其命名为router.php,并将其保存在直接文件夹中。 其内容应反映清单4中的代码。
清单4. router.php-将请求路由到适当PHP类PHP脚本
<?php
require('config.php');
class ExtAction {
public $action;
public $method;
public $data;
public $tid;
}
$isForm = false;
$isUpload = false;
if(isset($HTTP_RAW_POST_DATA)) {
header('Content-Type: text/javascript');
$data = json_decode($HTTP_RAW_POST_DATA);
} else if(isset($_POST['extAction'])) {
$isForm = true;
$isUpload = $_POST['extUpload'] == 'true';
$data = new ExtAction();
$data->action = $_POST['extAction'];
$data->method = $_POST['extMethod'];
$data->tid = isset($_POST['extTID']) ? $_POST['extTID'] : null;
$data->data = array($_POST, $_FILES);
} else {
die('Invalid request.');
}
function doRpc($cdata){
global $API;
try {
if(!isset($API[$cdata->action])) {
throw new Exception('Call to undefined action: ' . $cdata->action);
}
$action = $cdata->action;
$a = $API[$action];
doAroundCalls($a['before'], $cdata);
$method = $cdata->method;
$mdef = $a['methods'][$method];
if(!$mdef){
throw new Exception("Call to undefined method: $method on action $action");
}
doAroundCalls($mdef['before'], $cdata);
$r = array(
'type'=>'rpc',
'tid'=>$cdata->tid,
'action'=>$action,
'method'=>$method
);
require_once("classes/$action.php");
$o = new $action();
$params = isset($cdata->data) && is_array($cdata->data) ?
$cdata->data : array();
$r['result'] = call_user_func_array(array($o, $method), $params);
doAroundCalls($mdef['after'], $cdata, $r);
doAroundCalls($a['after'], $cdata, $r);
} catch(Exception $e) {
$r['type'] = 'exception';
$r['message'] = $e->getMessage();
$r['where'] = $e->getTraceAsString();
}
return $r;
}
function doAroundCalls(&$fns, &$cdata, &$returnData=null) {
if(!$fns) {
return;
}
if(is_array($fns)) {
foreach($fns as $f) {
$f($cdata, $returnData);
}
} else {
$fns($cdata, $returnData);
}
}
$response = null;
if(is_array($data)) {
$response = array();
foreach($data as $d) {
$response[] = doRpc($d);
}
} else {
$response = doRpc($data);
}
if($isForm && $isUpload) {
echo '<html><body><textarea>';
echo json_encode($response);
echo '</textarea></body></html>';
} else {
echo json_encode($response);
}
路由器上有很多代码,但是像API一样,如果您决定将Ext.Direct可执行的任何新方法或类添加到列表中,则无需更改通用代码。 在文件的开头,定义了具有四个属性的基本类。 如果发出的请求是表单发布,则将使用此类。 接下来,检查发出的请求中是否包含原始HTTP发布数据; 如果是这样,则返回JSON编码的响应。 否则,实例化ExtAction
类并将属性分配给表单发布数据中的值。
接下来,有一个名为doRpc
的函数,它将找出Ext.Direct正在调用哪些类和方法,并将其加载到相关类中,并调用适当的方法,以将任何提供的参数值传递给该方法。 doAroundCalls
函数将调用设置为在操作之前或之后调用的任何方法。 在这种情况下,您不会使用该功能,所以现在不要过多地担心自己。
在文件末尾,您将构建响应。 如果有多个请求,请遍历请求数组并为每个请求调用doRpc
函数。 如果只有一个请求,则只需调用一次doRpc
。 最后,检查发出的请求是表单发布还是文件上传,在这种情况下,您将数据输出为有效HTML页面,并且<textarea>
HTML元素中包含JSON编码的输出。 这是Ext.Direct规范要求的,用于响应表单发布请求。 如果请求是原始HTTP帖子,则只需发出JSON编码的响应(您之前定义了响应的标头即可使用MIME类型text / javascript)。
在JavaScript中调用远程方法
通过配置,PHP类API和路由器全部创建,您现在可以继续使用Ext.Direct来调用Now PHP类中的getNow()
函数。 在直接文件夹中创建一个名为first.php的新文件,并将清单5中的代码添加到其中。
清单5. first.php-您的第一个Ext.Direct应用程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ext.Direct Server Date/Time</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script src="api.php"></script>
</head>
<body>
<h1>Ext.Direct Server Date/Time</h1>
<script>
Ext.onReady(function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Now.getNow(function(provider, response) {
alert(response.result);
});
});
</script>
</body>
</html>
清单5是一个非常简单HTML文档。 您只需在<head>
标记中包含常规ExtJS文件(ext-all.css,ext-base.js和ext-all.js),以及您之前创建的远程API(api.php)。 然后,编写一些JavaScript,将您的API添加为Ext.Direct提供程序,这将创建允许您调用服务器端PHP方法的相关JavaScript类和方法。 接下来,从Now
类中调用服务器端方法getNow
。 Ext.Direct调用将一个函数作为参数,它本身接受两个参数: provider
和response
。 response
参数包含您从服务器端PHP脚本收到的响应。
运行项目
现在,您已经创建了第一个Ext.Direct应用程序所需的所有代码,让我们继续运行该项目以查看其产生的结果。 打开您喜欢的Web浏览器,然后导航到http://127.0.0.1:5984/direct/first.php。 警报消息应弹出,并带有由服务器端PHP生成并格式化的当前日期和时间。 这看起来应该类似于图1中的窗口。
图1.运行中的第一个Ext.Direct应用程序
如果您使用的浏览器(例如Firefox)允许您单击“查看源”视图中的外部JavaScript文件的链接,请在警报框中单击“ 确定 ”以消除该消息,然后右键单击页面上的任意位置,然后单击“ 查看源”。 。 查找以下行: <script src="api.php">
。
此行的api.php部分应为可点击的链接。 单击该链接将带您到config.php中定义的类和方法的api.php生成JavaScript源。 源代码应包含以下内容: Ext.app.REMOTING_API = {"url":"router.php","type":"remoting","actions":{"Now":[{"name":"getNow","len":0}]}};
。
这将声明Ext.app.REMOTING_API
的配置,然后在您尝试在代码中使用公开的方法时将其用作提供程序。
在继续之前,让我们研究一下如果要添加一个新类并为Ext.Direct提供新方法将需要什么。 在这种情况下,让我们创建一个名为Server
的新类,并在该类中创建一个名为getSoftware
。 这将响应Web服务器和PHP安装的详细信息。 首先,创建一个名为Server.php的新文件,并将其保存在直接目录的类子目录中(与Now.php文件一起)。 其内容如清单6所示。
清单6. classes / Server.php-第二类
<?php
class Server {
function getSoftware() {
return $_SERVER['SERVER_SOFTWARE'];
}
}
getSoftware
方法将仅返回环境变量SERVER_SOFTWARE
的值。 接下来,您需要修改config.php以告知Ext.Direct此新类和方法可用于远程调用。 更改config.php,使其内容与清单7相同。
清单7.更新的config.php-引用新的类和方法
<?php
$API = array(
'Now'=>array(
'methods'=>array(
'getNow'=>array(
'len'=>0
)
)
),
'Server'=>array(
'methods'=>array(
'getSoftware'=>array(
'len'=>0
)
)
)
);
如您所见,您只需将引用添加到Server
类,并定义它包含方法getSoftware
,该方法getSoftware
接受任何参数。 您需要做的最后更改是对first.php文件,您实际上在其中执行了对服务器端方法的调用。 在这种情况下,您将仅在第二个警报框中显示Server.getSoftware()
方法的响应。 在您的first.php文件中,在清单8的结尾处添加以下几行});
进行Now.getNow
调用。
清单8. Now.getNow调用
Server.getSoftware(function(provider, response) {
alert(response.result);
});
现在返回浏览器并刷新页面。 您应该首先看到熟悉的日期值。 消除此消息后,您将看到另一个警报窗口,这次显示了服务器软件信息,如图2所示。
图2.新添加的方法的响应
我想您会同意,在奠定基础之后,添加新类和方法的过程相对简单。 最后要检查的是api.php生成JavaScript代码,其中应包含清单9中所示的代码。
清单9. api.php生成的生成JavaScript代码
Ext.app.REMOTING_API =
{"url":"router.php","type":"remoting","actions":{"Now":[{"name":"getNow",
"len":0}],"Server":[{"name":"getSoftware","len":0}]}};
如您所见,该类现在包含带有getSoftware
方法的Server
类,然后将其用于在JavaScript中提供这些功能。
这涵盖了Ext.Direct工作原理的基础。 在下一节中,您将学习Ext.Direct的一些更高级的概念,包括使用接受参数的方法,返回更复杂的响应以及在请求中发送表单数据而不是原始HTTP发布数据。 然后,您应该准备好学习本文中学到的内容,并将其应用于自己的应用程序。
后续步骤:更多Ext.Direct概念
在上一节中,您学习了如何开始Ext.Direct开发。 但是,在准备好学习这些知识并开始构建自己的应用程序之前,您应该熟悉一些其他概念。 本节涵盖了这些概念。
在方法中接受参数
上一节中介绍给Ext.Direct的两种方法都非常基础,甚至不接受任何参数。 您很有可能需要将参数传递给您创建的服务器端函数,因此让我们看一下如何修改其中一个函数以接受和使用参数。
首先,打开您之前创建的config.php文件,并将getNow
方法引用中的len
属性的值从0更改为1。这将告诉Ext.Direct getNow
方法需要1个参数。
接下来,您需要修改Now.php类。 将此文件的内容更改为清单10中的代码。
清单10.修改后的类/Now.php
<?php
class Now {
function getNow($format) {
return date($format);
}
}
您会注意到,函数getNow
现在接受单个参数$format
,并且此参数已插入对PHP date()
函数的调用中。
您需要做的最后一件事是修改first.php文件,以在调用remote
方法时实际传递参数。 查找清单11中所示的行。
清单11.修改first.php文件
Now.getNow(function(provider, response) {
alert(response.result);
});
要将参数传递给此方法调用,请将参数放在callback
函数之前,如下所示(请参见清单12)。
清单12.将参数放在callback
函数之前
Now.getNow('jS F Y', function(provider, response) {
alert(response.result);
});
接下来,重新加载浏览器窗口以查看更改。 这次,对getNow
方法调用的响应应该仅返回日期,而不是日期和时间,如图3所示。
图3.在参数中指定日期格式的结果
接下来,您将看到如何返回比单个值复杂的东西。
返回复杂的结果集
到目前为止,您的方法生成的响应都是单一值。 这对于基本功能来说很好,但是实际上,您可能需要返回复杂的类型,例如对象和数组。 由于您的回复采用JSON格式,因此非常简单。 您PHP类方法可以返回数组或键/值对,并且您定义的API将自动从中生成JSON数组或对象。 让我们看一个简单的例子。 首先,您需要修改Server
类,因此打开classes / Server.php文件并添加清单13中所示的函数。
清单13.将getEnvVars()
函数添加到Server
类
function getEnvVars() {
return $_SERVER;
}
现在,修改config.php文件以包含此新方法。 现在,该文件的内容应反映清单14中所示的代码。
清单14.修改后的config.php —添加了新的getEnvVars
方法
<?php
$API = array(
'Now'=>array(
'methods'=>array(
'getNow'=>array(
'len'=>1
)
)
),
'Server'=>array(
'methods'=>array(
'getSoftware'=>array(
'len'=>0
),
'getEnvVars'=>array(
'len'=>0
)
)
)
);
接下来,在您的直接文件夹中创建一个名为second.php的新文件。 您将以此为新网页来调用新创建的getEnvVars
方法。 将清单15的内容添加到此文件并保存。
清单15. second.php-使用新的getEnvVars
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ext.Direct Complex Responses</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script src="api.php"></script>
</head>
<body>
<h1>Ext.Direct Complex Responses</h1>
<script>
Ext.onReady(function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Server.getEnvVars(function(provider, response) {
alert(response.result.DOCUMENT_ROOT);
alert(response.result.HTTP_USER_AGENT);
alert(response.result.MYSQL_HOME);
});
});
</script>
</body>
</html>
现在,打开浏览器并转到http://127.0.0.1/direct/second.php。 您应该看到三个弹出窗口,分别显示Web服务器文档根目录的位置,所用浏览器的用户代理字符串以及系统上MySQL安装的位置(如果有)。
发送表格发布数据
在本部分中,您将学习如何从表单发送数据到服务器,该表单将以表单发布请求而不是原始HTTP发送。 您将创建一个具有单个字段的简单表单。 Enter a number
和带有文本Validate的按钮。 目的是在服务器端验证该字段,以检查该字段是否为空以及该值是否为数字。 如果验证失败,您将向用户显示错误消息。 当然,您可以使用基本JavaScript来执行此操作,但是在实际应用程序中,您可以轻松地对该概念进行调整,以针对数据库验证输入,例如检查是否采用了请求的用户名。
在此示例中,您将创建一个新PHP类NumberValidator
,该类将具有单个方法validateNumber
。 第一步是将这个新类和方法添加到config.php文件中。 这与以前非常相似,但是必须指出该方法使用的是表单处理程序,而不是原始的后处理程序。 修改config.php文件,使其与清单16中的代码匹配。
清单16.修改后的config.php —添加NumberValidator
类
<?php
$API = array(
'Now'=>array(
'methods'=>array(
'getNow'=>array(
'len'=>1
)
)
),
'Server'=>array(
'methods'=>array(
'getSoftware'=>array(
'len'=>0
),
'getEnvVars'=>array(
'len'=>0
)
)
),
'NumberValidator'=>array(
'methods'=>array(
'validateNumber'=>array(
'len'=>1,
'formHandler'=>true
)
)
)
);
接下来,您需要创建该类。 创建一个新文件,并将其保存在classes子目录中,作为NumberValidator.php。 其内容在清单17中。
清单17. classes / NumberValidator.php-新的验证类
<?php
class NumberValidator {
function validateNumber($form) {
$response = array();
$num = $form['num'];
if (strlen($num) < 1) {
$success = false;
$response['errors'] = array(
'num'=>'Required field.'
);
} else if (!is_numeric($num)) {
$success = false;
$response['errors'] = array(
'num'=>'Not a valid number.'
);
} else {
$success = true;
}
$response['success'] = $success;
return $response;
}
}
此类相对简单。 提交的表单中的值将作为参数接收。 您将创建一个名称为num
的字段,您将对其进行验证。 然后,您检查此字段是否完全具有任何值或不是数字,并且,如果这些条件之一成立,则返回错误。 该方法返回的对象$response
具有单个成员success
,值为true,如果数字正确验证,则该方法返回两个成员success
,值为false,并且返回一个错误对象,且相关错误消息为为该字段显示。
最后一步是使用代码创建新网页,以创建表单并处理Validate按钮上的Submit事件。 毕竟,因为这是一个ExtJS教程,所以我们在过程中使用一些ExtJS UI优点。 创建一个名为third.php的新文件,并将其保存在您的直接目录中。 将清单18的内容添加到此文件中。
清单18. third.php -最终示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ext.Direct Form Example</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-all.js"></script>
<script src="api.php"></script>
</head>
<body>
<h1>Ext.Direct Form Example</h1>
<script>
Ext.onReady(function(){
Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.QuickTips.init();
var formExample = new Ext.form.FormPanel({
title: 'Validation Form',
padding: 10,
buttons:[{
text: 'Validate',
handler: function(){
formExample.getForm().submit();
}
}],
renderTo: Ext.getBody(),
defaultType: 'textfield',
items: [{
fieldLabel: 'Enter a number',
name: 'num',
msgTarget: 'side'
}],
api: {
submit: NumberValidator.validateNumber
}
});
});
</script>
</body>
</html>
如果您熟悉ExtJS,则应该了解此代码。 如果您以前从未使用过ExtJS,则代码将使用一个带有文本Validate的按钮创建一个新的FormPanel
(ExtJS的许多精美UI控件之一)。 按钮的事件处理程序将导致在按下按钮时提交表单。 该代码指定应将表单呈现到执行该代码的页面的文档正文中。 这会将其附加到页面底部(在本例中,在<h1>
元素下方。接下来,代码定义应在表单中显示的项目。在此示例中,有一个项目,即num
字段。最后,指定了提交API,在这种情况下,您使用的是NumberValidator.validateNumber
Ext.Direct方法,该方法将在提交表单时(单击“验证”按钮时)随后被调用。
创建所有代码后,启动浏览器并将其指向http://127.0.0.1/direct/third.php。 您应该会看到一个不错的表单,其中包含一个字段和一个Validate按钮。 首先,将该字段留空,然后按按钮。 该字段应以红色突出显示,旁边带有一个图标,如图4所示。将鼠标移到该图标上,您将看到消息Required field
。
图4.实际使用的表单示例
接下来,输入一个有效的数字,然后按Validate 。 您会注意到该字段不再突出显示,并且图标也没有出现。 最后,输入一个无效数字,例如文本test
,然后再按一次Validate 。 该字段将再次突出显示,并且图标工具提示将显示消息Not a valid number
。
结论
本文提供了对Ext.Direct的高级介绍,向您展示了如何使用它的基础知识。 首先,您了解了Ext.Direct是什么以及它要解决的问题。 接下来,您了解了Ext.Direct应用程序的各种构建块,即配置,API,路由器,PHP类以及使用Ext.Direct的应用程序文件。 在此过程中,您学习了如何在应用程序中调用Ext.Direct方法。 然后,您学习了如何将参数传递给服务器端方法,以及如何在服务器的响应中返回更复杂的数据。 最后,您学习了如何处理表单数据,并基于表单输入提供服务器端验证。
还有更多的探索Ext.Direct,看到相关信息的一些链接到该主题的其他文章和指南。 目前,Ext.Direct是一项新兴技术,因此您可以期待它会随着时间的增长而变得越来越丰富。 通过现在学习基础知识,您将拥有夺取Ext.Direct将来提供的所有功能所需的基础。
翻译自: https://www.ibm.com/developerworks/web/library/wa-aj-streamline/index.html
ext ext.ajax