《Ajax-使用JSON向服务器发送数据》由会员分享，可在线阅读，更多相关《Ajax-使用JSON向服务器发送数据（10页珍藏版）》请在金锄头文库上搜索。
1、文档供参考，可复制、编制，期待您的好评与关注！ Ajax - 使用JSON向服务器发送数据使用JSON向服务器发送数据 做了这么多，你已经能更顺手地使用JavaScript了，也许在考虑把更多的模型信息放在浏览器上。不过，看过前面的例子后（使用XML向服务器发送复杂的数据结构），你可能会改变主意。通过串连接来创建XML串并不好，这也不是用来生成或修改XML数据结构的健壮技术。JSON概述XML的一个替代方法是JSON，可以在www.json.org找到。JSON是一种文本格式，它独立于具体语言，但是使用了与C系列语言（如C、C#、JavaScript等）类似的约定。JSON建立在以下两种数据结
2、构基础上，当前几乎所有编程语言都支持这两种数据结构：l 名/值对集合。在当前编程语言中，这实现为一个对象、记录或字典。l 值的有序表，这通常实现为一个数组。因为这些结构得到了如此众多编程语言的支持，所以JSON是一个理想的选择，可以作为异构系统之间的一种数据互换格式。另外，由于JSON是基于标准JavaScript的子集，所以在所有当前Web浏览器上都应该是兼容的。JSON对象是名/值对的无序集合。对象以 开始，以 结束，名/值对用冒号分隔。JSON数组是一个有序的值集合，以 开始，以 结束，数组中的值用逗号分隔。值可以是串（用双引号引起）、数值、true或false、对象，或者是数组，因此结
3、构可以嵌套。图3-6以图形方式很好地描述了JSON对象的标记。图3-6JSON对象结构的图形化表示（摘自www.json.org）请考虑employee对象的简单例子。employee对象可能包含名、姓、员工号和职位等数据。使用JSON，可以如下表示employee对象实例：var employee = firstName : John , lastName : Doe , employeeNumber : 123 , title : Accountant然后可以使用标准点记法使用对象的属性，如下所示：var lastName = employee.lastName; /Access the
4、last namevar title = employee.title; /Access the titleemployee.employeeNumber = 456; /Change the employee numberJSON有一点很引以为豪，这就是它是一个轻量级的数据互换格式。如果用XML来描述同样的employee对象，可能如下所示： John Doe 123 Accountant显然，JSON编码比XML编码简短。JSON编码比较小，所以如果在网络上发送大量数据，可能会带来显著的性能差异。www.json.org网站列出了至少与其他编程语言的14种绑定，这说明，不论在服务器端使用何
5、种技术，都能通过JSON与浏览器通信。使用JSON的示例(此例子需要json.js，http:/www.json.org/js.html 最下面的链接点击下载，此例子使用的是比较老版本的json.js，如果你下载的是新的，使用的方法就不同了；JSONObject.java，JSONArray.java，http:/www.json.org/java/index.html下载，注意不是java JSON-lib虽然里面也有这两个类，可能是版本原因不同了如果你要用json-lib，那你就必须下载json-lib-2.0-jdk15.jar，还必需下面5个jarjakarta commons-lan
6、g， jakarta commons-beanutils， jakarta commons-collections jakarta commons-logging ，ezmorph 缺少任何一个都是不行的，试过了 ！前面4个在apache.org下载，最后一个在http:/ JavaScript库（可以从www.json.org免费得到）将Car对象转换为JSON串，再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的Car对象发送到服务器。因为有可以免费得到的JSON-Java绑定库，所以编写Java servlet来为JSON请求提供服务相当简单。更妙的是，由
7、于对每种服务器端技术都有相应的JSON绑定，所以可以使用任何服务器端技术实现这个例子。JSONExample servlet的doPost方法为JSON请求提供服务。它首先调用readJSONStr- ingFromRequestBody方法从请求体获得JSON串，然后创建JSONObject的一个实例，向JSONObject构造函数提供JSON串。JSONObject在对象创建时自动解析JSON串。一旦创建了JSONObject，就可以使用各个get方法来获得你感兴趣的对象属性。这里使用getString和getInt方法来获取year、make、model和color属性。这些属性连接起来
8、构成一个串返回给浏览器，并在页面上显示。图3-8显示了读取JSON对象之后的服务器响应。代码清单3-11显示了jsonExample.html，代码清单3-12显示了JSONExample.java。代码清单3-11jsonExample.htmlJSON Examplevar xmlHttp;function createXMLHttpRequest() if (window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp = new
9、XMLHttpRequest(); function doJSON() var car = getCarObject(); /Use the JSON JavaScript library to stringify the Car object /var carAsJSON = JSON.stringify(car); 老版本的json.js的用法 var carAsJSON = car.toJSONString(); alert(Car object as JSON:n + carAsJSON); var url = JSONExample?timeStamp= + new Date().g
10、etTime(); createXMLHttpRequest(); xmlHttp.open(POST, url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader(Content-Type, application/x-www-form-urlencoded;); xmlHttp.send(carAsJSON);function handleStateChange() if(xmlHttp.readyState = 4) if(xmlHttp.status = 200) parseR
11、esults(); function parseResults() var responseDiv = document.getElementById(serverResponse); if(responseDiv.hasChildNodes() responseDiv.removeChild(responseDiv.childNodes0); var responseText = document.createTextNode(xmlHttp.responseText); responseDiv.appendChild(responseText);function getCarObject() return new Car(Dodge, Coronet R/T, 1968, yellow);function Car(make, model, year, color) this.make = make; this.model = model; this.year = year; this.color = color; Server Response: 代码清单3-12J
