20130428 sturts2对ajax的支持_cid=70511530&pwd=123&type=1-优快云博客

本文链接：https://blog.youkuaiyun.com/prpjava2011/article/details/8999719

基础内容：ajax基础

简单的ajax的测试，向服务器发送请求（post或者get）并获取所传送的参数。在文本框中显示。

1 :index.jsp页面：测试页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

// 创建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;

}

// onreadystatechange 属性存有处理服务器响应的函数。

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。

responseText方法用于那些并非基于XML的格式。它把响应信息作为字符串，返回精确的内容。

纯文本、（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);

// 没有调用eval()之前不能获取json对象，只有在eval()中处理了才能编程js所识别的json格式。

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 ,5 username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

//send() 方法可将请求送往服务器。GET

// xmlHttp.open("GET","servlet/AjaxServlet?uname=123&pwd=456",true);

//xmlHttp.send(null);

//send()POST 需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单,表单包含中文信息需要编码<切记>

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 οnclick="showJSON();">测试json</button>

用户: <input type="text" name="username" οnkeyup="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, HttpServletResponse response)

throws ServletException, IOException {

this.doGet(request, response);

}

3：web.xml中配置：

<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

JSON-lib

sturts2 中ajax的简单的例子（利用ajax的json插件进行开发相当的方便）