XMLhttpRequest 请求 XML,JSON ,POJO 数据
在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。var xmlhttp；function getXMLHttpRequest(){if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHTTPrequest){ xmlHttp=new XMLHttpRequest();}}
XMLHttpRequest 对象的方法
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
</head><%Date now=new Date();%><body> <center> <h3>当前时间为：<%=now %></h3> <hr/> 点击歌名看歌词 <input type="button" value="浪子心声" /> <input type="button" value="暗里着迷" /> <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); 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
<%@ 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
<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); } for(var i=0;i<city.length;i++){ var option=document.createElement("option"); option.innerText=city.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); break; }catch(e){ } } } //确认XMLHTTPRequest对象创建成功 if(!xmlhttp){ alert("XMLHttpRequest对象创建失败!"); return; } }</script></body>
xmlServlet.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 数据载体--------------
json:(javaScript Object Notation) 是一种轻量级的数据交换格式，它是一种特定额字符串形式来表示的javaScript对象，如果将具有这样一种形式的字符串赋值给一个javaScript变量，该变量随后将引用一个通过指定给该变量的字符串构建对象。 JSON是独立于语言的，他主要有如下两种数据结构1.名/值对的集合在不同的语言中，它白实现为对象（object） 记录（record） 结构(struct) 字典（dictionary） 哈希表（hashCode） 有键列表（key List） 或者 关联数组（associative array ）2.值的有序列表在大部分语言中，它被实现为数组（array）
对象:对象是一个无序的名/值对集合。一个对象在以左花括号({) 开始,以右花括号(})结束.每个名称和值之间以(;)分隔,名/值对之间使用英文逗号(,) 例如: <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+')');
示例:
<body> <h3>JSON的使用</h3> <input type="button" value="获取JSON数据" /> <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); break; }catch(e){ } } } //确认XMLHTTPRequest对象创建成功 if(!xmlhttp){ alert("XMLHttpRequest对象创建失败!"); return; } }</script> </body>
jslib/user.txt
{name:"xiaoqi",age:"24"}
--------------------dojo的使用--------------------
1.在webroot文件夹下导入dojo所需要的文件
dojodojoxdijit
示例:dojo.jsp
<body> <div id="showDate"></div><br/> <input type="button" value="获取服务器当前的时间" /> <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
<%@ 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
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;}@Overridepublic String execute() throws Exception {// TODO Auto-generated method stubreturn SUCCESS;}}
struts.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输入校验
1.加载DWR文件,使用DWR款家需要在web应用中加载DWRjar文件的jwr.jar 该文件可以通过http://directwebremoting.org/dwr/download 进行下载,下载后将dwr复制到web应用的web-inf/lib目录中 2.配置DWR 创建一个WEB应用,然后配置好Struts2的开发环境,并添加dwr.jar 然后配置dwr,需要在web.xml文件中配置DWR核心Servlet
页:
[1]