原生js的ajax与sturts2实例

来源：互联网发布：粒子滤波 python 编辑：程序博客网时间：2024/05/18 20:08

以前一直用jquery中的ajax与后台交互，$.post()，简洁大方。（从未想过要用js原生的，写一大堆代码。以前偷过的懒，早晚都是要还的，好了，还的时候到了。）

1.前台页面。使用ajax发出请求。

(1)写了个通用的创建XMLHttpRequest的方法，该方法可以实现跨浏览器创建XHR对象，同时，使用了“惰性载入函数”，减少了创建XHR对象都要去遍历if分支的操作，避免执行不必要的操作。

代码概要：

var createXHR=(function(){//使用一个匿名函数，并且立即执行，实现块级作用域的功能，每个分支都返回一个function，该function能实现使用该页面支持的方式创建一个XHR对象

if(){//支持XMLHttpRequest对象的浏览器

return function(){

};

}else if(){//不支持，例如早期ie

return function(){};

}else{//不支持ajax的浏览器

}

})();

var createXHR=(function () {if (window.XMLHttpRequest) {return function() {return new XMLHttpRequest();};} else if (typeof ActiveXObject != 'undefined') {return function() {var xhrName = [ "MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];for ( var i = 0, len = xhrName.length; i < len; i++) {try {new ActiveXObject(xhrName[i]);arguments.callee.activeXString = xhrName[i];//在函数内创建一个activeXString的变量break;} catch (ex) {}}return new ActiveXObject(arguments.callee.activeXString);};} else {return function() {throw new Error('no XHR object available');};}})();

（2）创建一个XHR后，还需要给onreadystatechange属性赋值，确定当状态发生改变时调用的处理方法，然后调用open方法，然后调用send方法。

function ajax(){var xhr = createXHR();//创建xhr对象xhr.onreadystatechange = function() {//状态发生改变时调用的方法if (xhr.readyState == 4) {if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {callback(xhr.responseText);} else {alert("error");}}};xhr.open("post", "testAction2", true);//打开连接，但未发送数据var form = document.forms[0];xhr.send(new FormData(form));//发送FromData数据}function callback(data){//获取到服务器的相应数据之后，调用的回调函数var contentE = document.getElementById("content");var html = "";console.log(data);data = JSON.parse(data);data=data.result;console.log(data);for (i in data) {html +="<tr>";var tempt = data[i];for (key in data[i]) {html += "<td>" + tempt[key] + "</td>";}html += "</tr>";}contentE.innerHTML=html;}

（3）html代码

<body><form>name:<input type="text" name="username" /><br>sex:<input type="radio" name="sex" value="Female"  checked="checked"/><input type="radio" name="sex" value="male"  /><br>degree:<select name="degree"><option value="highSchool">highSchool</option><option value="bachelor">bachelor</option><option value="master">master</option><option value="doctor">doctor</option></select><br></form><input type='button' value="submit" onclick='ajax()'/><br>result:<div><table id="content"></table></div></body>

2.服务器端采用struts进行请求的接收和处理。

（1）action代码

package com.zd.servlet;import java.util.ArrayList;import java.util.Collection;import java.util.List;import java.util.Vector;import com.opensymphony.xwork2.ActionSupport;import com.zd.entity.UserInfo;/**  * @ClassName: TestAction2  * @Description: TODO * @author Dan Zhang  * @date 2014-4-10 上午08:58:42  *   */public class TestAction2 extends ActionSupport {private String username;private String sex;private String degree;private List<UserInfo> result;@Overridepublic String execute() throws Exception {// TODO Auto-generated method stubSystem.out.println(this.username+" | "+this.sex+" | "+this.degree);List<UserInfo> tempt=_getSomeInfos();this.result=tempt;return "success";}public List<UserInfo> getResult() {return result;}public void setUsername(String username) {this.username = username;}public void setSex(String sex) {this.sex = sex;}public void setDegree(String degree) {this.degree = degree;}public List<UserInfo> _getSomeInfos() {List<UserInfo> result=new ArrayList<UserInfo>();UserInfo u=null;for(int i=0;i<2;i++){u=new UserInfo();u.setUsername("zhang"+i);if(i%2==0){u.setSex("Female");u.setAddress("四川");u.setSchool("CSU");}else{u.setSex("Male");u.setAddress("湖南长沙");u.setSchool("CWNU");}result.add(u);}Collection nuCon = new Vector();nuCon.add(null);result.removeAll(nuCon);//return result.subList(0,result.size()-1);return result;}}

（2）action配置，注意result-type的配置

<package name="json" extends="json-default" namespace="/"><!-- 登录验证 -->    <action name="testAction2" class="com.zd.servlet.TestAction2"><result name="success" type="json"></result>   </action>   </package>

另外一种配置方式,两者效果一样，返回给浏览器的都是json格式的数据

<package name="tutorial" extends="struts-default" namespace="/">        <result-types>            <result-type name="json" class="org.apache.struts2.json.JSONResult"/>        </result-types>            <action name="testAction2" class="com.zd.servlet.TestAction2">        <result  type="json" />        </action>

</package>

0 0