在我们做Web开发中，用到Ajax的地方可谓是随处可见。在Webx的官方文档中，对于Ajax没有明确的支持说明，但是我们可以用另外的两种请求方式来变相实现这种效果。一种是.do请求，一种是.json请求，另一种还是json请求，一种是.htm请求。下面我们来对这四种请求方式做个说明。
.do请求
对于.do请求官方的说明是不需要有返回页面的请求，注意了：不需要返回页面的请求，和我们的需求有点相似啊。因为Ajax请求也是不要返回页面，只需要把数据输出到
浏览器端就行了。OK，下面我们用一个城市二级联动的代码来说明：
前台页面：
首先，从后台取出省的数据，在页面上进行渲染：
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js"></script>
第一种Ajax方式
<select name="provinceEname_fir">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_fir">
<option>请选择</option>
</select>
<input type="hidden" value="getCityByProvinceEname.do" name="urlName_fir">
<br/>
添加onchange事件
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',function(){
var cityVal = $(this).val();
var uri = $($("input[name^='urlName']")[j]).val();
$.ajax({
type:"post",
data:{"cityEname":cityVal},
dataType:"json",
url:uri,
success:function(msg){
if(msg != "{}"){
$($("select[name^='cityEname']")[j]).empty();
for(var i=0;i<msg.length;i++){
$($("select[name^='cityEname']")[j]).append("<option value='"+msg[i].id+"'>"+msg[i].name+"</option>");
}
}else{
}
},
error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script>
当省变动是会触发onchange事件，发送getCityByProvinceEname.do请求，后台存在一个请求接收类。这个时候需要注意两点：1、类的名字要和请求一样，首字母大写，2、类的路径要放在screen下面。
后台代码如下：
package com.alibaba.webx.MyWebxTest.myWebX.module.screen;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.alibaba.citrus.turbine.Context;
import com.alibaba.citrus.turbine.dataresolver.Param;
import com.alibaba.webx.MyWebxTest.base.BaseScreenAction;
import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO;
/**
*
* @author zkn 2016-05-15
*
*/
public class GetCityByProvinceEname extends BaseScreenAction {
public void execute(@Param("cityEname") String cityEname, Context context){
List<CityChinaDO> listCity =
mainService.getAddressService().getAllCityByEname(cityEname);
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
OutputStream os = null;
for (CityChinaDO city : listCity) {
Map<String, String> map = new HashMap<String, String>();
map.put("id", city.getEcityName());
map.put("name", city.getCcityName());
list.add(map);
}
String str = listToJson(list);
closeOutStream(os, str);
}
}
.json请求
.json请求，从名字我们可以看出是一个json相关的请求，它是一个接收json数据的请求。部分代码如下：
前台代码
第二种Ajax方式
<select name="provinceEname_sec">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_sec">
<option>请选择</option>
</select>
<input type="hidden" value="get_city_by_province_name/china_city.json" name="urlName_sec">
<br/>
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',function(){
var cityVal = $(this).val();
var uri = $($("input[name^='urlName']")[j]).val();
$.ajax({
type:"post",
data:{"cityEname":cityVal},
dataType:"json",
url:uri,
success:function(msg){
if(msg != "{}"){
$($("select[name^='cityEname']")[j]).empty();
for(var i=0;i<msg.length;i++){
$($("select[name^='cityEname']")[j]).append("<option value='"+msg[i].id+"'>"+msg[i].name+"</option>");
}
}else{
}
},
error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script>
package com.alibaba.webx.MyWebxTest.myWebX.module.screen;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.alibaba.citrus.turbine.Context;
import com.alibaba.citrus.turbine.dataresolver.Param;
import com.alibaba.webx.MyWebxTest.base.BaseScreenAction;
import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO;
/**
*
* @author zkn 2016-05-15
*
*/
public class GetCityByProvinceName extends BaseScreenAction {
public void doChinaCity(@Param("cityEname") String cityEname, Context context){
List<CityChinaDO> listCity =
mainService.getAddressService().getAllCityByEname(cityEname);
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
OutputStream os = null;
for (CityChinaDO city : listCity) {
Map<String, String> map = new HashMap<String, String>();
map.put("id", city.getEcityName());
map.put("name", city.getCcityName());
list.add(map);
}
String str = listToJson(list);
closeOutStream(os, str);
}
}
在json中我们需要注意的有三点：1、json请求对应的类要放到screen下面；2、json请求对应的类中不可以用execute方法，因为在找类的处理适配器的时候回出现错误；
3、json请求有两个部分组成，类名/方法名，方法名可以省略do：例如get_city_by_province_name/china_city.json
调用的是GetCityByProvinceName类中的doChinaCity。
.json请求
这是第二种json请求的方式部分代码如下：
前台代码
第三种Ajax方式
<select name="provinceEname_thir">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_thir">
<option>请选择</option>
</select>
<input type="hidden" value="get_city_by_province_name_thir.json" name="urlName_thir">
<br/>
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',function(){
var cityVal = $(this).val();
var uri = $($("input[name^='urlName']")[j]).val();
$.ajax({
type:"post",
data:{"cityEname":cityVal},
dataType:"json",
url:uri,
success:function(msg){
if(msg != "{}"){
$($("select[name^='cityEname']")[j]).empty();
for(var i=0;i<msg.length;i++){
$($("select[name^='cityEname']")[j]).append("<option value='"+msg[i].id+"'>"+msg[i].name+"</option>");
}
}else{
}
},
error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script>
后台代码如下：
package com.alibaba.webx.MyWebxTest.myWebX.module.screen;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.alibaba.citrus.turbine.Context;
import com.alibaba.citrus.turbine.dataresolver.Param;
import com.alibaba.webx.MyWebxTest.base.BaseScreenAction;
import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO;
/**
*
* @author zkn
*
*/
public class GetCityByProvinceNameThir extends BaseScreenAction {
public void execute(@Param("cityEname") String cityEname, Context context){
List<CityChinaDO> listCity =
mainService.getAddressService().getAllCityByEname(cityEname);
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
OutputStream os = null;
for (CityChinaDO city : listCity) {
Map<String, String> map = new HashMap<String, String>();
map.put("id", city.getEcityName());
map.put("name", city.getCcityName());
list.add(map);
}
String str = listToJson(list);
closeOutStream(os, str);
}
}
说明：在上例中我们发送了一个get_city_by_province_name_thir.json的请求，我们需要在screen下面创建一个对应的类GetCityByProvinceNameThir.java其实和第一种方
式差不多，在这个类中我们需要一个execute方法。这种方式和上面的json请求方式的不同在于，上面的json请求是类+方法名，而这种json请求是类名+execute方法。
.htm请求
.htm请求是Webx中最常见的请求方式，对于这种请求，一定要有一个相对应的页面存在，否则会报错。部分代码如下：
前台代码
第四种Ajax方式
<select name="provinceEname_four">
<option>请选择</option>
#foreach($province in $!{provinceChina})
<option value="$!{province.ename}">$!{province.cname}</option>
#end
</select>
<select name="cityEname_four">
<option>请选择</option>
</select>
<input type="hidden" value="get_city_by_province_name_four.htm" name="urlName_four">
<script>
$(function(){
<!--城市二级联动-->
$("select[name^='provinceEname']").each(function(j){
$(this).on('change',function(){
var cityVal = $(this).val();
var uri = $($("input[name^='urlName']")[j]).val();
$.ajax({
type:"post",
data:{"cityEname":cityVal},
dataType:"json",
url:uri,
success:function(msg){
if(msg != "{}"){
$($("select[name^='cityEname']")[j]).empty();
for(var i=0;i<msg.length;i++){
$($("select[name^='cityEname']")[j]).append("<option value='"+msg[i].id+"'>"+msg[i].name+"</option>");
}
}else{
}
},
error:function(){
alert("请求错误!");
}
});
})
});
}
);
</script>
后台代码如下：
package com.alibaba.webx.MyWebxTest.myWebX.module.screen;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.alibaba.citrus.turbine.Context;
import com.alibaba.citrus.turbine.dataresolver.Param;
import com.alibaba.webx.MyWebxTest.base.BaseScreenAction;
import com.alibaba.webx.MyWebxTest.myWebX.module.dao.object.CityChinaDO;
/**
*
* @author zkn
*
*/
public class GetCityByProvinceNameFour extends BaseScreenAction {
public void execute(@Param("cityEname") String cityEname, Context context){
List<CityChinaDO> listCity =
mainService.getAddressService().getAllCityByEname(cityEname);
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
OutputStream os = null;
for (CityChinaDO city : listCity) {
Map<String, String> map = new HashMap<String, String>();
map.put("id", city.getEcityName());
map.put("name", city.getCcityName());
list.add(map);
}
String str = listToJson(list);
closeOutStream(os, str);
}
}
对于.htm请求和我们常见的.htm请求基本上没什么区别，我们只需要把我们需要的值通过response输出到浏览器端就可以了。
总结：
经过对比我们发现 .do请求、第二种.json请求、.htm请求，后台处理方式基本上没有什么区别，请求方式也几乎一模一样。区别的地方是 .htm请求需要有一个对应的页面，其他
两种请求则不需要。平时工作中任取一种即可满足需要。
详细代码地址：git@code.csdn.net:zknxx/webx.git
如有疑问，欢迎交流。
相关推荐
RequestContexts用于在Web应用中传递请求相关数据，而Pipeline是一种流式的处理机制，它可以在请求处理的各个环节中传递和修改数据。 Webx框架还具备了良好的文档指南，能够指导开发人员如何使用Webx进行Web开发。...
Webx是一个开源的Java Web应用程序框架，它旨在简化Web开发，提供一种高效且灵活的方式来构建动态、数据驱动的Web应用。Webx的核心设计理念是将业务逻辑、数据访问和用户界面紧密地集成在一起，使得开发者可以更专注...
WebX是一个基于Java的开源Web应用框架，它提供了一种高效、灵活的方式来构建企业级的Web应用程序。在本文中，我们将深入探讨WebX项目实践总结，包括WebX的启动顺序、WebX的使用技巧以及WebX中的表单提交机制。 **一...
Webx响应请求的过程非常独特，它增强了request、response和session的功能，并通过Pipeline流程机制来处理请求，这种方式使得请求处理更加灵活。Webx还提供了异常处理机制和开发模式工具，以帮助开发者处理各种细节...
Webx是一个轻量级的Java Web框架，它是一个开源项目，旨在提供快速且高效的方式来开发Web应用程序。Webx框架指南是一本由Michael Zhou撰写的手册，详细介绍了Webx框架的使用方法和设计理念。 在讨论Webx框架之前，...
8. **工具类库**：WebX 提供了一系列辅助工具类，如日期时间处理、字符串操作等，为开发提供了便利。 9. **插件机制**：WebX 具有良好的扩展性，允许开发者通过插件方式添加新的功能或替换已有功能，增强了框架的...
- **执行流程**：请求处理过程通过Pipeline来管理，包括URI解析、请求上下文处理等多个环节，确保了请求的高效处理。 ### 总结 Webx3.0框架在继承了Webx2的优势基础上，进一步加强了与Spring框架的整合，引入了许多...
本文将对Webx进行深入探讨，主要涵盖其核心概念、工作原理以及与之相关的工具使用。 【描述】： 虽然描述信息为空，但我们可以从“博文链接”中推测，该文档可能包含了一篇关于Webx框架的博主个人经验总结，可能...
Webx框架还包含了对AJAX的支持，允许开发出更富交互性的Web应用。通过异步请求，用户可以在不刷新整个页面的情况下更新部分内容，提升了用户体验。 标签"JAVA"表明Webx是基于Java语言的，因此开发者需要熟悉Java...
**淘宝WEBX框架详解** 淘宝WEBX框架是一个专为大型电子商务平台设计的高效、可扩展的Web应用程序开发框架。这个框架由阿里巴巴技术部门研发，旨在提高开发效率，保证系统的稳定性和可维护性，同时降低新手入门的...
- **Pipeline流程机制**：这是一种基于事件驱动的设计模式，它将请求处理过程拆分成多个阶段，并通过管道（Pipeline）的方式串联起来。这样不仅能够简化代码结构，还方便了后续的维护和扩展。 - **异常处理机制**：...
通过分析这些代码，你可以看到WebX如何处理请求、如何与数据库交互以及如何展示结果。 总的来说，WebX入门指南示例程序是一个很好的学习起点，通过实践和理解这个示例，你将能够掌握WebX的基本概念和用法，为进一步...
llerServlet 是 Webx 框架的核心组件，它负责处理所有以 .htm 和 .do 结尾的请求。通过设置 `init-param` 中的 `initAllServices` 参数为 `true`，我们确保在启动时初始化所有服务。 3.1.2. 创建页面 接下来，我们...
Car文件结构类似于War，但不包含`WEB-INF/web.xml`和`WEB-INF/lib`目录，因为这些配置和依赖在Webx框架中以不同的方式处理。开发者可以在开发阶段将Car视同于War进行开发和调试，而在部署时，可以将多个Car组件打包...
webx3.0学习小结
WEBX是阿里巴巴的内部框架，“就是把页面与Service层之间的一些Servlet等公共的东西抽象出来，提供相应的服务以提高开发效率（《接口测试之Webx简介》—何晓峰 ）”，可以看出，webx和传统的servlet-action模式的...
- **基础框架**：WEBX3.0的基础构建于Spring框架之上，通过提供一系列扩展点来实现高度定制化的开发。 - **层次化**：框架被划分为多个层次，每个层次负责不同的功能模块，这种设计使得开发者可以按需选择使用哪些...
在WebX3中，开发者可以利用其组件化的设计思想，通过拖拽和配置的方式来构建用户界面，极大地提高了开发效率。此外，WebX3支持MVC（Model-View-Controller）架构，使得业务逻辑、视图展示和数据模型分离，有利于代码...