一个容易的AJAX异步通信实例
日期：2014-05-16 浏览次数：20961 次
一个简单的AJAX异步通信实例
textarea失去焦点时异步提交
index.jsp关键代码如下:
第一步：页面编写 其他控件也可，不限于textarea
<s:form action="" method="post">
<div >
<p > 今日心情：</p>
<p >
<textarea id="ta" name="signature" onblur="ajax_submit();" ><s:property value="user.signature"/> //siganature 是user对象的一个属性
</textarea>
</p>
</div>
</s:form>
第二步：在上述页面<head></head>之间加入如下js
<script language="javascript">
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
var deleteStatus ;//存放页面表格删除状态
//改函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//这是一个启动AJAX异步通信的方法
function ajax_submit(){
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态绑定到一个函数
xmlHttp.onreadystatechange=processAjax;
//通过POST方法向指定的URL建立服务器的调用
var url="<%=basePath%>/workPlanAction!deleteWorkPlanDetail.action?dto.workplanDetailId="+detailid;
xmlHttp.open("POST",url,true);
//发送请求
xmlHttp.send(null);
}
//这是一个用来处理状态改变的函数
function processAjax(){
//定义一个变量用于存放 从服务器返回的响应结果
var responseContext="";
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
responseContext = xmlHttp.responseText;
// document.getElementById("ta").value=responseContext;
}
}
}
</script>
第三步：编写action类 关键代码
//待导入包省略
public class UpdateSignatureAction extends ActionSupport implements ServletRequestAware{
public String execute(){
String responseText="";
//读取请求的参数
HttpServletRequest request = ServletActionContext.getRequest();
responseText=request.getParameter("signature");
responseText=new String(responseText.getBytes("ISO-8859-1"),"GBK"); //去掉此行，会出现乱码
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/plain");//设置输出为文字流
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
//直接输出响应的内容
out.println(responseText);
out.flush();
out.close();
其他将签名持久化到数据库的操作略去
return null;
}
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
