XMLhttpRequest 请求 XML,JSON ,POJO 数据

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>  ";
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

XMLhttpRequest 请求 XML,JSON ,POJO 数据相关推荐

Ajax解析laravelJSON,3分钟短文：Laravel请求体内JSON格式数据的处理办法
原标题:3分钟短文:Laravel请求体内JSON格式数据的处理办法引言前几篇文章我们讲了表单数据的接收,验证等功能.也说到了传送的数组如何处理, 今天我们说一下如果传送的数据是JSON格式,其处 ...
使用jQuery发送POST，Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
PHP如何通过Http Post请求发送Json对象数据？
因项目的需要,PHP调用第三方 Java/.Net 写好的 Restful Api,其中有些接口,需要在发送 POST 请求时,传入对象. Http中传输对象,最好的表现形式莫过于JSON字符串了, ...
php curl json post请求_php post请求发送json对象数据参数
网页中发送请求时,大部分情况都参数以键值组合发送数据的,而一些第三方如java开发的接口中需要发送post请求,请求参数为json类型. 既然要发送json数据,首页我们需要在请求头中定义数据类型为j ...
ajax返回数据输出成表,javascript代码实例教程-ajax请求返回Json格式数据如何循环输出成table形式...
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过. 首先,Ajax请求数据,(用的是Jquery的Ajax) [javascript] $(function(){ ...
HTTP get请求发送JSON格式数据
get请求一般不建议发送JSON格式的数据,单总有一些奇葩系统要求分享下本人对接途牛传递get请求 json数据的方法第一步:平常的get请求不要想了直接继承 import org.apach ...
ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
JS使用XMLHttpRequest对象POST收发JSON格式数据
JavaScirpt中的XMLHttpRequest对象提供了对 HTTP 协议的完全访问,使用该对象可以在不刷新页面的情况与服务器交互数据.XMLHttpRequest是实现AJAX技术的关键对象, ...

XMLhttpRequest 请求 XML,JSON ,POJO 数据

XMLhttpRequest 请求 XML,JSON ,POJO 数据相关推荐

最新文章

热门文章