用JavaScript实现的Ajax,在性能上要比使用Jquery的ajax方法快一些,,所以说一般情况下,,个人建议还是个人用 javascript实现ajax请求较好,javascript主要是利用XMLHttpRequest对象发送异步请求,首先需要定义 XMLHttpRequest对象:
1
|
<script type=
"text/javascript"
>
|
2
|
//定义XMLHttpRequest对象
|
3
|
if
(window.XMLHttpRequest){
|
4
|
//兼容Mozilla、Safari等非IE浏览器
|
5
|
var
xmlhttprequest =
new
XMLHttpRequest();
|
6
|
}
else
{
|
7
|
if
(window.ActiveXObject){
|
8
|
//兼容IE浏览器
|
9
|
try
{
|
10
|
var
xmlhttprequest =
new
ActiveXObject(
'Msxml12.XMLHTTP'
);
|
11
|
}
catch
(e){
|
12
|
try
{
|
13
|
xmlhttprequest =
new
ActiveXObject(
'Microsoft.XMLHTTP'
);
|
14
|
}
catch
(e){
|
15
|
}
|
16
|
}
|
17
|
}
|
18
|
}
|
19
|
</script>
|
然后就是使用该对象,在这里定义了两个,一个是GET方式发送,一个是POST方式发送:GET方式:
1
|
function
jsAjaxGet(){
|
2
|
var
ul = document.getElementById(
"jsajaxget"
);
|
3
|
//调用XMLHttpRequest对象的open方法,打开与服务器之间的同步通信连接
|
4
|
5
|
/**
|
6
|
* 建立异步连接
|
7
|
* xmlhttprequest.open(Method,Url,Async,User,Password)方法
|
8
|
* Method:表示Http方法,POST,GET,PUT,PROPFIND
|
9
|
* Url:参数请求的url
|
10
|
* Async:可选项,设置是否为异步通信,
|
11
|
* 默认true表示可以异步,
|
12
|
* 取false,表明异步发出请求之后不需要等待服务端的响应,继续执行其他操作。
|
13
|
* User,password:可选项,表示请求的文件需要进行服务器进行验证
|
14
|
*/
|
15
|
xmlhttprequest.open(
"GET"
,
"Ajax_javascript.action"
,
false
);
|
16
|
/**
|
17
|
* 向服务器发送请求
|
18
|
* xmlhttprequest.send(null)
|
19
|
* 只有一个参数,该参数传递客户端发送给服务器的请求数据
|
20
|
* 该方法一般是在POST方式下传递参数,多个参数用&隔开
|
21
|
*/
|
22
|
xmlhttprequest.send(
null
);
|
23
|
24
|
ul.innerHTML +=
"<li>status:"
+ xmlhttprequest.status +
"</li>"
;
|
25
|
ul.innerHTML +=
"<li>statusText:"
+ xmlhttprequest.statusText +
"</li>"
;
|
26
|
ul.innerHTML +=
"<li>return:"
+ xmlhttprequest.responseText +
"</li>"
;
|
27
|
}
|
POST方式:
1
|
function
jsAjaxPost(){
|
2
|
var
ul = document.getElementById(
"jsajaxpost"
);
|
3
|
//调用XMLHttpRequest对象的open方法,打开与服务器之间的同步通信连接
|
4
|
5
|
/**
|
6
|
* 建立异步连接
|
7
|
* xmlhttprequest.open(Method,Url,Async,User,Password)方法
|
8
|
* Method:表示Http方法,POST,GET,PUT,PROPFIND
|
9
|
* Url:参数请求的url
|
10
|
* Async:可选项,设置是否为异步通信,
|
11
|
* 默认true表示可以异步,
|
12
|
* 取false,表明异步发出请求之后不需要等待服务端的响应,继续执行其他操作。
|
13
|
* User,password:可选项,表示请求的文件需要进行服务器进行验证
|
14
|
*/
|
15
|
xmlhttprequest.open(
"POST"
,
"Ajax_javascript.action"
,
false
);
|
16
|
/**
|
17
|
* 设置请求的消息头
|
18
|
* application/x-www-form-urlencoded表示传递的是表单值
|
19
|
* 一般使用POST都必须设置此项,否则服务器无法识别传递过来的数据
|
20
|
* 虽然该值表示表单值,但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据
|
21
|
* 甚至也可以application/json类型发送JavaScript对象数据
|
22
|
*/
|
23
|
xmlhttprequest.setRequestHeader(
'Content-type'
,
'application/x-www-form-urlencoded'
);
|
24
|
/**
|
25
|
* 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求
|
26
|
* 和其他客户端的普通请求
|
27
|
*/
|
28
|
xmlhttprequest.setRequestHeader(
'User-Agent'
,
'XMLHTTP'
);
|
29
|
30
|
/**
|
31
|
* 向服务器发送请求
|
32
|
* xmlhttprequest.send(null)
|
33
|
* 只有一个参数,该参数传递客户端发送给服务器的请求数据
|
34
|
* 该方法一般是在POST方式下传递参数,多个参数用&隔开
|
35
|
*/
|
36
|
xmlhttprequest.send(
"user=goomoon&com=fantong"
);
|
37
|
38
|
ul.innerHTML +=
"<li>status:"
+ xmlhttprequest.status +
"</li>"
;
|
39
|
ul.innerHTML +=
"<li>statusText:"
+ xmlhttprequest.statusText +
"</li>"
;
|
40
|
ul.innerHTML +=
"<li>return:"
+ xmlhttprequest.responseText +
"</li>"
;
|
41
|
}
|
写完ajax方法之后,接下来就是定义了连接了:
1
|
<ul>
|
2
|
<li>
|
3
|
<a href=
"javascript:jsAjaxGet();"
>(GET)javascript ajax testing.</a>
|
4
|
<ul id=
"jsajaxget"
></ul>
|
5
|
</li>
|
6
|
<li>
|
7
|
<a href=
"javascript:jsAjaxPost();"
>(POST)javascript ajax testing.</a>
|
8
|
<ul id=
"jsajaxpost"
></ul>
|
9
|
</li>
|
10
|
</ul>
|
提交的Url是struts2实现的action类,继承自com.opensymphony.xwork2.ActionSupport,主要代码如下:
1
|
public
String javascript()
throws
IOException{
|
2
|
3
|
HttpServletResponse response = ServletActionContext.getResponse();
|
4
|
PrintWriter out = response.getWriter();
|
5
|
6
|
out.print(
"com:"
+com+
","
);
|
7
|
out.print(
"user:"
+user+
","
);
|
8
|
out.print(
"the ajax testing is success"
);
|
9
|
out.flush();
|
10
|
out.close();
|
11
|
return
NONE;
|
12
|
}
|
最后输出结果图为:
当然这只是利用JS实现Ajax的初级版本,,因为本人还在学习中,,有不及之处还望请各位博友批评指正。。。
相关推荐
总结来说,通过这种方式,我们可以利用AJAX向Struts2 Action传递JSON数组,实现异步数据交互。这在动态更新页面内容、处理表单提交等场景下非常有用。同时,使用JSON作为数据交换格式,使得前后端的数据交换变得更加...
2. **Struts2 Action处理请求**:创建一个Struts2 Action类,定义一个方法处理请求,返回JSON数据。需要在struts.xml配置文件中添加对应的Action配置,并指定结果类型为json。 ```java public class MyAction ...
### Struts2整合jQuery实现Ajax功能 #### 一、引言 随着Web应用程序的发展,用户对交互性和响应速度的要求越来越高。传统的Web表单提交方式已无法满足这些需求,因此Ajax技术逐渐成为提升用户体验的重要手段之一。...
在这个"struts2 jqurey ajax简单实例"中,我们将探讨如何将这三个技术结合,以实现一个动态且高效的Web应用。 首先,Struts2中的Action类是业务逻辑的核心。当你在页面上触发一个事件,比如点击一个按钮,这个事件...
Struts2的Action类接收Ajax请求,处理请求参数,然后调用相应的服务方法。 **Ajax** (Asynchronous JavaScript and XML) 是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在本案例中,当用户...
- **Struts2 Action** 类:接收Ajax请求,调用Spring管理的业务逻辑。 - **Spring Service** 类:负责用户登录逻辑,如校验用户名和密码,处理认证过程。 - **Spring DAO** 类:与数据库交互,查询用户信息。 - **...
Struts2提供了`struts2-jquery-plugin`和`struts2-json-plugin`两个插件来实现Ajax功能。在这个实例中,我们将主要使用`struts2-json-plugin`,它能够方便地将Action的结果以JSON格式返回给客户端。 1. **环境配置*...
2. **Struts2 Action**:在服务器端,需要创建一个Struts2 Action类,这个类的执行结果将作为Ajax响应返回给客户端。Action类中定义的方法需要与Ajax请求对应,并且可以返回JSON或其他类型的数据。 3. **Struts2 ...
5. **OGNL(Object-Graph Navigation Language)**:Struts2使用OGNL作为默认的表达式语言,用于在Action与视图之间传递数据,支持动态属性访问和方法调用。 6. **插件系统**:Struts2拥有丰富的插件库,如Tiles、...
在本教程中,我们将深入探讨如何结合JSON(JavaScript Object Notation)和Struts2来实现Ajax功能。 首先,理解JSON的基本概念至关重要。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和...
在Struts2框架中,我们可以利用Ajax来实现二级联动效果,即在一个下拉框的选择改变时,通过Ajax请求动态地更新另一个下拉框的内容。 首先,我们需要了解Struts2的Action类,它是处理用户请求的核心。在实现二级联动...
例如,Struts2的Action类通常会注入Spring管理的Service,Service再通过Hibernate操作数据库,而Ajax请求则可能直接调用Struts2的Action或通过DWR与服务器交互。这样的设计模式提高了代码的可测试性和可维护性,降低...
"Struts2+jQuery+Ajax实现头像上传切割图片"是一个典型的Web开发技术组合,它结合了Struts2作为后端MVC框架,jQuery作为前端JavaScript库,以及Ajax进行异步数据传输,来提供流畅的图片上传和裁剪功能。以下将详细...
当用户在输入框中输入用户名时,通过AJAX发送一个请求到服务器,服务器端的Struts2 Action将执行验证逻辑,然后返回结果给前端。前端JavaScript根据返回的结果动态更新提示信息。 以下是实现这个功能的关键步骤: ...
在Struts2中,我们可以使用Struts2的JSON插件将Action的返回值转换为JSON格式,方便前端JavaScript进行处理。 最后,JQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。在本例中...
Struts2是一个基于MVC设计模式的Java EE框架,用于构建可维护性和可扩展性高的企业级应用程序,而DWR则是一种使得JavaScript可以调用服务器端Java方法的库,实现了AJAX的异步通信。下面我们将深入探讨这两个技术以及...
在提供的"strutsjson"压缩包中,应该包含了一个完整的项目实例,包括Struts配置文件、Action类、JSON处理的Java类以及前端的JavaScript代码。通过分析这些文件,你可以更好地理解如何实现Ajax Struts无刷新访问后台...
Struts2是一个强大的MVC(Model-View-Controller)框架,广泛应用于Java Web开发中,而Ajax(Asynchronous JavaScript and XML)则是一种在无需重新加载整个网页的情况下更新部分网页的技术,能够实现页面的异步交互...
通过定义Action类和配置Struts.xml,我们可以控制请求的流向,实现请求与响应的解耦。 **Spring**: Spring 是一个全面的Java企业级应用开发框架,它的核心特性包括依赖注入(DI)和面向切面编程(AOP)。在本项目中...
7. **struts2-json-plugin**: 提供JSON支持,使得Action可以直接返回JSON格式的数据,方便前后端的Ajax交互。 8. **struts2-tiles-plugin**: Tiles是用于构建页面布局的框架,Struts2的这个插件使其能与Tiles集成,...