您的位置：首页 > Web前端 > JavaScript

原生js的ajax与sturts2实例

2014-04-10 10:49 519 查看
以前一直用jquery中的ajax与后台交互，$.post()，简洁大方。（从未想过要用js原生的，写一大堆代码。以前偷过的懒，早晚都是要还的，好了，还的时候到了。）  1.前台页面。使用ajax发出请求。(1)写了个通用的创建XMLHttpRequest的方法，该方法可以实现跨浏览器创建XHR对象，同时，使用了“惰性载入函数”，减少了创建XHR对象都要去遍历if分支的操作，避免执行不必要的操作。代码概要：var createXHR=(function(){//使用一个匿名函数，并且立即执行，实现块级作用域的功能，每个分支都返回一个function，该function能实现使用该页面支持的方式创建一个XHR对象if(){//支持XMLHttpRequest对象的浏览器return function(){};}else if(){//不支持，例如早期iereturn 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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航