XMLhttpRequest 请求 XML,JSON ,POJO 数据

来源：互联网发布：mac keeper劫持编辑：程序博客网时间：2024/06/08 03:41

http://takeme.iteye.com/blog/1691725

在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。

Js代码  
var xmlhttp；  
function getXMLHttpRequest(){  
  if(window.ActiveXObject){  
    xmlhttp:new ActiveXObject("Microsoft.XMLHTTP");  
   }  
  else if(window.XMLHTTPrequest){  
    xmlHttp=new XMLHttpRequest();  
  }  
}  

XMLHttpRequest 对象的方法

Java代码  
abort() 该方法哟用于取消当前的请求。  
  
getAllREsponseHeaders(); 用于获取响应的所有HTTP头部。  
  
getResponseHeaders().从响应信息中获取指定的HTTp头，其使用格式如下：String getResponseHeader(String header);  
  
open():用于创建一个新的Http请求，并指定次请求的方法，URL以及验证消息。其使用格式如下：  
  void open(String method,String url,boolean asynch,String userName ,String password)  
  
send():用于发送请求到HTTP服务器并接受回应，其格式如下：void send(String content)  
  
setRequestHeader() 用于单独指定求的某个http头，其使用格式如下 void setRequestHeader(String header,String value);  
  
onreadyStateChange:该树形用于指定readState树形改变时的事件处理函数，当服务器返回数据到客户端时，需要相印的JavaScript函数去处理这些数据。  
  
responseBody:将响应信息正文以 u;nsigned byte 数组形式返回。  
  
responseText:将响应系响应作为字符串返回  
  
responseXML：将响应信息作为XML Document对象返回。  
  
readState:返回当前请求的状态，有5个可取值，分别为  
   0:为初始化，即对象已建立，但是尚未初始化，（尚未调用open（））  
   1：表示正在加载，此时对象已建立，尚未调用 send()  
   2：表示已加载，即已骠勇send()方法，但是当前状态及Http头未知  
   3：表示交互中，此时已接受部分数据，因为响应及Http头不全，这时通过responseBody和responseText:获取部分参数会出现错误。  
  4：表示完成，即数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据。  
  
status:返回当前请求的HTTP状态码：例如 200对应OK 404：对应Not Found，该属性仅在readyState属性值为 3或者 4有效。  
  
statusText:返回当前请求的响应行状态，例如Ok NotFound。该属性仅在readyState属性值为 3 或者 4时有效。  

--------XMLHttpRequest---------------
示例1：
创建javaweb工程
index.jsp

Html代码  
</head>  
  <%  
    Date now=new Date();  
  %>  
  <body>  
    <center>  
    <h3>当前时间为：<%=now %></h3>  
    <hr/>  
            点击歌名看歌词  
    <input type="button" value="浪子心声" onclick="getLyrice('lzxs')"/>  
    <input type="button" value="暗里着迷" onclick="getLyrice('alzm')"/>  
    <br/><br/>  
    <span id="showLyrice">  
        暂时还没有选择歌曲！  
    </span>  
    </center>  
    <script type="text/javascript">  
        var xmlhttp;  
        function getXMLHttpRequest(){  
            if(window.XMLHttpRequest){  //注意这里 XMLHttpRequest  不是大写的 "HTTP"  
                //针对FireFox,Mozilla,Opera,Safari,IE7,IE8  
                xmlhttp=new XMLHttpRequest();  
                //针对某些特定的版本的mozilla浏览器的BUG进行修正  
                if(xmlhttp.overrideMimeType){  
                    xmlhttp.overrideMimeType("text/html");  
                }  
             }else if(window.ActiveXObject){  
                //针对 IE6 IE5.5 IE5  
                //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中  
                var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
                for(var i=0;i<activexName.length;i++){  
                    try{  
                        //取出控件名称进行创建,如果创建成功终止循环  
                        //如果创建失败,抛出异常,然后可以继续循环,继续尝试  
                        xmlhttp=new ActiveXObject(activexName[i]);  
                        break;  
                    }catch(e){  
          
                    }  
                }  
            }  
            //确认XMLHTTPRequest对象创建成功  
            if(!xmlhttp){  
                alert("XMLHttpRequest对象创建失败!");  
                return;  
            }  
        }  
        function getLyrice(songName){  
            getXMLHttpRequest();  
              
            xmlhttp.open("GET","data.jsp?songName="+songName,true);  
            xmlhttp.onreadystatechange=returnLyrice;  
            xmlhttp.send(null);  
        }  
        //回调函数  
        function returnLyrice(){  
            if(xmlhttp.readyState==4){  
                var lyrics=xmlhttp.responseText;  
                document.getElementById("showLyrice").innerHTML=lyrics;  
            }  
        }  
    </script>  
  </body>  

