例子和<<Ajax基础教程>>中的那个例子类似,不过书中的例子是用java写的server端code,我这里用.net再写一次:
我就直接把客户端的code帖出来了:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< script type ="text/javascript" src ="json.js" ></ script >
< script type ="text/javascript" > ...
var xmlHttp;
function createXMLHttpRequest()
...{
if (window.ActiveXObject)
...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
...{
xmlHttp = new XMLHttpRequest();
}
}
function doJSON()
...{
createXMLHttpRequest();
var car=getCarObject();
//alert("Car object as JSON: "+car.toJSONString());
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("post","dojson.aspx",true);
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencode");
xmlHttp.send(car.toJSONString());
}
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;
}
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);
}
</ script >
</ head >
< body >
< br />
< br />
< form action ="#" >
< input type ="button" value ="Click here to send JSON data to the server" onclick ="doJSON();" />
</ form >
< h2 >
Server Response: </ h2 >
< div id ="serverResponse" >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 无标题页 </ title >
< script type ="text/javascript" src ="json.js" ></ script >
< script type ="text/javascript" > ...
var xmlHttp;
function createXMLHttpRequest()
...{
if (window.ActiveXObject)
...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
...{
xmlHttp = new XMLHttpRequest();
}
}
function doJSON()
...{
createXMLHttpRequest();
var car=getCarObject();
//alert("Car object as JSON: "+car.toJSONString());
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("post","dojson.aspx",true);
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencode");
xmlHttp.send(car.toJSONString());
}
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;
}
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);
}
</ script >
</ head >
< body >
< br />
< br />
< form action ="#" >
< input type ="button" value ="Click here to send JSON data to the server" onclick ="doJSON();" />
</ form >
< h2 >
Server Response: </ h2 >
< div id ="serverResponse" >
</ div >
</ body >
</ html >
这上面ajax的部分就不再详解了.
重点在server端:
我在这里实现和原书中同样的目的,同样帖出全部的code:
using
System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
public partial class dojson : System.Web.UI.Page
... {
protected void Page_Load(object sender, EventArgs e)
...{
byte[] b = new byte[this.Request.InputStream.Length];
this.Request.InputStream.Read(b, 0, b.Length);
string s = System.Text.Encoding.Default.GetString(b);
Car car = (Car)JavaScriptConvert.DeserializeObject(s, typeof(Car));
string str = "";
str = "You have a " + car.Year + " " + car.Make + " " + car.Model + " that is " + car.Color + " in color.";
this.Response.Write(str);
this.Response.Flush();
this.Response.Close();
}
private class Car
...{
public Car()
...{ }
private string make;
public string Make
...{
get ...{ return make; }
set ...{ make = value; }
}
private string model;
public string Model
...{
get ...{ return model; }
set ...{ model = value; }
}
private int year;
public int Year
...{
get ...{ return year; }
set ...{ year = value; }
}
private string color;
public string Color
...{
get ...{ return color; }
set ...{ color = value; }
}
}
}
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
public partial class dojson : System.Web.UI.Page
... {
protected void Page_Load(object sender, EventArgs e)
...{
byte[] b = new byte[this.Request.InputStream.Length];
this.Request.InputStream.Read(b, 0, b.Length);
string s = System.Text.Encoding.Default.GetString(b);
Car car = (Car)JavaScriptConvert.DeserializeObject(s, typeof(Car));
string str = "";
str = "You have a " + car.Year + " " + car.Make + " " + car.Model + " that is " + car.Color + " in color.";
this.Response.Write(str);
this.Response.Flush();
this.Response.Close();
}
private class Car
...{
public Car()
...{ }
private string make;
public string Make
...{
get ...{ return make; }
set ...{ make = value; }
}
private string model;
public string Model
...{
get ...{ return model; }
set ...{ model = value; }
}
private int year;
public int Year
...{
get ...{ return year; }
set ...{ year = value; }
}
private string color;
public string Color
...{
get ...{ return color; }
set ...{ color = value; }
}
}
}
这里用了最近的Newtonsoft.Json.dll,是2007-3-20的,也就是Json.NET 1.2版,详见http://www.newtonsoft.com/blog/
主要用了一个反序列化,JavaScriptConvert.DeserializeObject,对在javascript中的object另外在C#里定义一个class,利用JavaScriptConvert.DeserializeObject方法做反序列化,可以从json的字符串里得到Car的一个实例,这样就可以完成下面的工作了.