当前位置:首页 > 开发 > 编程语言 > Json > 正文

XMLhttpRequest 请求 XML,JSON ,POJO 数据

发表于: 2012-10-09   作者:Luob.   来源:转载   浏览:
摘要: 在使用XMlhttpRequest对象发送请求和响应之前,必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp; function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
在使用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="浪子心声" 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>&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
{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 

XMLhttpRequest 请求 XML,JSON ,POJO 数据

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSeriali
一、XML解析 通过继承org.xml.sax.helpers.DefaultHandler类,覆写characters(),startDocument(),st
需要使用的框架 spring3.0 jquery1.9.0(简化ajax开发的js库) Jackson(json处理器):jackson-core-as
javascript 代码: $.ajax({ url: "http://10.255.32.250/recent_done_seven_days", data: '', data
相信很多朋友都遇到过做接口对接的时候要根据接口文档的输入输出写一大堆实体类,这类工作又繁琐,
jQuery Ajax请求XML格式数据 HTML部分: <body> <form action='javascript:void(0);' meth
1. 前言 由于公司的一个项目是基于B/S架构与WEB服务通信,使用XML数据作为通信数据,在添加新功能时
转载请注明出处:http://blog.csdn.net/stevenhu_223/article/details/42520233 本博文相关的Demo下
PHP默认只识别application/x-www.form-urlencoded标准的数据类型,因此,对型如text/xml 或者 soap
同一个url,使用普通的http请求和使用Ajax请求时,在请求头里有一个字段不同。 Ajax请求 普通http请
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号