data.jsp

Html代码  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  
String songName=request.getParameter("songName");  
if("lzxs".equals(songName)){  
    out.println("<br/>");  
    out.println("<font size='5' color='red'>浪子心声</font><br/>");  
    out.println("<font size='2'>刘德华</font><br/>");  
}  
else if("alzm".equals(songName)){  
    out.println("<br/>");  
    out.println("<font size='5' color='red'>暗里着迷</font><br/>");  
    out.println("<font size='2'>刘德华</font><br/>");  
}  
%>  

--------------XML 数据载体--------------
menu.jsp

Html代码  
<body>  
    <h3>级联菜单</h3>  
    选择省份：  
    <select name="provinces" id="provincesID" onchange="getCities()">  
        <option value="">=选择身份=</option>  
        <option value="zj">浙江</option>  
        <option value="gd">广东</option>  
    </select>  
    选择城市：  
    <select name="cities" id="citiesID">  
        <option value="">=选择城市=</option>  
    </select>  
    <script type="text/javascript">  
     var xmlhttp;  
     function getCities(){  
         var province=document.getElementById("provincesID").value;  
         getXMLHttpRequest();  
         xmlhttp.open("GET","${pageContext.request.contextPath}/servlet/XMLServlet?province="+province,true);  
         xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
         xmlhttp.onreadystatechange=returnCities;  
         xmlhttp.send(null);  
     }  
       
     function returnCities(){  
         if(xmlhttp.readyState==4){ //表示请求和响应的处理结束了  
             if(xmlhttp.status==200){ //表示处理后的状态  
                 var returnXML=xmlhttp.responseXML;  
                 var cs=document.getElementById("citiesID");  
                 alert(returnXML);  
                 var city=returnXML.getElementsByTagName("city");  
                 while(cs.childNodes.length>2){  
                     cs.removeChild(cs.childNodes[cs.childNodes.length-1]);  
                 }  
                 for(var i=0;i<city.length;i++){  
                     var option=document.createElement("option");  
                     option.innerText=city[i].firstChild.data;  
                     cs.appendChild(option);  
                 }  
             }  
         }  
     }  
       
     function getXMLHttpRequest(){  
            if(window.XMLHttpRequest){  //注意这里 XMLHttpRequest  不是大写的 "HTTP"  
                //针对FireFox,Mozilla,Opera,Safari,IE7,IE8  
                xmlhttp=new XMLHttpRequest();  
                //针对某些特定的版本的mozilla浏览器的BUG进行修正  
                if(xmlhttp.overrideMimeType){  
                     //如果返回的是xml数据 需要将 text/html --> text/xml  
                    xmlhttp.overrideMimeType("text/xml");  
                }  
             }else if(window.ActiveXObject){  
                //针对 IE6 IE5.5 IE5  
                //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中  
                var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
                for(var i=0;i<activexName.length;i++){  
                    try{  
                        //取出控件名称进行创建,如果创建成功终止循环  
                        //如果创建失败,抛出异常,然后可以继续循环,继续尝试  
                        xmlhttp=new ActiveXObject(activexName[i]);  
                        break;  
                    }catch(e){  
          
                    }  
                }  
            }  
            //确认XMLHTTPRequest对象创建成功  
            if(!xmlhttp){  
                alert("XMLHttpRequest对象创建失败!");  
                return;  
            }  
        }  
    </script>  
  </body>  

xmlServlet.java

Java代码  
import java.io.IOException;  
import java.io.PrintWriter;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
  
public class XMLServlet extends HttpServlet {  
  
      
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
           doPost(request, response);  
    }  
  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        response.setContentType("application/xml;charset=utf-8");  
        //response.setContentType("text/xml;charset=utf-8");  
        PrintWriter out = response.getWriter();  
        String province=request.getParameter("province");  
        System.out.println("param:"+province);  
        StringBuilder sb=new StringBuilder();  
        if("zj".equals(province)){  
            sb.append("<?xml version='1.0' encoding='UTF-8' ?>");  
            sb.append("<cities>");  
            sb.append("<city>杭州</city>");  
            sb.append("<city>宁波</city>");  
            sb.append("<city>温州</city>");  
            sb.append("<city>天台</city>");  
            sb.append("</cities>");  
        }  
        else if("gd".equals(province)){  
            sb.append("<?xml version='1.0' encoding='UTF-8' ?>");  
            sb.append("<cities>");  
            sb.append("<city>广州</city>");  
            sb.append("<city>深圳</city>");  
            sb.append("<city>珠海</city>");  
            sb.append("<city>东莞</city>");  
            sb.append("</cities>");  
        }  
        System.out.println(sb.toString());  
        out.print(sb.toString());  
    }  
  
}  

