- 浏览: 1570667 次
- 来自: 上海
文章分类
- 全部博客 (374)
- Java (101)
- Struts (54)
- Oracle (30)
- JavaScript (16)
- Spring (27)
- Hibernate (16)
- MyEclipse (3)
- JSF (1)
- FreeMarker (2)
- SiteMesh (2)
- JfreeChart (2)
- Ibatis (2)
- JSP (12)
- MyBatis (4)
- SWFupload (1)
- EJB (4)
- Jboss (4)
- WebService (2)
- Linux (16)
- Android (2)
- XML (6)
- Java 网络编程 (13)
- AXIS2 (1)
- FTP (1)
- Jswing (1)
- Socket (3)
- 杂文选集 (6)
- solr (2)
- PS (1)
- Tomcat (7)
- JDBC (9)
- Highcharts (1)
- maven (1)
- Nodejs (0)
- navicat (2)
- Exception (5)
- eclipse (3)
- jQuery (1)
- springMVC (4)
- MySQL (11)
- SVN (1)
- Sql Server (1)
- zookeeper (1)
- JVM (1)
- Groovy (2)
- Git (1)
- Nginx (1)
- DynamicReport (1)
- IDEA (2)
- JasperReports (1)
- Postgresql (2)
- Mac (1)
- gradle (1)
- 数据结构算法 (1)
最新评论
-
hpu145:
引用引用
java 千分位的添加和去除 -
被遗忘的下路:
少了个junit-4.8.2的包
SSH2整合完整案例(四十三) -
白天看黑夜:
java过滤emoji字符处理,希望能帮到你http://ww ...
emoji 表情图片解决方法 -
caipeiming:
这个挺好JavaScript实现input输入框控件只允许输入 ...
js 控制文本框只能输入中文、英文、数字等 -
双子树:
东西太好啦受教啊
Struts2 JSP中将list,set ,Map传递到Action然后<s:iterator>遍历(三十五)
在使用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"); } 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="浪子心声" 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("<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[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; 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数据" 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"}
--------------------dojo的使用--------------------
1.在webroot文件夹下导入dojo所需要的文件
dojo dojox dijit
示例:dojo.jsp
<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("服务器当前日期时间为:<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; } @Override public String execute() throws Exception { // TODO Auto-generated method stub return 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
发表评论
-
JS 数组操作
2014-12-02 17:44 11561、数组的创建 var arrayObj = new Ar ... -
Ajax 传递数组到后台
2014-12-02 17:29 18459function login123(){ var n ... -
jquery 获取表单数据
2014-11-26 13:54 1311<html> <head> & ... -
JavaScript 图片滚动,无缝滚动
2014-07-08 11:23 1428//支持 左右,滚动 ,上下滚动的话,同理, 修 ... -
JavaScript 计时器,倒计时
2014-07-08 11:13 1150先看效果 //列表的的效果 //单个效果 va ... -
jQuery的deferred对象详解
2014-02-21 15:13 914原文地址:http://www.ruanyifeng.com/ ... -
Jquery template 小demo
2014-02-20 20:04 686<!DOCTYPE html> <h ... -
用 ant和 YUIcompressor 对css,js压缩小demo
2014-02-20 20:00 1382<?xml version="1.0&qu ... -
js === 和 == 的区别
2014-01-21 23:18 790如果是基本类型 var ... -
js 钱大小写转换,和 数值格式化
2013-08-28 20:21 1692var num=56.45678; var rs1=num. ... -
js 打印
2013-08-28 20:04 1129js web页面打印 //关键的就下面两行 会用就行了 ... -
jquery Iframe 父子窗体
2013-08-12 18:26 1983子窗体的操作 //获取 父窗体 ... -
Jquery 修改按钮的单击函数
2013-08-09 21:44 2125场景button的 onclick 初试化的时候 函数手动写上 ... -
js 控制文本框只能输入中文、英文、数字等
2012-09-25 09:08 11769总而言之:先在<input>里输入onkeyup= ... -
JS 判断时间大小(一)
2012-08-22 11:37 19871.使用 Date.parse() var starttime ...
相关推荐
14_利用XMLHttpRequest接受与处理XML数据.doc XMLHttpRequest 接受 处理 XML数据
java代码发送JSON格式的httpPOST请求
XmlHttpRequest与XMLDOM的完整使用示例
本文实例讲述了javascript解析ajax返回的xml和json格式数据。分享给大家供大家参考,具体如下: 写个例子,以备后用 一、JavaScript 解析返回的xml格式的数据: 1、javascript版本的ajax发送请求 (1)、创建...
假巢 拦截AJAX调用以基于JSON数据伪造REST服务器。 在 (用于XMLHTTPRequest )或 (用于fetch )的顶部使用它,以在没有服务器的情况下在浏览器端(例如单页应用程序)测试JavaScript REST客户端。用法伪...
AJAX(XMLHttpRequest)进行跨域请求方法详解
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码,可直接用于项目开发。
通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以...
05-使用XMLHttpRequest对象发送和接收XML数据,及乱码问题的解决.pdf
1. 熟悉Ajax开发步骤,能够使用Ajax进行数据请求; 2. 掌握XMLHttpRequest对象的常用方法和属性; 3. 学会使用Ajax同步/异步请求文本数据(字符串); 4. 掌握XML的编写规范,能够编写XML文件; 5. 学会使用Ajax同步...
接收响应数据 //判断对象的状态是交互完成 if (xmlhttp.readyState == 4) { //判断http的交互是否成功 if (xmlhttp.status == 200) { //使用responseXML的方式来接收XML数据对象的DOM对象 var domObj = ...
XmlHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
Ajax 简单实例 XMLHttpRequest对象的创建,请求,发送,仅供初学者
delphi7使用IXMLHTTPRequest实现RESTful的访问及返回json数据的解析,推送消息段HMACSHA1加密编码
压缩包“ajax.rar”内含:“《掌握Ajax.chm》”和“...掌握 Ajax,第 10 部分: 使用 JSON 进行数据传输 http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/ 掌握 Ajax,第 11 部分: 服务器端的 JSON ...
由于之前写源生项目, 采用jQuery的 Ajax 请求后端接口,觉得在...使用的是 XMLHttpRequest 发送请求。 这个js 类我还添加了请求拦截,以及请求加载中弹框,一个简单实用的工具。 注释多。欢迎有兴趣的同行,浏览使用!
1.js对象 XMLHttpRequest 属性: 1.readyState属性 ...请求正文,请求数据。 事件处理器:指向一个函数。 1.onreadystatechange XMLHttpRequest对象的readyState的每次变化,该函数就会被触发调用
XMLHttpRequest Ajax xml http request
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。...如果尝试从不同的域请求数据,会出现安全错误。如果能控制数据驻留的远程服务器并且每个请