`

XMLhttpRequest请求XML,JSON,POJO数据(完整的ajax前后台交互代码)

 
阅读更多

XMLhttpRequest 请求 XML,JSON ,POJO 数据博客分类：

ajaxXMLhttpREquestXMLJSONPOJO
在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。
Js代码 复制代码 收藏代码
  1. var xmlhttp；
  2. function getXMLHttpRequest(){
  3. if(window.ActiveXObject){
  4. xmlhttp:new ActiveXObject("Microsoft.XMLHTTP");
  5. }
  6. elseif(window.XMLHTTPrequest){
  7. xmlHttp=new XMLHttpRequest();
  8. }
  9. } 
var xmlhttp；
function getXMLHttpRequest(){
  if(window.ActiveXObject){
    xmlhttp:new ActiveXObject("Microsoft.XMLHTTP");
   }
  else if(window.XMLHTTPrequest){
    xmlHttp=new XMLHttpRequest();
  }
}

XMLHttpRequest 对象的方法
Java代码 复制代码 收藏代码
  1. abort() 该方法哟用于取消当前的请求。
  3. getAllREsponseHeaders(); 用于获取响应的所有HTTP头部。
  5. getResponseHeaders().从响应信息中获取指定的HTTp头，其使用格式如下：String getResponseHeader(String header);
  7. open():用于创建一个新的Http请求，并指定次请求的方法，URL以及验证消息。其使用格式如下：
  8. void open(String method,String url,boolean asynch,String userName ,String password)
  10. send():用于发送请求到HTTP服务器并接受回应，其格式如下：void send(String content)
  12. setRequestHeader() 用于单独指定求的某个http头，其使用格式如下 void setRequestHeader(String header,String value);
  14. onreadyStateChange:该树形用于指定readState树形改变时的事件处理函数，当服务器返回数据到客户端时，需要相印的JavaScript函数去处理这些数据。
  16. responseBody:将响应信息正文以 u;nsigned byte 数组形式返回。
  18. responseText:将响应系响应作为字符串返回
  20. responseXML：将响应信息作为XML Document对象返回。
  22. readState:返回当前请求的状态，有5个可取值，分别为
  23. 0:为初始化，即对象已建立，但是尚未初始化，（尚未调用open（））
  24. 1：表示正在加载，此时对象已建立，尚未调用 send()
  25. 2：表示已加载，即已骠勇send()方法，但是当前状态及Http头未知
  26. 3：表示交互中，此时已接受部分数据，因为响应及Http头不全，这时通过responseBody和responseText:获取部分参数会出现错误。
  27. 4：表示完成，即数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据。
  29. status:返回当前请求的HTTP状态码：例如 200对应OK 404：对应Not Found，该属性仅在readyState属性值为 3或者 4有效。
  31. statusText:返回当前请求的响应行状态，例如Ok NotFound。该属性仅在readyState属性值为 3 或者 4时有效。 
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代码 复制代码 收藏代码
  1. </head>
  2. <%
  3. Date now=new Date();
  4. %>
  5. <body>
  6. <center>
  7. <h3>当前时间为：<%=now %></h3>
  8. <hr/>
  9. 点击歌名看歌词
  10. <inputtype="button"value="浪子心声"onclick="getLyrice('lzxs')"/>
  11. <inputtype="button"value="暗里着迷"onclick="getLyrice('alzm')"/>
  12. <br/><br/>
  13. <spanid="showLyrice">
  14. 暂时还没有选择歌曲！
  15. </span>
  16. </center>
  17. <scripttype="text/javascript">
  18. var xmlhttp;
  19. function getXMLHttpRequest(){
  20. if(window.XMLHttpRequest){ //注意这里 XMLHttpRequest 不是大写的 "HTTP"
  21. //针对FireFox,Mozilla,Opera,Safari,IE7,IE8
  22. xmlhttp=new XMLHttpRequest();
  23. //针对某些特定的版本的mozilla浏览器的BUG进行修正
  24. if(xmlhttp.overrideMimeType){
  25. xmlhttp.overrideMimeType("text/html");
  26. }
  27. }else if(window.ActiveXObject){
  28. //针对 IE6 IE5.5 IE5
  29. //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中
  30. var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  31. for(var i=0;i<activexName.length;i++){
  32. try{
  33. //取出控件名称进行创建,如果创建成功终止循环
  34. //如果创建失败,抛出异常,然后可以继续循环,继续尝试
  35. xmlhttp=new ActiveXObject(activexName[i]);
  36. break;
  37. }catch(e){
  39. }
  40. }
  41. }
  42. //确认XMLHTTPRequest对象创建成功
  43. if(!xmlhttp){
  44. alert("XMLHttpRequest对象创建失败!");
  45. return;
  46. }
  47. }
  48. function getLyrice(songName){
  49. getXMLHttpRequest();
  51. xmlhttp.open("GET","data.jsp?songName="+songName,true);
  52. xmlhttp.onreadystatechange=returnLyrice;
  53. xmlhttp.send(null);
  54. }
  55. //回调函数
  56. function returnLyrice(){
  57. if(xmlhttp.readyState==4){
  58. var lyrics=xmlhttp.responseText;
  59. document.getElementById("showLyrice").innerHTML=lyrics;
  60. }
  61. }
  62. </script>
  63. </body>
</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代码 复制代码 收藏代码
  1. <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. String songName=request.getParameter("songName");
  7. if("lzxs".equals(songName)){
  8. out.println("<br/>");
  9. out.println("<fontsize='5'color='red'>浪子心声</font><br/>");
  10. out.println("<fontsize='2'>刘德华</font><br/>");
  11. }
  12. else if("alzm".equals(songName)){
  13. out.println("<br/>");
  14. out.println("<fontsize='5'color='red'>暗里着迷</font><br/>");
  15. out.println("<fontsize='2'>刘德华</font><br/>");
  16. }
  17. %>
<%@ 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代码 复制代码 收藏代码
  1. <body>
  2. <h3>级联菜单</h3>
  3. 选择省份：
  4. <selectname="provinces"id="provincesID"onchange="getCities()">
  5. <optionvalue="">=选择身份=</option>
  6. <optionvalue="zj">浙江</option>
  7. <optionvalue="gd">广东</option>
  8. </select>
  9. 选择城市：
  10. <selectname="cities"id="citiesID">
  11. <optionvalue="">=选择城市=</option>
  12. </select>
  13. <scripttype="text/javascript">
  14. var xmlhttp;
  15. function getCities(){
  16. var province=document.getElementById("provincesID").value;
  17. getXMLHttpRequest();
  18. xmlhttp.open("GET","${pageContext.request.contextPath}/servlet/XMLServlet?province="+province,true);
  19. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  20. xmlhttp.onreadystatechange=returnCities;
  21. xmlhttp.send(null);
  22. }
  24. function returnCities(){
  25. if(xmlhttp.readyState==4){ //表示请求和响应的处理结束了
  26. if(xmlhttp.status==200){ //表示处理后的状态
  27. var returnXML=xmlhttp.responseXML;
  28. var cs=document.getElementById("citiesID");
  29. alert(returnXML);
  30. var city=returnXML.getElementsByTagName("city");
  31. while(cs.childNodes.length>2){
  32. cs.removeChild(cs.childNodes[cs.childNodes.length-1]);
  33. }
  34. for(var i=0;i<city.length;i++){
  35. var option=document.createElement("option");
  36. option.innerText=city[i].firstChild.data;
  37. cs.appendChild(option);
  38. }
  39. }
  40. }
  41. }
  43. function getXMLHttpRequest(){
  44. if(window.XMLHttpRequest){ //注意这里 XMLHttpRequest 不是大写的 "HTTP"
  45. //针对FireFox,Mozilla,Opera,Safari,IE7,IE8
  46. xmlhttp=new XMLHttpRequest();
  47. //针对某些特定的版本的mozilla浏览器的BUG进行修正
  48. if(xmlhttp.overrideMimeType){
  49. //如果返回的是xml数据 需要将 text/html --> text/xml
  50. xmlhttp.overrideMimeType("text/xml");
  51. }
  52. }else if(window.ActiveXObject){
  53. //针对 IE6 IE5.5 IE5
  54. //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中
  55. var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  56. for(var i=0;i<activexName.length;i++){
  57. try{
  58. //取出控件名称进行创建,如果创建成功终止循环
  59. //如果创建失败,抛出异常,然后可以继续循环,继续尝试
  60. xmlhttp=new ActiveXObject(activexName[i]);
  61. break;
  62. }catch(e){
  64. }
  65. }
  66. }
  67. //确认XMLHTTPRequest对象创建成功
  68. if(!xmlhttp){
  69. alert("XMLHttpRequest对象创建失败!");
  70. return;
  71. }
  72. }
  73. </script>
  74. </body>
<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代码 复制代码 收藏代码
  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  10. publicclass XMLServlet extends HttpServlet {
  13. publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
  14. throws ServletException, IOException {
  15. doPost(request, response);
  16. }
  18. publicvoid doPost(HttpServletRequest request, HttpServletResponse response)
  19. throws ServletException, IOException {
  20. response.setContentType("application/xml;charset=utf-8");
  21. //response.setContentType("text/xml;charset=utf-8");
  22. PrintWriter out = response.getWriter();
  23. String province=request.getParameter("province");
  24. System.out.println("param:"+province);
  25. StringBuilder sb=new StringBuilder();
  26. if("zj".equals(province)){
  27. sb.append("<?xml version='1.0' encoding='UTF-8' ?>");
  28. sb.append("<cities>");
  29. sb.append("<city>杭州</city>");
  30. sb.append("<city>宁波</city>");
  31. sb.append("<city>温州</city>");
  32. sb.append("<city>天台</city>");
  33. sb.append("</cities>");
  34. }
  35. elseif("gd".equals(province)){
  36. sb.append("<?xml version='1.0' encoding='UTF-8' ?>");
  37. sb.append("<cities>");
  38. sb.append("<city>广州</city>");
  39. sb.append("<city>深圳</city>");
  40. sb.append("<city>珠海</city>");
  41. sb.append("<city>东莞</city>");
  42. sb.append("</cities>");
  43. }
  44. System.out.println(sb.toString());
  45. out.print(sb.toString());
  46. }
  48. } 
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代码 复制代码 收藏代码
  1. json:(javaScript Object Notation) 是一种轻量级的数据交换格式，它是一种特定额字符串形式来表示的javaScript对象，如果将具有这样一种形式的字符串赋值给一个javaScript变量，该变量随后将引用一个通过指定给该变量的字符串构建对象。
  2. JSON是独立于语言的，他主要有如下两种数据结构
  4. 1.名/值对的集合
  5. 在不同的语言中，它白实现为对象（object） 记录（record） 结构(struct) 字典（dictionary） 哈希表（hashCode） 有键列表（key List） 或者 关联数组（associative array ）
  7. 2.值的有序列表
  8. 在大部分语言中，它被实现为数组（array） 
json:(javaScript Object Notation) 是一种轻量级的数据交换格式，它是一种特定额字符串形式来表示的javaScript对象，如果将具有这样一种形式的字符串赋值给一个javaScript变量，该变量随后将引用一个通过指定给该变量的字符串构建对象。
 JSON是独立于语言的，他主要有如下两种数据结构

1.名/值对的集合
  在不同的语言中，它白实现为对象（object） 记录（record） 结构(struct) 字典（dictionary） 哈希表（hashCode） 有键列表（key List） 或者 关联数组（associative array ）

2.值的有序列表
  在大部分语言中，它被实现为数组（array）

Java代码 复制代码 收藏代码
  1. 对象:
  2. 对象是一个无序的名/值对集合。一个对象在以左花括号({) 开始,以右花括号(})结束.每个名称和值之间以(;)分隔,名/值对之间使用英文逗号(,)
  3. 例如:
  4. <script type="text/javascript">
  5. var user={"userName":"xiaoqi","sex":"男","age":"24"}
  6. </script>
  9. 数组
  10. 数组是值(value)的有序集合,一个数组以坐括号([)开始,以右括号结束(]),值之间使用英文(,)逗号分隔
  11. 例如:
  12. <script type="text/javascript">
  13. var userName=["xiaoqi","xiaoxue","candy"];
  14. </script>
  16. 值
  17. 值可以是双引号括起来的字符串(String) 数组(number) truefalsenull 对象(object) 数组 (array) 这些结构可以嵌套
  19. 字符串
  20. 字符串(String) 是有双引号阔气阿里的认识数量Unicode字符的集合,使用反斜杠(\)转义,一个字符串即一个单独的字符串
  22. 数值
  23. 数值(number)与java中的数值非常相似,但不区分整型值和浮点型.也不支持8进制和16进制格式.
  25. 与xml比较
  26. 1:JSON是类型化的,值可以是String number array boolean object null 而xml 是无类型的.所有的值是字符串.
  27. 2.使用JSON 不需要再解析数据.
  28. 例如:服务器端的响应可以是一下的JSON串:
  29. {name:"xiaoqi",age:"24"}
  30. 使用eval()函数可以将这个JSON串换为javaScript 对象,如下
  31. var user=eva('('+xmlhttp.responseText+')'); 
对象:
  对象是一个无序的名/值对集合。一个对象在以左花括号({) 开始,以右花括号(})结束.每个名称和值之间以(;)分隔,名/值对之间使用英文逗号(,)
 例如:
 <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代码 复制代码 收藏代码
  1. <body>
  2. <h3>JSON的使用</h3>
  3. <inputtype="button"value="获取JSON数据"onclick="getInfo()"/>
  4. <divid="showInfo"></div>
  5. <scripttype="text/javascript">
  6. var xmlhttp;
  7. function getInfo(){
  8. getXMLHttpRequest();
  9. xmlhttp.open("GET","jslib/user.txt",true);
  10. xmlhttp.onreadystatechange=returnInfo;
  11. xmlhttp.send(null);
  12. }
  14. function returnInfo(){
  15. if(xmlhttp.readyState=4){
  16. if(xmlhttp.status==200){
  17. var info=xmlhttp.responseText;
  18. var func=new Function("return"+info);
  19. var json=func();
  20. var value="姓名:<font color='red'>"+json.name+"</font>&nbsp;&nbsp;";
  21. value+="年龄:<fontcolor='red'>"+json.age+"</font>";
  22. document.getElementById("showInfo").innerHTML=value;
  23. }
  24. }
  25. }
  26. function getXMLHttpRequest(){
  27. if(window.XMLHttpRequest){ //注意这里 XMLHttpRequest 不是大写的 "HTTP"
  28. //针对FireFox,Mozilla,Opera,Safari,IE7,IE8
  29. xmlhttp=new XMLHttpRequest();
  30. //针对某些特定的版本的mozilla浏览器的BUG进行修正
  31. if(xmlhttp.overrideMimeType){
  32. //如果返回的是xml数据 需要将 text/html --> text/xml
  33. xmlhttp.overrideMimeType("text/html");
  34. }
  35. }else if(window.ActiveXObject){
  36. //针对 IE6 IE5.5 IE5
  37. //两个可以创建XMLHTTPRequest对象额控件名称保存在js数据中
  38. var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  39. for(var i=0;i<activexName.length;i++){
  40. try{
  41. //取出控件名称进行创建,如果创建成功终止循环
  42. //如果创建失败,抛出异常,然后可以继续循环,继续尝试
  43. xmlhttp=new ActiveXObject(activexName[i]);
  44. break;
  45. }catch(e){
  47. }
  48. }
  49. }
  50. //确认XMLHTTPRequest对象创建成功
  51. if(!xmlhttp){
  52. alert("XMLHttpRequest对象创建失败!");
  53. return;
  54. }
  55. }
  57. </script>
  58. </body>
<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代码 复制代码 收藏代码
  1. {name:"xiaoqi",age:"24"} 
{name:"xiaoqi",age:"24"}


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

示例:dojo.jsp
Html代码 复制代码 收藏代码
  1. <body>
  2. <divid="showDate"></div><br/>
  3. <inputtype="button"value="获取服务器当前的时间"onclick="getDate()"/>
  4. <scripttype="text/javascript"src="dojo/dojo/dojo.js"></script>
  5. <scripttype="text/javascript">
  6. function getDate(){
  7. dojo.xhrGet({
  8. url:"getDate.jsp",
  9. load:returnDate,
  10. error:dealError
  11. });
  12. }
  13. function returnDate(data,ioArgs){
  14. document.getElementById("showDate").innerHTML=data;
  15. }
  17. function dealError(data,ioArgs){
  18. document.getElementById("showDate").innerHTML="服务器访问失败!";
  19. }
  21. </script>
  22. </body>
 <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代码 复制代码 收藏代码
  1. <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
  2. <%
  3. out.println("服务器当前日期时间为:<fontcolor='red'>"+new Date()+"</font>");
  4. %>
<%@ 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代码 复制代码 收藏代码
  1. package com.sh.action;
  3. import org.apache.struts2.json.annotations.JSON;
  5. import com.opensymphony.xwork2.ActionSupport;
  7. @SuppressWarnings("serial")
  8. publicclass Test extends ActionSupport {
  9. privateint studentId=1001;
  10. private String studentName="小霸王";
  11. private String studentSex="男";
  12. privateint studentAge=21;
  13. private String studentClass="04PC";
  14. private String studentAddress="北京市朝阳区";
  16. // 注释后 返回的json字符串中将没有这个 键值对
  17. // public int getStudentId() {
  18. // return studentId;
  19. // }
  20. publicvoid setStudentId(int studentId) {
  21. this.studentId = studentId;
  22. }
  23. public String getStudentName() {
  24. return studentName;
  25. }
  26. publicvoid setStudentName(String studentName) {
  27. this.studentName = studentName;
  28. }
  29. public String getStudentSex() {
  30. return studentSex;
  31. }
  32. publicvoid setStudentSex(String studentSex) {
  33. this.studentSex = studentSex;
  34. }
  35. //添加JSON注解 不序列化
  36. @JSON(serialize=false)
  37. publicint getStudentAge() {
  38. return studentAge;
  39. }
  40. publicvoid setStudentAge(int studentAge) {
  41. this.studentAge = studentAge;
  42. }
  43. public String getStudentClass() {
  44. return studentClass;
  45. }
  46. publicvoid setStudentClass(String studentClass) {
  47. this.studentClass = studentClass;
  48. }
  49. public String getStudentAddress() {
  50. return studentAddress;
  51. }
  52. publicvoid setStudentAddress(String studentAddress) {
  53. this.studentAddress = studentAddress;
  54. }
  55. @Override
  56. public String execute() throws Exception {
  57. // TODO Auto-generated method stub
  58. return SUCCESS;
  59. }
  60. } 
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代码 复制代码 收藏代码
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <!DOCTYPE struts PUBLIC
  3. "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
  4. "http://struts.apache.org/dtds/struts-2.3.dtd">
  6. <struts>
  7. <constantname="struts.i18n.encoding"value="utf-8"/>
  8. <packagename="default"extends="json-default">
  9. <actionname="test"class="com.sh.action.Test">
  10. <resulttype="json">
  11. <paramname="excludeProperties">studentAddress</param>
  12. </result>
  13. </action>
  14. </package>
  15. </struts>
<?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. 1.加载DWR文件,使用DWR款家需要在web应用中加载DWRjar文件的jwr.jar 该文件可以通过http://directwebremoting.org/dwr/download 进行下载,下载后将dwr复制到web应用的web-inf/lib目录中
  3. .配置DWR
  4. 创建一个WEB应用,然后配置好Struts2的开发环境,并添加dwr.jar 然后配置dwr,需要在web.xml文件中配置DWR核心Servlet
分享到：
| js 控制文本框只能输入中文、英文、数字等 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax与后台交互案例组件

    - **数据格式**：早期的Ajax常使用XML格式传输数据，但现在的应用更多使用JSON，因其更简洁且易于处理。 4. **JavaScript库和框架**： - **jQuery**：简化了Ajax操作，提供了$.ajax()、$.get()、$.post()等函数。...

    Ajax与servlet后台交互，数据类型JSON

    本知识点主要探讨如何利用Ajax进行前后台数据交换，特别是当后台服务（Servlet）返回的数据类型为JSON（JavaScript Object Notation）时。 **一、Ajax简介** Ajax是一种在不刷新整个网页的情况下，与服务器交换数据...

    前台ajax与后台json传递

    Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下，实现局部数据的更新，而Json（JavaScript Object Notation）则是一种轻量级的数据交换格式，易于人阅读和编写，同时也方便机器解析...

    简单Ajax实例(带前后台交互)

    本实例以JSP页面为例，详细阐述Ajax在前后台交互中的应用。 一、Ajax基础概念 1. XMLHttpRequest对象：它是Ajax的核心，负责与服务器建立连接并发送请求，接收响应。 2. 异步：Ajax的核心特性是异步处理，这意味着...

    ajax+json实例

    在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object Notation）作为数据交换...

    c# webform无刷新前后台交互

    总结来说，C# WebForm实现无刷新前后台交互涉及的技术包括AJAX、UpdatePanel、WebMethod、jQuery、SignalR等，并且需要理解JSON数据交换、错误处理和状态管理等关键概念。通过这些技术的综合运用，开发者可以构建出...

    C# 前后台交互访问

    9. **性能优化**：减少不必要的数据传输，使用缓存策略，以及优化服务器端代码，都是提高后台交互性能的重要手段。 10. **前后端分离**：随着前端框架（如React、Vue、Angular）的发展，现代Web应用更多地采用API...

    ajax 解析json数据

    在AJAX中解析JSON数据是常见的操作，尤其在前后端交互时。本篇将详细讲解两种AJAX解析JSON数据的方法，并提供示例代码。 方法一：使用`XMLHttpRequest`对象 在JavaScript中，我们可以使用内置的`XMLHttpRequest`...

    ajax请求复杂的json数据实例

    在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是不可或缺的一部分，它允许网页在不刷新整个页面的情况下与服务器进行数据交换。本实例主要关注如何使用AJAX处理复杂的JSON（JavaScript Object ...

    基于ASP.NET+XML +JSON实现的Ajax 异步数据操作程序源码例子

    在"Ajax Tutorial for Beginners with XML - JSON- Part 2"这个压缩包中，可能包含了第二部分的教程内容，涉及如何在ASP.NET中设置Ajax请求，以及如何处理XML或JSON数据。可能涵盖的话题包括： 1. 创建ASP.NET Web...

    使用Ajax向PHP服务端发送请求并返回JSON数据

    总结起来，使用Ajax向PHP服务端发送请求并接收JSON数据涉及的主要步骤包括创建XMLHttpRequest对象、设置回调函数、打开连接、设置请求头、发送请求以及在服务端处理请求和返回JSON数据。理解这些步骤对于Web开发中的...

    json-servlet-ajax

    在Web开发中，JSON常用于后端服务器与前端客户端之间的数据交互，尤其是在AJAX（Asynchronous JavaScript and XML）技术中。 标题“json-servlet-ajax”暗示了我们讨论的重点是关于JSON如何在Servlet和AJAX之间进行...

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    然后，它会使用AJAX（Asynchronous JavaScript and XML）技术向服务器发送异步请求，请求的数据格式为JSON，这是一种轻量级的数据交换格式，非常适合于前后端之间的数据传输。 在AJAX请求中，通常会使用JavaScript...

    平台java前端ajax，json请求

    本话题主要关注在Web平台中，使用Java后端和JavaScript前端进行JSON数据交互的过程，具体涉及到AJAX（Asynchronous JavaScript and XML）技术以及JSON（JavaScript Object Notation）数据格式。 **1. AJAX**：AJAX ...

    Ajax 解析XML+json总结

    然而，实际应用中，XML已经不再是Ajax数据交互的主要格式，JSON（JavaScript Object Notation）因其简洁、易于解析的特性，逐渐成为首选。下面我们将深入探讨Ajax解析XML和JSON的相关知识点。 **一、Ajax基本原理**...

    2020年 json，xml，ajax封装.rar

    5. AJAX与JSON结合的应用：如何在AJAX请求中使用JSON作为数据格式，实现高效的数据通信，提升用户体验。 6. 实战案例：可能包含一些示例代码或项目，演示如何在实际开发中运用这些技术，例如构建一个动态加载数据的...

    14_利用XMLHttpRequest接受与处理XML数据.doc

    在本文件中，我们将深入探讨如何利用XMLHttpRequest接收和处理XML数据，从而使代码更加健壮。 一、XMLHttpRequest对象 XMLHttpRequest对象是JavaScript内置的，用于创建与服务器的连接并发送HTTP请求。创建一个新...

    AjaxJson 实例 AjaxJson

    AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术，它结合了 AJAX（Asynchronous JavaScript and XML）和 JSON（JavaScript Object Notation）的优势，使得网页可以在不刷新整个页面的情况下与服务器进行...

    ajax+json程序代码

    在IT领域，Ajax（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）是两种非常重要的技术，尤其在创建交互式、动态Web应用程序时。这个"ajax+json"的程序代码示例，显然是为了帮助初学者理解...

    ajax struts 无刷新访问后台返回json数据

    **Ajax Struts 无刷新访问后台返回JSON数据详解** 在Web开发中，为了提供更流畅、高效的用户体验，无刷新（Ajax）技术被广泛应用于页面更新。结合Struts框架，我们可以实现后端服务与前端交互，返回JSON数据，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics