XMLhttpRequest 请求 XML,JSON ,POJO 数据博客分类:
在使用XMlhttpRequest对象发送请求和响应之前,必须首先使用javaScript对象创建一个XMLHttpRquest对象。
XMLHttpRequest 对象的方法
--------XMLHttpRequest---------------
示例1:
创建javaweb工程
index.jsp
data.jsp
--------------XML 数据载体--------------
menu.jsp
xmlServlet.java
--------------Json 数据载体--------------
示例:
jslib/user.txt
--------------------dojo的使用--------------------
1.在webroot文件夹下导入dojo所需要的文件
dojo dojox dijit
示例:dojo.jsp
getDate.jsp
--------------Struts2 使用 json-------------------
1.添加 struts2-json-plugin-2.3.4.jar
test.action
struts.xml
后面的theme="ajax" 由于 struts-dojo中少了模版文件 写的例子都运行不了 所以就不发了
----------------------Struts2中 采用ajax输入校验-----------
Struts2中的AJax输入校验使用的是DWR矿框架,下面举例介绍在Struts2中使用DWR框架进行AJax输入校验
- var xmlhttp;
- function getXMLHttpRequest(){
- if(window.ActiveXObject){
- xmlhttp:new ActiveXObject("Microsoft.XMLHTTP");
- }
- elseif(window.XMLHTTPrequest){
- xmlHttp=new XMLHttpRequest();
- }
- }
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时有效。
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/>
- 点击歌名看歌词
- <inputtype="button"value="浪子心声"onclick="getLyrice('lzxs')"/>
- <inputtype="button"value="暗里着迷"onclick="getLyrice('alzm')"/>
- <br/><br/>
- <spanid="showLyrice">
- 暂时还没有选择歌曲!
- </span>
- </center>
- <scripttype="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>
</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
- <%@ 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("<fontsize='5'color='red'>浪子心声</font><br/>");
- out.println("<fontsize='2'>刘德华</font><br/>");
- }
- else if("alzm".equals(songName)){
- out.println("<br/>");
- out.println("<fontsize='5'color='red'>暗里着迷</font><br/>");
- out.println("<fontsize='2'>刘德华</font><br/>");
- }
- %>
<%@ 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>
- 选择省份:
- <selectname="provinces"id="provincesID"onchange="getCities()">
- <optionvalue="">=选择身份=</option>
- <optionvalue="zj">浙江</option>
- <optionvalue="gd">广东</option>
- </select>
- 选择城市:
- <selectname="cities"id="citiesID">
- <optionvalue="">=选择城市=</option>
- </select>
- <scripttype="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>
<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
- 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;
- publicclass XMLServlet extends HttpServlet {
- publicvoid doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doPost(request, response);
- }
- publicvoid 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>");
- }
- elseif("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());
- }
- }
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)
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) truefalsenull 对象(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+')');
对象: 对象是一个无序的名/值对集合。一个对象在以左花括号({) 开始,以右花括号(})结束.每个名称和值之间以(;)分隔,名/值对之间使用英文逗号(,) 例如: <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>
- <inputtype="button"value="获取JSON数据"onclick="getInfo()"/>
- <divid="showInfo"></div>
- <scripttype="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> ";
- value+="年龄:<fontcolor='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>
<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> "; 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
- {name:"xiaoqi",age:"24"}
{name:"xiaoqi",age:"24"}
--------------------dojo的使用--------------------
1.在webroot文件夹下导入dojo所需要的文件
dojo dojox dijit
示例:dojo.jsp
- <body>
- <divid="showDate"></div><br/>
- <inputtype="button"value="获取服务器当前的时间"onclick="getDate()"/>
- <scripttype="text/javascript"src="dojo/dojo/dojo.js"></script>
- <scripttype="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>
<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
- <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
- <%
- out.println("服务器当前日期时间为:<fontcolor='red'>"+new Date()+"</font>");
- %>
<%@ 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")
- publicclass Test extends ActionSupport {
- privateint studentId=1001;
- private String studentName="小霸王";
- private String studentSex="男";
- privateint studentAge=21;
- private String studentClass="04PC";
- private String studentAddress="北京市朝阳区";
- // 注释后 返回的json字符串中将没有这个 键值对
- // public int getStudentId() {
- // return studentId;
- // }
- publicvoid setStudentId(int studentId) {
- this.studentId = studentId;
- }
- public String getStudentName() {
- return studentName;
- }
- publicvoid setStudentName(String studentName) {
- this.studentName = studentName;
- }
- public String getStudentSex() {
- return studentSex;
- }
- publicvoid setStudentSex(String studentSex) {
- this.studentSex = studentSex;
- }
- //添加JSON注解 不序列化
- @JSON(serialize=false)
- publicint getStudentAge() {
- return studentAge;
- }
- publicvoid setStudentAge(int studentAge) {
- this.studentAge = studentAge;
- }
- public String getStudentClass() {
- return studentClass;
- }
- publicvoid setStudentClass(String studentClass) {
- this.studentClass = studentClass;
- }
- public String getStudentAddress() {
- return studentAddress;
- }
- publicvoid setStudentAddress(String studentAddress) {
- this.studentAddress = studentAddress;
- }
- @Override
- public String execute() throws Exception {
- // TODO Auto-generated method stub
- return SUCCESS;
- }
- }
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
- <?xmlversion="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>
- <constantname="struts.i18n.encoding"value="utf-8"/>
- <packagename="default"extends="json-default">
- <actionname="test"class="com.sh.action.Test">
- <resulttype="json">
- <paramname="excludeProperties">studentAddress</param>
- </result>
- </action>
- </package>
- </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输入校验
- 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
相关推荐
- **数据格式**:早期的Ajax常使用XML格式传输数据,但现在的应用更多使用JSON,因其更简洁且易于处理。 4. **JavaScript库和框架**: - **jQuery**:简化了Ajax操作,提供了$.ajax()、$.get()、$.post()等函数。...
本知识点主要探讨如何利用Ajax进行前后台数据交换,特别是当后台服务(Servlet)返回的数据类型为JSON(JavaScript Object Notation)时。 **一、Ajax简介** Ajax是一种在不刷新整个网页的情况下,与服务器交换数据...
Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,实现局部数据的更新,而Json(JavaScript Object Notation)则是一种轻量级的数据交换格式,易于人阅读和编写,同时也方便机器解析...
本实例以JSP页面为例,详细阐述Ajax在前后台交互中的应用。 一、Ajax基础概念 1. XMLHttpRequest对象:它是Ajax的核心,负责与服务器建立连接并发送请求,接收响应。 2. 异步:Ajax的核心特性是异步处理,这意味着...
在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object Notation)作为数据交换...
总结来说,C# WebForm实现无刷新前后台交互涉及的技术包括AJAX、UpdatePanel、WebMethod、jQuery、SignalR等,并且需要理解JSON数据交换、错误处理和状态管理等关键概念。通过这些技术的综合运用,开发者可以构建出...
9. **性能优化**:减少不必要的数据传输,使用缓存策略,以及优化服务器端代码,都是提高后台交互性能的重要手段。 10. **前后端分离**:随着前端框架(如React、Vue、Angular)的发展,现代Web应用更多地采用API...
在AJAX中解析JSON数据是常见的操作,尤其在前后端交互时。本篇将详细讲解两种AJAX解析JSON数据的方法,并提供示例代码。 方法一:使用`XMLHttpRequest`对象 在JavaScript中,我们可以使用内置的`XMLHttpRequest`...
在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术是不可或缺的一部分,它允许网页在不刷新整个页面的情况下与服务器进行数据交换。本实例主要关注如何使用AJAX处理复杂的JSON(JavaScript Object ...
在"Ajax Tutorial for Beginners with XML - JSON- Part 2"这个压缩包中,可能包含了第二部分的教程内容,涉及如何在ASP.NET中设置Ajax请求,以及如何处理XML或JSON数据。可能涵盖的话题包括: 1. 创建ASP.NET Web...
总结起来,使用Ajax向PHP服务端发送请求并接收JSON数据涉及的主要步骤包括创建XMLHttpRequest对象、设置回调函数、打开连接、设置请求头、发送请求以及在服务端处理请求和返回JSON数据。理解这些步骤对于Web开发中的...
在Web开发中,JSON常用于后端服务器与前端客户端之间的数据交互,尤其是在AJAX(Asynchronous JavaScript and XML)技术中。 标题“json-servlet-ajax”暗示了我们讨论的重点是关于JSON如何在Servlet和AJAX之间进行...
然后,它会使用AJAX(Asynchronous JavaScript and XML)技术向服务器发送异步请求,请求的数据格式为JSON,这是一种轻量级的数据交换格式,非常适合于前后端之间的数据传输。 在AJAX请求中,通常会使用JavaScript...
本话题主要关注在Web平台中,使用Java后端和JavaScript前端进行JSON数据交互的过程,具体涉及到AJAX(Asynchronous JavaScript and XML)技术以及JSON(JavaScript Object Notation)数据格式。 **1. AJAX**:AJAX ...
然而,实际应用中,XML已经不再是Ajax数据交互的主要格式,JSON(JavaScript Object Notation)因其简洁、易于解析的特性,逐渐成为首选。下面我们将深入探讨Ajax解析XML和JSON的相关知识点。 **一、Ajax基本原理**...
5. AJAX与JSON结合的应用:如何在AJAX请求中使用JSON作为数据格式,实现高效的数据通信,提升用户体验。 6. 实战案例:可能包含一些示例代码或项目,演示如何在实际开发中运用这些技术,例如构建一个动态加载数据的...
在本文件中,我们将深入探讨如何利用XMLHttpRequest接收和处理XML数据,从而使代码更加健壮。 一、XMLHttpRequest对象 XMLHttpRequest对象是JavaScript内置的,用于创建与服务器的连接并发送HTTP请求。创建一个新...
对于Java开发者而言,能够熟练地使用Java代码来发送JSON格式的HTTP POST请求是一项必备技能,它不仅能够增强应用的网络通信能力,还能提升与各种RESTful API的交互效率。 #### 1. 使用`HttpURLConnection`发送POST...
AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术,它结合了 AJAX(Asynchronous JavaScript and XML)和 JSON(JavaScript Object Notation)的优势,使得网页可以在不刷新整个页面的情况下与服务器进行...
在IT领域,Ajax(Asynchronous JavaScript and XML)和JSON(JavaScript Object Notation)是两种非常重要的技术,尤其在创建交互式、动态Web应用程序时。这个"ajax+json"的程序代码示例,显然是为了帮助初学者理解...