Ajax - 使用JSON向服务器发送数据
Ajax - 使用JSON向服务器发送数据
使用JSON向服务器发送数据
做了这么多,你已经能更顺手地使用JavaScript了,也许在考虑把更多的模型信息放在浏览器上。不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。
JSON概述
XML的一个替代方法是JSON,可以在https://www.360docs.net/doc/1016822023.html,找到。JSON是一种文本格式,它独立于具体语言,但是使用了与C系列语言(如C、C#、JavaScript等)类似的约定。JSON 建立在以下两种数据结构基础上,当前几乎所有编程语言都支持这两种数据结构:
l名/值对集合。在当前编程语言中,这实现为一个对象、记录或字典。
l值的有序表,这通常实现为一个数组。
因为这些结构得到了如此众多编程语言的支持,所以JSON是一个理想的选择,可以作为异构系统之间的一种数据互换格式。另外,由于JSON是基于标准JavaScript的子集,所以在所有当前Web浏览器上都应该是兼容的。
JSON对象是名/值对的无序集合。对象以 { 开始,以 } 结束,名/值对用冒号分隔。J SON数组是一个有序的值集合,以[ 开始,以 ] 结束,数组中的值用逗号分隔。值可以是串(用双引号引起)、数值、true或false、对象,或者是数组,因此结构可以嵌套。图3 -6以图形方式很好地描述了JSON对象的标记。
图3-6JSON对象结构的图形化表示(摘自https://www.360docs.net/doc/1016822023.html,)
请考虑employee对象的简单例子。employee对象可能包含名、姓、员工号和职位等数据。使用JSON,可以如下表示employee对象实例:
var employee = {
"firstName" : John
, "lastName" : Doe
, "employeeNumber" : 123
, "title" : "Accountant"
}
然后可以使用标准点记法使用对象的属性,如下所示:
var lastName = https://www.360docs.net/doc/1016822023.html,stName; //Access the last name
var title = employee.title; //Access the title
employee.employeeNumber = 456; //Change the employee number
JSON有一点很引以为豪,这就是它是一个轻量级的数据互换格式。如果用XML来描述同样的employee对象,可能如下所示:
显然,JSON编码比XML编码简短。JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差异。
https://www.360docs.net/doc/1016822023.html,网站列出了至少与其他编程语言的14种绑定,这说明,不论在服务器端使用何种技术,都能通过JSON与浏览器通信。
使用JSON的示例
(此例子需要
json.js,https://www.360docs.net/doc/1016822023.html,/js.html最下面的链接点击下载,此例子使用的是比较老版本的json.js,如果你下载的是新的,使用的方法就不同了;
JSONObject.java,JSONArray.java,https://www.360docs.net/doc/1016822023.html,/java/index.html下载,注意不是java JSON-lib虽然里面也有这两个类,可能是版本原因不同了如果你要用json-lib,那你就必须下载json-lib-2.0-jdk15.jar,还必需下面5个ja r
jakarta commons-lang, jakarta commons-beanutils, jakarta commons-collecti ons
jakarta commons-logging ,ezmorph缺少任何一个都是不行的,试过了--!!
前面4个在https://www.360docs.net/doc/1016822023.html,下载,最后一个在https://www.360docs.net/doc/1016822023.html,/下载下面红色字体都是分歧部分,就看你是用什么了,经本人测试没问题。
)
下面是一个简单的例子,展示了如何使用JSON将JavaScript对象转换为串格式,并使用Ajax技术将这个串发送到服务器,然后服务器根据这个串创建一个对象。这个例子中没有业务逻辑,也几乎没有用户交互,它强调的是客户端和服务器端的JSON技术。图3-7显示了一个“字符串化的”Car对象。
图3-7“字符串化的”Car对象
因为这个例子几乎与前面的POST例子完全相同,所以我们只关注JSON特定的技术。点击表单上的按钮将调用doJSON函数。这个函数首先调用getCarObject函数来返回一个新的Car对象实例,然后使用JSON JavaScript库(可以从https://www.360docs.net/doc/1016822023.html,免费得到)将Car对象转换为JSON串,再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的Car对象发送到服务器。
因为有可以免费得到的JSON-Java绑定库,所以编写Java s
ervlet来为JSON请求提供服务相当简单。更妙的是,由于对每
种服务器端技术都有相应的JSON绑定,所以可以使用任何服务器
端技术实现这个例子。
JSONExample servlet的doPost方法为JSON请求提供服务。它首先调用readJSONStr- ingFromRequestBody方法从请求体获得JSON串,然后创建JSONObject的一个实例,向JSON Object构造函数提供JSON串。JSONObject在对象创建时自动解析JSON串。一旦创建了JSON Object,就可以使用各个get方法来获得你感兴趣的对象属性。
这里使用getString和getInt方法来获取year、make、model和color属性。这些属性连接起来构成一个串返回给浏览器,并在页面上显示。图3-8显示了读取JSON对象之后的服务器响应。
代码清单3-11显示了jsonExample.html,代码清单3-12显示了JSONExample.java。
代码清单3-11jsonExample.html
"https://www.360docs.net/doc/1016822023.html,/TR/xhtml1/DTD/xhtml1-strict.dtd">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new 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().getTime();
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) {
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", 1968, "yellow");
}
function Car(make, model, year, color) {
this.make = make;
this.model = model;
this.year = year;
this.color = color;
}
Server Response:
代码清单3-12JSONExample.java
package ajaxbook.chap3;
import java.io.*;
import https://www.360docs.net/doc/1016822023.html,.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
//import net.sf.json.*;
public class JSONExample extends HttpServlet {
protected 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;
try {
//如果是用json-lib的话,前面引进的包改为
//import net.sf.json.*; //这里改为
//jsonObject = JSONObject.fromObject(json);
//fromObject(object)是static的。也可以用fromString(string)的,但官方是不建议用fromString的。
jsonObject = new JSONObject(json);
}
catch(ParseException pe) {
System.out.println("ParseException: " + pe.toString());
}
String responseText = "You have a " + jsonObject.getInt("year") + " "
+ jsonObject.getString("make") + " " + jsonObject.getString("model")
+ " " + " that is " + jsonObject.getString("color") + " in color.";
response.setContentType("text/xml");
response.getWriter().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();
}
}
Trackback: https://www.360docs.net/doc/1016822023.html,/TrackBack.aspx?PostId=1739950
[收藏到我的网摘] [发送Trackback]lin49940发表于 2007年08月13日 00:00:00
后台转换JSON数据类型,前台解析JSON数据等等例子总结
后台转换JSON数据类型,前台解析JSON数据等等例子总结 JSON对象: JSONObject obj = new JSONObject(); obj.put("result", 0); obj.put("message", message); return obj.toJSONString(); 前台解析: Success:function(data){ var result = data.result; var message = data.message; } json对象中有json对象的写法: Objstr为一个JSONObject obj的String转换 private String getsuccess(String objstr,int number){ JSONObject obj = new JSONObject(); obj.put("result", 1); obj.put("obj", objstr); obj.put("number", number); return obj.toJSONString(); }
前台解析: Picjson为success返回的data var result = picjson.result; if (result==1) { var objdata = picjson.obj; var data = eval('(' + objdata + ')'); var num = picjson.number; picurl = null; showpiclist(data, num); } else{ alert(picjson.message); picurl = null; } list转成json对象 需要的包: https://www.360docs.net/doc/1016822023.html,mons-lang.jar https://www.360docs.net/doc/1016822023.html,mons-beanutils.jar https://www.360docs.net/doc/1016822023.html,mons-collections.jar https://www.360docs.net/doc/1016822023.html,mons-logging.jar
jQuery+AJAX+JSON
jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。 jQuery的核心理念是Write less,Do more。 使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。 2.jQuery的特点: 利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处:a、兼容性更好;b、代码更简洁 3.编程步骤: step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象?? jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象
var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器?? jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素
Jquery Ajax 异步处理Json数据
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在https://www.360docs.net/doc/1016822023.html,里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的. 代码如下: 前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>