用JavaScript实现的Ajax,在性能上要比使用Jquery的ajax方法快一些,,所以说一般情况下,,个人建议还是个人用javascript实现ajax请求较好,javascript主要是利用XMLHttpRequest对象发送异步请求,首先需要定义XMLHttpRequest对象:
<script type="text/javascript">
//定义XMLHttpRequest对象
if(window.XMLHttpRequest){
//兼容Mozilla、Safari等非IE浏览器
var xmlhttprequest = new XMLHttpRequest();
}else{
if(window.ActiveXObject){
//兼容IE浏览器
try{
var xmlhttprequest = new ActiveXObject('Msxml12.XMLHTTP');
}catch(e){
try{
xmlhttprequest = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
}
}
}
}
</script>
然后就是使用该对象,在这里定义了两个,一个是GET方式发送,一个是POST方式发送:
GET方式:
function jsAjaxGet(){
var ul = document.getElementById("jsajaxget");
//调用XMLHttpRequest对象的open方法,打开与服务器之间的同步通信连接
/**
* 建立异步连接
* xmlhttprequest.open(Method,Url,Async,User,Password)方法
* Method:表示Http方法,POST,GET,PUT,PROPFIND
* Url:参数请求的url
* Async:可选项,设置是否为异步通信,
* 默认true表示可以异步,
* 取false,表明异步发出请求之后不需要等待服务端的响应,继续执行其他操作。
* User,password:可选项,表示请求的文件需要进行服务器进行验证
*/
xmlhttprequest.open("GET","Ajax_javascript.action",false);
/**
* 向服务器发送请求
* xmlhttprequest.send(null)
* 只有一个参数,该参数传递客户端发送给服务器的请求数据
* 该方法一般是在POST方式下传递参数,多个参数用&隔开
*/
xmlhttprequest.send(null);
ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";
ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";
ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";
}
POST方式:
function jsAjaxPost(){
var ul = document.getElementById("jsajaxpost");
//调用XMLHttpRequest对象的open方法,打开与服务器之间的同步通信连接
/**
* 建立异步连接
* xmlhttprequest.open(Method,Url,Async,User,Password)方法
* Method:表示Http方法,POST,GET,PUT,PROPFIND
* Url:参数请求的url
* Async:可选项,设置是否为异步通信,
* 默认true表示可以异步,
* 取false,表明异步发出请求之后不需要等待服务端的响应,继续执行其他操作。
* User,password:可选项,表示请求的文件需要进行服务器进行验证
*/
xmlhttprequest.open("POST","Ajax_javascript.action",false);
/**
* 设置请求的消息头
* application/x-www-form-urlencoded表示传递的是表单值
* 一般使用POST都必须设置此项,否则服务器无法识别传递过来的数据
* 虽然该值表示表单值,但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据
* 甚至也可以application/json类型发送JavaScript对象数据
*/
xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
/**
* 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求
* 和其他客户端的普通请求
*/
xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');
/**
* 向服务器发送请求
* xmlhttprequest.send(null)
* 只有一个参数,该参数传递客户端发送给服务器的请求数据
* 该方法一般是在POST方式下传递参数,多个参数用&隔开
*/
xmlhttprequest.send("user=goomoon&com=fantong");
ul.innerHTML += "<li>status:" + xmlhttprequest.status + "</li>";
ul.innerHTML += "<li>statusText:" + xmlhttprequest.statusText + "</li>";
ul.innerHTML += "<li>return:" + xmlhttprequest.responseText + "</li>";
}
写完ajax方法之后,接下来就是定义了连接了:
<ul>
<li>
<a href="javascript:jsAjaxGet();">(GET)javascript ajax testing.</a>
<ul id="jsajaxget"></ul>
</li>
<li>
<a href="javascript:jsAjaxPost();">(POST)javascript ajax testing.</a>
<ul id="jsajaxpost"></ul>
</li>
</ul>
提交的Url是struts2实现的action类,继承自com.opensymphony.xwork2.ActionSupport,主要代码如下:
public String javascript() throws IOException{
HttpServletResponse response = ServletActionContext.getResponse();
PrintWriter out = response.getWriter();
out.print("com:"+com+",");
out.print("user:"+user+",");
out.print("the ajax testing is success");
out.flush();
out.close();
return NONE;
}
最后输出结果图为:
当然这只是利用JS实现Ajax的初级版本,,因为本人还在学习中,,有不及之处还望请各位博友批评指正。。。
分享到:
相关推荐
js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action
3. 在struts2的Action通过2种不同的实现方法返回json格式的字符串。 4. 针对商品实现简单无刷新上传与下载 4. 批量导入数据采用的是导入test文件夹下的测试压缩包upload.rar上传到服务器的临时目录,然后利用WinRar....
关于如何用JavaScript配合servlet 和 action 来实现Ajax
Struts+Jquery+Ajax+Json应用实例,前端引入jquery,后台使用struts框架。前端js调用后台action,并将后台返回的json数据进行解析,设置web页面
jsp通过Ajax无刷新获取Action返回的模拟数据,然后通过struts2转化成json数据返回页面....这里面Map,List,对象等等,一些常用的操作都有。主要的代码在Action和 json.js里面。适合新手入门
ajax实现输入提示(类似百度和Google的输入提示) 用法非常简单: 1、在jsp页面引入autosuggest.js文件 2、建一个text文本框 3、写js代码: <script> new actb("tb", loadAllMessage("suggest" , ""), null); 4、这...
学习对象:熟悉JavaScript, 了解JSTL, servlet/JSP, Struts 1.2, Hibernate, Spring, Ajax技术。 该示例使用MyEclipse 5.5 IDE用来整合四个技术(Struts 1.2, Spring 2.0, Hibernate 3.2和Ajax技术)的轻量级的...
要精通java必看的经典书籍:Ajax中文手册(快速上手),hibernat培训,JavaScript源码大全 v1.0,Struts快速学习指南,全新java基础实践教程,Spring+in+Action中文版
本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能,具体实现代码大家参考下本文。 单文件和多文件的实现区别主要修改两点, 一是插件ajaxfileupload.js里接收file文件ID的方式 二是后台action是数组形式...
页面上jQuery需要把一个复杂类型的javascript数组对象作为参数传到Struts2 action,但是他们的默认格式不匹配导致action无法正确获得参数。 Struts2 action class SomeAction{ List<SomeBean> list; //getter...
本资源包括struts的学习程序,能够完全运行,当然,我是完全调试运行出来的,都是源代码原封上传,还有说明文档。还有自我总结资料,放到下一个文件夹当中上传,这里压缩只有这么多了,希望能去下载,那个全部是文档...
Hibernate 持久性访问层 *.hbm.xml(类—-表,属性–字段) 2注解 项目包 1,action 控制器 2,dao 操作数据库— 3,model 实体类模型 4,service 逻辑业务层 5,util 工具类 log4j.properties 日志文件 *.properties...
Hibernate 持久性访问层 *.hbm.xml(类—-表,属性–字段) 2注解 项目包 1,action 控制器 2,dao 操作数据库— 3,model 实体类模型 4,service 逻辑业务层 5,util 工具类 log4j.properties 日志文件 *.properties...
1:系统功能 ... 2)产品浏览 3)购物车 4)订单创建 2:系统技术架构 1)服务器:Tomcat 2)开发环境:MyEclipse 3)数据库:MySQl ... 2)控制器层(struts2) 3)业务层(JavaBean,Action) 4)数据访问(JDBC+DAO)
技术实现:Struts2、JSP、MySQL、Jquery、Javascript、Ajax 、Json、JUnit 项目描述: 本项目主要实现了用户管理模块、商品分类展示模块、购物车模块、订单模块。 用户管理模块实现了用户注册、实时验证、用户登录...
控制层:Struts2控制器组件、Action组件 c.业务层:Bean组件 d.数据访问层:DAO组件(JDBC) 4.数据库设计 1)数据库导入 create database dangdang; //创建库 use dangdang; //进入dangdang库 set names utf8;...
这是一个1:系统功能 ... 2)产品浏览 3)购物车 4)订单创建 2:系统技术架构 1)服务器:Tomcat 2)开发环境:MyEclipse ... 2)控制器层(struts2) 3)业务层(JavaBean,Action) 4)数据访问(JDBC+DAO)
第七步:写接口的实现类 8、写一个struts.xml 包含use.xml 1)跳转到 /user/register_form.jsp <action name="register" class="action.user.RegistFormAction"> <result name="form">/user/register_form.jsp ...
表现层(V):JSP,js,Ajax(推荐jQuery),EL,Struts2标签 控制层(C):(主)Struts2控制器,Action(分控制器) 业务层(M):JavaBean实现 数据访问(持久层)(M):DAO组件 jQuery+Struts2+JDBC技术 3.数据库...
5.2.2struts2的简单应用 85 5.3struts2基础 87 5.3.1action详解 88 5.3.2结果与视图 91 5.3.3struts.xml的配置 94 5.4值栈与ognl表达式 100 5.5struts2的标签库 103 5.5.1控制标签 103 5.5.2数据标签 104 ...