基础内容: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