--------------Json 数据载体--------------

Java代码  
json:(javaScript Object Notation) 是一种轻量级的数据交换格式，它是一种特定额字符串形式来表示的javaScript对象，如果将具有这样一种形式的字符串赋值给一个javaScript变量，该变量随后将引用一个通过指定给该变量的字符串构建对象。  
 JSON是独立于语言的，他主要有如下两种数据结构  
  
1.名/值对的集合  
  在不同的语言中，它白实现为对象（object） 记录（record） 结构(struct) 字典（dictionary） 哈希表（hashCode） 有键列表（key List） 或者 关联数组（associative array ）  
  
2.值的有序列表  
  在大部分语言中，它被实现为数组（array）  

Java代码  
对象:  
  对象是一个无序的名/值对集合。一个对象在以左花括号({) 开始,以右花括号(})结束.每个名称和值之间以(;)分隔,名/值对之间使用英文逗号(,)  
 例如:  
 <script type="text/javascript">  
    var user={"userName":"xiaoqi","sex":"男","age":"24"}  
 </script>  
  
  
数组  
 数组是值(value)的有序集合,一个数组以坐括号([)开始,以右括号结束(]),值之间使用英文(,)逗号分隔  
  例如:  
   <script type="text/javascript">  
   var userName=["xiaoqi","xiaoxue","candy"];  
  </script>  
  
值  
  值可以是双引号括起来的字符串(String) 数组(number) true false null 对象(object) 数组 (array) 这些结构可以嵌套  
  
字符串  
  字符串(String) 是有双引号阔气阿里的认识数量Unicode字符的集合,使用反斜杠(\)转义,一个字符串即一个单独的字符串  
  
数值  
 数值(number)与java中的数值非常相似,但不区分整型值和浮点型.也不支持8进制和16进制格式.  
  
与xml比较  
1:JSON是类型化的,值可以是String number array boolean object null 而xml 是无类型的.所有的值是字符串.  
2.使用JSON 不需要再解析数据.  
  例如:服务器端的响应可以是一下的JSON串:  
  {name:"xiaoqi",age:"24"}  
  使用eval()函数可以将这个JSON串换为javaScript 对象,如下  
  var user=eva('('+xmlhttp.responseText+')');  

示例:

Html代码  
<body>  
    <h3>JSON的使用</h3>  
    <input type="button" value="获取JSON数据" onclick="getInfo()"/>  
    <div id="showInfo"></div>  
<script type="text/javascript">  
    var xmlhttp;  
    function getInfo(){  
        getXMLHttpRequest();  
        xmlhttp.open("GET","jslib/user.txt",true);  
        xmlhttp.onreadystatechange=returnInfo;  
        xmlhttp.send(null);  
    }  
      
    function returnInfo(){  
        if(xmlhttp.readyState=4){  
            if(xmlhttp.status==200){  
                var info=xmlhttp.responseText;  
                var func=new Function("return"+info);  
                var json=func();  
                var value="姓名:<font color='red'>"+json.name+"</font>&nbsp;&nbsp;";  
                value+="年龄:<font color='red'>"+json.age+"</font>";  
                document.getElementById("showInfo").innerHTML=value;  
            }  
        }  
    }  
    function getXMLHttpRequest(){  
            if(window.XMLHttpRequest){  //注意这里 XMLHttpRequest  不是大写的 "HTTP"  
                //针对FireFox,Mozilla,Opera,Safari,IE7,IE8  
                xmlhttp=new XMLHttpRequest();  
                //针对某些特定的版本的mozilla浏览器的BUG进行修正  
                if(xmlhttp.overrideMimeType){  
                     //如果返回的是xml数据 需要将 text/html --> text/xml  
                    xmlhttp.overrideMimeType("text/html");  
                }  
             }else if(window.ActiveXObject){  
                //针对 IE6 IE5.5 IE5  
                //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中  
                var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
                for(var i=0;i<activexName.length;i++){  
                    try{  
                        //取出控件名称进行创建,如果创建成功终止循环  
                        //如果创建失败,抛出异常,然后可以继续循环,继续尝试  
                        xmlhttp=new ActiveXObject(activexName[i]);  
                        break;  
                    }catch(e){  
          
                    }  
                }  
            }  
            //确认XMLHTTPRequest对象创建成功  
            if(!xmlhttp){  
                alert("XMLHttpRequest对象创建失败!");  
                return;  
            }  
        }  
  
