在Struts的Tag Developers Guide中,AJAX相关内容主要涉及到一个AJAX主题,它对XHTML主题进行了扩展,使用了流行的Dojo AJAX/JavaScript工具包,为Struts标签提供了AJAX功能。以下是具体解析:
AJAX功能特性
- 客户端验证:支持AJAX客户端验证,当表单元素失去焦点时,如果设置了
validate
属性为true
,则会触发验证请求。 - 远程表单提交:支持远程表单提交,可与
submit
标签配合使用。 - 动态加载部分HTML:提供了一个高级的
div
模板,能够动态重新加载部分HTML内容,实现局部刷新。 - 远程加载和执行JavaScript:通过高级的
a
模板,具备远程加载和执行JavaScript的能力。 - AJAX选项卡面板:有一个仅使用AJAX的选项卡面板实现。
- 发布-订阅事件模型:拥有丰富的发布-订阅事件模型,用于实现组件之间的通信和交互。
- 自动完成标签:支持交互式自动完成标签,提供更友好的用户输入体验。
浏览器兼容性
Dojo工具包支持多种浏览器,包括IE 5.5+、Firefox 1.0+、最新版本的Safari(在最新的操作系统版本上)、最新版本的Opera以及最新版本的Konqueror。使用AJAX主题创建的用户界面在这些支持的浏览器上应该具有相同的行为。
扩展AJAX主题
AJAX主题的包装技术与XHTML主题类似,但control_header.ftl
文件略有不同。它通过检查validate
属性来实现AJAX客户端验证,并在表单元素的onblur
事件中触发验证请求。如果开发者希望改变这种行为,例如在每次按键后延迟200毫秒触发验证,可以重写相关模板。
特殊模板
在AJAX主题中,head
、div
和a
这三个ajax_xhtml
模板具有特殊的意义。尤其是head
标签非常重要,如果不使用它,AJAX支持可能无法正确设置。
总的来说,Struts的Tag Developers Guide中的AJAX主题为开发者提供了一套丰富的AJAX功能,帮助他们更轻松地创建具有交互性和动态性的Web应用程序界面。通过使用这些功能,可以提高用户体验,减少页面刷新带来的延迟和闪烁,使Web应用程序更加流畅和高效。
Tag Developers Guide 中的 AJAX 解析
1. AJAX 简介
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下,与服务器进行数据交互和更新。AJAX 的核心是 XMLHttpRequest
对象,它能够与服务器进行异步通信。
2. AJAX 的基本工作原理
- 创建 XMLHttpRequest 对象:这是 AJAX 的第一步,通过
new XMLHttpRequest()
创建一个对象。 - 配置请求:使用
open
方法配置请求,指定请求方式(如 GET 或 POST)、请求的 URL 和是否异步。 - 发送请求:通过
send
方法发送请求。如果是 GET 请求,可以直接发送;如果是 POST 请求,需要设置请求头并发送数据。 - 接收响应:通过监听
onreadystatechange
事件来接收服务器的响应。当readyState
为 4(请求完成)且status
为 200(请求成功)时,可以获取响应数据。
3. AJAX 的状态码
readyState
属性表示请求的状态,其值如下:
- 0:未初始化
- 1:服务器连接已建立
- 2:请求已接收
- 3:请求处理中
- 4:请求已完成,且响应已就绪
4. 示例代码
以下是一个简单的 AJAX 示例代码,展示如何发送 GET 和 POST 请求:
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
5. AJAX 在 Tag Developers Guide 中的应用
在 Tag Developers Guide 中,AJAX 可以用于动态加载和更新页面内容,而不需要重新加载整个页面。例如,在使用 Struts 2 框架时,可以通过 AJAX 技术与服务器进行交互,动态更新页面的部分内容。
6. 注意事项
- 前后端交互只能交互字符串:前后端交互的数据必须是字符串格式,因此在发送和接收数据时需要进行适当的序列化和反序列化。
- 固定步骤:创建、配置、发送和接收响应的步骤是固定的,必须按照顺序执行。
通过以上内容,可以更好地理解 AJAX 的工作原理及其在 Tag Developers Guide 中的应用。
The framework offers a flexible view layer that supports multiple view technologies, including JSP, FreeMaker, and Velocity.
Struts Tags
Generic Tags
UI Tags
Themes and Templates
Tag Reference
Ajax Tags
Ajax and JavaScript Recipes
OGNL
OGNL Basics
OGNL Expression compilation
Tag Syntax
Alt Syntax
JSP
specific tags
FreeMarker
specific tags
Velocity
specific tags
该框架提供了一个灵活的视图层,支持多种视图技术,包括JSP、FreeMaker和Velocity。
Struts标记
通用标记
用户界面标记
主题和模板
标记引用
Ajax标记
Ajax和JavaScript配方
奥格诺
OGNL基础知识
OGNL表达式编译
标记语法
Alt语法
JSP公司
特定标记
自由标记
特定标记
速度
特定标记