AJax总结

发布时间：2020-12-15 22:05:41 所属栏目：百科来源：网络整理

导读：今日写了一个管理网站其中用到了AJax以前没毕业的时候用JQuery倒是用过后来由于公司的现实让我做游戏后做手机应用的缘故对这些东西的记忆也很模糊了，这次使用加以总结。先来说个使用纯生AJAX的例子吧，看代码：首先我们需要这样一个对象（在下面的loadXML

今日写了一个管理网站其中用到了AJax以前没毕业的时候用JQuery倒是用过后来由于公司的现实让我做游戏后做手机应用的缘故对这些东西的记忆也很模糊了，这次使用加以总结。

先来说个使用纯生AJAX的例子吧，看代码：

首先我们需要这样一个对象（在下面的loadXMLDoc中进行赋值）

var xmlhttp;

根据不同的浏览器及不同版本，变量的初始化方式有所不同，其实这个方法记得还可以细分，不过太久不用忘了，如果有兴趣的可以自己查一下，这里不做多解释了
function loadXMLDoc() {
xmlhttp = null;

if (window.XMLHttpRequest) {// code for Firefox,Opera,IE7,etc.
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {

} else {
alert("Your browser does not support XMLHTTP.");
}
}

提供给页面用于调用AJAX请求的方法
function modifyall() {

对xmlhttp进行赋值
loadXMLDoc();

定义接收服务器返回请求的方法
xmlhttp.onreadystatechange = reback;

这个是一个在页面中定义的变量，这个变量其实就是你的项目名的路径，定义方式如：<input id="basepath" type="hidden" value=" <%= request.getContextPath()%>">

var basepath=document.getElementById("basepath").value;

定义请求的URL，这里需主意红色部分其实就是给服务器一个随机数，这是我之前用JQuery的时候使用ajax时候发现的一个BUG，当一个ajax的请求在之前发生过，那么有可能页面不相应这次请求，所以让它有个随机数跟着保证每次的请求都不一样（注：纯生的AJAX是否有这样的问题我没有去尝试，不过安全期间我就直接处理了，如果没有这个参数可不加）
xmlhttp.open("GET",basepath+"/ajax/piliangAction?xxx="+document.getElementById("xxx").value+"&random="+ Math.random(),true);

发送
xmlhttp.send(null);
}

// the method is the recalled method of the login function for Ajax
function reback(data) {

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
if (xmlhttp.readyState == 4) {

200就是正确的返回了页面的值，其他常见的还有500：服务器端代码错误、404找不到页面等
if (xmlhttp.status == 200) {

这里就可以通过从服务器端接受到的json数据进行对页面的局部内容刷新了
var ids = eval("(" + xmlhttp.responseText + ")").allelementid;
alert("this is your Json data send by the server。 allelementid:"+ids);
} else {
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}

//-----------------------------------------------------------------------------------------------以上是页面的js代码

下方的是Struts2的Action代码这里有几个重点

/**
*普通的变量用来和页面进行传输数据，Struts2自动传值，需要给出其get/set方法
**/
private String allelementid;

/**
*自定义的逻辑处理类，用来处理你和数据交互等其他复杂的操作，之前用SSH架构的时候用JQruey的Ajax遇到了一个问题，估计Struts2也有这个问题所以在此声明：

*Struts2由于为了编程的方便只要提供变量的get与set就分别可以从服务器端与页面相互传递信息，但这种复杂的逻辑类一旦也有了get方法在ACtion处理数据返回给页面的时候就也会把它进行处理，似乎里面的某些机制对这东西的解析是有问题的这就会导致服务器端的异常，所以安全期间，除要返回给页面的数据外其它变量只给一个set方法就够了，不要给get

**/
private XMLElementDao xmlElementDao;

public String getAllelementid() {
return allelementid;
}

public void setAllelementid(String allelementid) {
this.allelementid = allelementid;
}

public void setXmlElementDao(XMLElementDao xmlElementDao) {
this.xmlElementDao = xmlElementDao;
}

/**

*这个方法就是Struts2的默认接受处理的方法了，在这里笔者还有个经验想要说说，这里对于好奇心重一些的朋友而言，我们确实可以在Struts2的配置文件里修改他这个接受处理的方法如下：

不过AJAX似乎就是这么哏的东西有时出错莫名其妙的（最有可能的解释当然是我能力有限，但看这帖子的大多都不是大神，对这东西多少都有些盲点没有了解，所以我就一概而论了）之前在写这个程序的时候就是如此，其它的东西都一样就是没有使用默认方法但是一直报服务器端异常，没办法最后换成这个就好用了，虽然我现在想想虽然也有可能是tomcat缓存的问题但这种东西最好就用这种默认方法，每个ajax请求都单独写一个action类防止其它的请求的变量在Struts2的封装的时候出一些莫名奇妙的问题。

**/

public String execute() throws Exception{
xmlElementDao.updPiLiang(allelementid);
return "success";
}

struts2 配置

这里有个很重要的包啊struts2-json-plugin.jar不然你死都不知道怎么似的我死了一下午~~！，貌似好像要 2.1版本之后的我用的是struts2-json-plugin-2.2.1.jar反正这东西就是越新越好

这样Struts2的Ajax用法和注意事项就基本介绍完了

//------------------------------------------------------------------------------------------------------------------------------

Servlet的话其实跟正常的条转没什么区别这里就不多说了

简单来说个例子：传给页面的参数方式：response.getWriter().println("{"loginresult":"ok"}");

js接收数据： var result=eval("("+xmlhttp.responseText+")").loginresult;

//-------------------------------------------------------------------------------------------------------------------------------

$(document).ready(function(){
$("#register").click(function() {
var basepath = $("#basepath").val();
$.getJSON(basepath+ "/register.action?xxxx="+Math.random(),"username="+$("#username").val()+"&password="+$("#password").val(),
function(data) {
if(data.ret==null||data.ret==""){
window.location="index.jsp";
}else{
$("#result").html(“错误信息：”+data.ret);
}
} );
});
});

这个就是用JQuery的js代码，其实看着是挺舒心啊,简单易懂,我之所以不用它一是认为它大还有一个比较惨痛的经验，当时随便写一个工程引用的js很多，也不知道JQuery到底和哪个引用冲突啊，结果就是不对，弄得我是各种抓耳挠腮，从那之后我就发了恨了，只要可以坚决不用外部的js可能这想法有点偏激毕竟JQuery等这种知名一般情况下兼容性是很好的。

未解决猜想：

上面的Strut2例子都是以常见的JSON数据类型来处理的，我其实很想研究一下怎么用Strust2的普通数据类型来完成虽然到最后我还是失败了，不过觉得一定有其它的办法可以解决，先把我写的东西弄上来记录一下以后有时间再继续搞。

public class PiLiangAction implements ServletResponseAware{

private String jsonResult;

public String getJsonResult() {
return jsonResult;
}
public String setJsonResult(String jsonResult) {
this.jsonResult=jsonResult;
}

private HttpServletResponse response;

public void setResponse(HttpServletResponse response) {
this.response = response;
}

@Override
public void setServletResponse(HttpServletResponse arg0) {
setResponse(arg0);

//-----------------------------------------------------------------------js

到了js的回调就不行了状态始终是404 xmlhttp.responseText的值也没有被我改变始终是这么个东西：<html><head><title>Apache Tomcat/7.0.6 - Error report</title><style></style> </head><body><h1>HTTP Status 404 - result 'null' not found</h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u>result 'null' not found</u></p><p><b>description</b> <u>The requested resource (result 'null' not found) is not available.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/7.0.6</h3></body></html>

我想，如果能够在Action中成功的修改状态或者修改resqonse的值那么这个想法就可以实现。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!