基础内容：ajax基础
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
//
创建ajax对象 ------此部分是固定的写法兼容各种浏览器版本。
function ajaxFunction(){
var xmlHttp;
try{
// Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
/*
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
*/
alert("readyState:"+xmlHttp.readyState+"||responseText:"+xmlHttp.reponseText);
if(xmlHttp.readyState==4){
//
可以通过 responseText 属性来取回由服务器返回的数据。
/
/响应信息的内容可能有多种不同的形式，例如XML、纯文本、（X）HTML或JavaScript对象符号（JSON）
/*
我们可以根据所接收到的数据格式的不同用两种不同的方法来处理：
1：使用responseText或者responseXML。
纯文本、（X）HTML和JSON都使用responseText。
在纯文本或HTML上使用这个方法是很简单。
2：处理JSON响应信息比处理纯文本或（X）HTML需要多一点技巧
*/
alert("status:"+xmlHttp.status);
if(xmlHttp.status == 200){
//返回json格式
alert("responseText:"+xmlHttp.responseText);
alert("var obj="+xmlHttp.responseText);
alert("uname:"+xmlHttp.responseText.uname);
eval("var obj="+xmlHttp.responseText);
document.myForm.time.value=obj.uname;
//返回xml格式
}
}
}
//
open参数说明
/*
1.发送信息的方式(post,get)
2.发送的目标( url)
3.发送的布尔变量 true代表异步，为false代表同步
*如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
4,5username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
*/
//send() 方法可将请求送往服务器。GET
// xmlHttp.open("GET","servlet/AjaxServlet?uname=123&pwd=456",true);
//xmlHttp.send(null);
xmlHttp.open("POST","servlet/AjaxServlet",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("uname=123&pwd=456");
}
//json测试
function showJSON() {
var user = {
"username":"andy",
"age":20,
"info": {"tel":"123456","cellphone":"98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}
</script>
</head>
<body>
<button onclick="showJSON();">测试json</button>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();"/>
时间: <input type="text" name="time" />
</form>
</body>
</html>
2:AjaxServlet
服务器端servlet代码：
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
/*
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
list.add( "three" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
System.out.println( jsonArray2 );*/
/*
Map map = new HashMap();
map.put( "name","json" );
map.put( "bool",Boolean.TRUE );
map.put( "int",new Integer(1) );
map.put( "arr",new String[]{"a","b"} );
map.put( "func","function(i){ return this.arr[i]; }" );
JSONObject json = JSONObject.fromObject( map );
out.write(json.toString());
*/
//uname="+uname+"&pwd="+pwd",true);
System.out.println(request.getParameter("uname")+"||"+request.getParameter("pwd"));
Map map = new HashMap();
map.put( "uname",request.getParameter("uname"));
map.put( "pwd",request.getParameter("pwd") );
JSONObject json = JSONObject.fromObject( map );
out.write(json.toString());
}
public void doPost(HttpServletRequest request,IOException {
this.doGet(request,response);
}
3：web.xml中配置：
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/servlet/AjaxServlet</url-pattern>
</servlet-mapping>
4：jar（由于用到了json封装java，有关json的）：
说明：
org.apache.commons(3.2以上版本)
org.apache.oro
net.sf.ezmorph(ezmorph-1.0.4.jar)
nu.xom
org.apache.oro
net.sf.ezmorph(ezmorph-1.0.4.jar)
nu.xom
JSON-lib
/////////////////////////////////////////////////////////////////////////////////////
sturts2 中ajax的简单的例子（利用ajax的json插件进行开发相当的方便）
原文链接：https://www.f2er.com/ajax/166291.html