Ajax---发送参数：使用JSON替代XML向服务器发送数据

最新推荐文章于 2017-03-15 19:57:54 发布

kaertiger

最新推荐文章于 2017-03-15 19:57:54 发布

阅读量2.6k

点赞数

分类专栏： J2EE 文章标签： json 服务器 xml xmlhttprequest javascript 数据结构

本文链接：https://blog.csdn.net/kaertiger/article/details/4457283

版权

J2EE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引：使用XML向服务器发送数据的数据结构很复杂。通过串连接来创建XML串并不好，这也不是用来生成或修改XML数据结构的健壮技术。

---------------------------------------------------------------------------------------------------------------------------------------------------

JSON概述：

==========

xml 的一个替代方法是JSON，可以在www.json.org 找到。JSON是一种文本格式，它独立于具体语言，但是使用了与C

系列语言（如C,C# , Javascript等）类似的约定。JSON建立在以下两种数据结构基础上。当前几乎所有编程语言都支持这两种数据结构。

*名/值对集合。在当前编程语言中，这实现为一个对象，记录或字典。

*值的有序表。这通常实现为一个数组。

因为这些结构得到了如此众多的编程语言的支持，所以JSON是一个理想的选择，可以作为异构系统之间的一种数据转换格式。另外，由于JSON是基于标准Javascript的子集，所以在所有当前WEB浏览器上都应该是兼容的。

JSON对象是名/值对的无序集合。对象以{开始，以}结束，名/值对用冒号分隔。JSON数组是一个有序的值集合，以【开始，以】结束，数组中的值用逗号分隔。值可以是串（用双引号引起），数值，true 或false，对象，或者是数组，因此结构可以嵌套。

考虑一下employee对象简单例子。employee对象可能包含名，姓，员工号和职位等数据。使用JSON，可以如下表示employee对象实例：

var employee ={

"firstName":John

,"lastName":Doe

,"employeeNumber":123

,"title" :"Accountant"

}

然后可以使用标准点记法使用对象的属性，如下所示：

var lastName =employee.lastName; //Access the last Name

var title = employee.title; //Access the title

employee.employeeNumber = 456; //change the employee number

JSON有一点很引以为豪，就是他是一个轻量级的数据互换格式。如果用XML来描述同样的employee对象，可能是如下的麻烦：

<title>Accountant</title>

</employee>

显然，JSON编码比XML编码简单。JSON编码比较小，所以如果在网络上发送大量数据，可能会带来显著的性能差异。

www.json.org网站列出了至少与其他编程语言的14种绑定，这说明，不论在服务器端使用何种技术，都能通过JSON与浏览器通信。

使用JSON的示例：

下面是一个简单的例子，展示了如何使用JSON将Javascript对象转换为串格式，并使用Ajax技术奖这个串发送到服务器，然后服务器根据这个串创建一个对象。这个例子中没有业务逻辑，也几乎没有用户交互，她强调的是客户端和服务器端的JSON技术。

代码清单: jsonExample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用JSON替代XML向服务器发送数据</title>  <mce:script type="text/javascript" src="../js/json2.js" mce_src="js/json2.js" ></mce:script> <mce:script type="text/javascript" src="../js/jsonExample.js" mce_src="js/jsonExample.js" ></mce:script> </head> <body> <br/><br/> <form action="#"> <input type=button value="CLICK here to send JSON data to the server" οnclick="doJSON();" /> </form> <h2>sever Response</h2> <div id="serverResponse"></div> </body> </html>

js/json2.js------>所需JSON的JS文件

js/jsonExample.js

var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } function doJSON(){ alert("start json..."); var car = getCarObject(); //use the JSON Javascript library to stringify the Car Object //使用JSON Javascript库(可以从www.json.org免费获得)将Car对象转换为JSON串 var carAsJSON = JSON.stringify(car); alert("Car object as JSON:/n "+carAsJSON); var url ="../servlet/JSONExample?timeStamp="+new Date().getTime(); alert("start create xmlhttprequest.."); createXMLHttpRequest(); xmlHttp.open("POST",url,true); xmlHttp.onreadystatechange= handleStateChange; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xmlHttp.send(carAsJSON); } function handleStateChange(){ alert("xmlHttp.readyState= "+xmlHttp.readyState); if(xmlHttp.readyState==4){ alert("xmlHttp.status= "+xmlHttp.status); if(xmlHttp.status==200){ parseResults(); } } } function parseResults(){ var responseDiv = document.getElementById("serverResponse"); if(responseDiv.hasChildNodes()){ responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = document.createTextNode(xmlHttp.responseText); responseDiv.appendChild(responseText); } function getCarObject(){ return new Car("Dodge","Coronet R/T",1958,"yellow"); } function Car(make,model,year,color){ this.make = make; this.model = model; this.year = year; this.color = color; }

servlet/JSONExample.java (需要导入org.JSON.*包)

package servlet; import java.io.BufferedReader; 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; import org.json.JSONException; import org.json.JSONObject; public class JSONExample extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String json = readJSONStringFromRequestBody(request); //USE the JSON-java binding library to create a JSON object in Java JSONObject jsonObject = null; String responseText=null; try{ /*创建一个JSONObject的实例，向该实例的构造函数提供JSON串.JSONObject在对象创建时解析JSON串，一旦创建就可以用getXXX方法获得属性*/ jsonObject = new JSONObject(json); responseText = "You have a "+jsonObject.getInt("year")+" "+ jsonObject.getString("make")+" "+jsonObject.getString("model")+" " +" that is "+ jsonObject.getString("color")+" in color. "; } catch (JSONException e) { e.printStackTrace(); } response.setContentType("text/xml"); PrintWriter out = response.getWriter(); out.print(responseText); } private String readJSONStringFromRequestBody(HttpServletRequest request){ StringBuffer json = new StringBuffer(); String line = null; try{ BufferedReader reader = request.getReader(); while((line = reader.readLine())!=null){ json.append(line); } }catch(Exception e){ System.out.println("Error reading JSON String:"+e.toString()); } return json.toString(); } }

输出结果：

____________________________________________ |CLICK here to send JSON data to the server| |__________________________________________| sever Response You have a 1958 Dodge Coronet R/T that is yellow in color.

过程详解：

===============================

点击按钮调用doJSON函数。这个函数首先调用getCarObject函数来返回一个新的Car对象实例，然后使用JSON javascritp库将Car对象转换为JSON串，再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的Car对象发送到服务器。

因为有可疑免费得到的JSON- Java绑定库，素以编写Java servlet来为JSON请求提供服务相当简单。更妙的是，由于对每种服务器端技术都有相应的JSON绑定，所以可以使用任何服务器端技术实现这个例子。

JSONExample servelt的doPost方法为JSON请求提供服务。首先调用readJSONStringFromRequestBody方法从请求题获得JSON串。JSONObject在对象创建时自动解析JSON串。一旦创建了JSONObject，就可以使用各个get方法来获得对象属性。

这里使用getstring 和getInt方法来获取year,make,model和color属性。这些属性连接起来构成一个串返回给浏览器，并在页面上显示。