</script>      
  </body>  

jslib/user.txt

Java代码  
{name:"xiaoqi",age:"24"}  

--------------------dojo的使用--------------------
1.在webroot文件夹下导入dojo所需要的文件
dojo dojox dijit

示例:dojo.jsp

Html代码  
<body>  
   <div id="showDate"></div><br/>  
   <input type="button" value="获取服务器当前的时间" onclick="getDate()"/>  
   <script type="text/javascript" src="dojo/dojo/dojo.js"></script>  
   <script type="text/javascript">  
    function getDate(){  
        dojo.xhrGet({  
            url:"getDate.jsp",  
            load:returnDate,  
            error:dealError  
        });  
    }  
    function returnDate(data,ioArgs){  
        document.getElementById("showDate").innerHTML=data;  
    }  
      
    function dealError(data,ioArgs){  
        document.getElementById("showDate").innerHTML="服务器访问失败!";  
    }  
     
   </script>  
 </body>  

getDate.jsp

Html代码  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
out.println("服务器当前日期时间为:<font color='red'>"+new Date()+"</font>");  
%>  

--------------Struts2 使用 json-------------------
1.添加 struts2-json-plugin-2.3.4.jar
test.action

Java代码  
package com.sh.action;  
  
import org.apache.struts2.json.annotations.JSON;  
  
import com.opensymphony.xwork2.ActionSupport;  
  
@SuppressWarnings("serial")  
public class Test extends ActionSupport {  
    private int studentId=1001;  
    private String studentName="小霸王";  
    private String studentSex="男";  
    private int studentAge=21;  
    private String studentClass="04PC";  
    private String studentAddress="北京市朝阳区";  
      
//  注释后 返回的json字符串中将没有这个 键值对  
//  public int getStudentId() {  
//      return studentId;  
//  }  
    public void setStudentId(int studentId) {  
        this.studentId = studentId;  
    }  
    public String getStudentName() {  
        return studentName;  
    }  
    public void setStudentName(String studentName) {  
        this.studentName = studentName;  
    }  
    public String getStudentSex() {  
        return studentSex;  
    }  
    public void setStudentSex(String studentSex) {  
        this.studentSex = studentSex;  
    }  
    //添加JSON注解  不序列化  
    @JSON(serialize=false)  
    public int getStudentAge() {  
        return studentAge;  
    }  
    public void setStudentAge(int studentAge) {  
        this.studentAge = studentAge;  
    }  
    public String getStudentClass() {  
        return studentClass;  
    }  
    public void setStudentClass(String studentClass) {  
        this.studentClass = studentClass;  
    }  
    public String getStudentAddress() {  
        return studentAddress;  
    }  
    public void setStudentAddress(String studentAddress) {  
        this.studentAddress = studentAddress;  
    }  
    @Override  
    public String execute() throws Exception {  
        // TODO Auto-generated method stub  
        return SUCCESS;  
    }     
}  

struts.xml

Xml代码  
<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE struts PUBLIC  
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"  
    "http://struts.apache.org/dtds/struts-2.3.dtd">  
  
<struts>   
    <constant name="struts.i18n.encoding" value="utf-8"/>  
    <package name="default" extends="json-default">  
        <action name="test" class="com.sh.action.Test">  
            <result type="json">  
                <param name="excludeProperties">studentAddress</param>  
            </result>  
        </action>  
    </package>  
</struts>  

后面的theme="ajax" 由于 struts-dojo中少了模版文件写的例子都运行不了所以就不发了

----------------------Struts2中采用ajax输入校验-----------
Struts2中的AJax输入校验使用的是DWR矿框架，下面举例介绍在Struts2中使用DWR框架进行AJax输入校验

Java代码  
1.加载DWR文件,使用DWR款家需要在web应用中加载DWRjar文件的jwr.jar 该文件可以通过http://directwebremoting.org/dwr/download 进行下载,下载后将dwr复制到web应用的web-inf/lib目录中  
  
.配置DWR   
 创建一个WEB应用,然后配置好Struts2的开发环境,并添加dwr.jar 然后配置dwr,需要在web.xml文件中配置DWR核心Servlet  

0 0