ajax & json 总结

Creates a XMLHttpRequest object.
var req = new XMLHttpRequest();

void open(
   DOMString method, //"GET", "POST", "PUT", "DELETE"
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

var req = new XMLHttpRequest();

req.open(
    "GET",
    "myxhrtest.aspx",
    false
);

var req = new XMLHttpRequest();

req.open(
    "GET",
    "myxhrtest.aspx",
    false
);
req.send(null);

if (req != null) {
    req.onreadystatechange = function() {

        if ((req.status >= 200 && req.status 

if (req != null) {
    req.onreadystatechange = function() {

         Checks the asyn request completed or not.
        if (req.readyState == 4) {
            if ((req.status >= 200 && req.status 

/// 

/// The product datatable dao.
/// 
public class ProductDao
{
    /// 

    /// Initializes a new instance of the  class.
    /// 
    public ProductDao()
    {
    }

    /// 

    /// Gets or sets the product id.
    /// 
    public int Id { get; set; }

    /// 

    /// Gets or sets the product name.
    /// 
    public string Name { get; set; }

    /// 

    /// Gets or sets the product serial number.
    /// 
    public string SerialNumber { get; set; }

    /// 

    /// Gets or sets the product qty.
    /// 
    public short Qty { get; set; }
}

/// 

/// Product table data access manager.
/// 
public class ProductManager
{
    /// 

    /// The query sql.
    /// 
    private const string Query = 
        "SELECT ProductID, Name, ProductNumber, SafetyStockLevel FROM Production.Product";

    /// 

    /// Stores the object of  into list.
    /// 
    private IList _products = new List();

    /// 

    /// Gets all products in product table.
    /// 
    /// 
    /// The list of  object.
    /// 
    public IList GetAllProducts()
    {
        using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLCONN"].ToString()))
        using (var com = new SqlCommand(Query, con))
        {
            con.Open();
            using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection))
            {
                while (reader.Read())
                {
                    var product = new ProductDao
                        {
                            Id = (int)reader["ProductID"],
                            Name = (string)reader["Name"],
                            SerialNumber = (string)reader["ProductNumber"],
                            Qty = (short)reader["SafetyStockLevel"]
                        };
                    _products.Add(product);
                }
            }
        }

        return _products;
    }
}

using System.Runtime.Serialization.Json;
using System.Web;

using ASP.App_Code;

/// 

/// The product data handler.
/// 
public class ProductInfo : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "application/json";

        // Creates a  oject.
        var manager = new ProductManager();

        // Invokes the GetAllProducts method.
        var products = manager.GetAllProducts();

        // Serializes data to json format.
        var json = new DataContractJsonSerializer(products.GetType());
        json.WriteObject(context.Response.OutputStream, products);
    }

    // Whether can resuable by other handler or not.
    public bool IsReusable {
        get {
            return false;
        }
    }
}

// Creates a XMLHttpRequest object bases on web broswer.
function createXHR() {

    // Checks whether support XMLHttpRequest or not.
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    }

    // IE6 and elder version.
    else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = [
        "MSXML2.XMLHttp6.0",
        "MSXML2.XMLHttp3.0",
        "MSXML2.XMLHttp"];

            for (var i = 0; i 

function GetDataFromServer() {

    // Creates a XMLHttpRequest object.
    var req = new createXHR();
      
    if (req != null) {
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                if ((req.status >= 200 && req.status 

#header {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    background-color:#480082;
    color: #FFFFFF;
}
body {
    margin-left: 40px;
    margin-right: 40px;
}
div#jsonText {
    background-color: #d9d9d9;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    border: 1px solid #d9d9d9;
}
div.dataItem {
    font-family: Verdana, Helvetica, sans-serif;
    color: #434343;
    padding: 10px;
}
div.dataItem:nth-child(2n) {
    background-color: #fafafa;
}
div.dataItem:first-child {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
div.dataItem:last-child {
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

// The call back function.
function myFunction(data) {
    // Your code here.
}

JQWeibo = {

     // The number of weibos display in the page.
     // Sets the number of weibos, append class and app key.
     numWeibo: 15,
     appendTo: '#jsWeibo',

     // The appkey you apply from weibo.
     appKey: YourAppKey,

     // The function to get weibo data.
     loadWeibo: function() {
     },

     /**
     * Convert the time to relative time.
     * @return {string} relative time like "8 minutes ago"
     */
     timeAgo: function(dateString) {
     },

     ify: {
         clean: function(weibo) {
             return this.hash(this.at(this.list(this.link(weibo))));
         }
     } // ify

};

// The function to get weibo data.
loadWeibo: function() {
    $.ajax({
        // Weibo API.
        url: "http://api.t.sina.com.cn/statuses/public_timeline.json",
        type: "GET",
        dataType: "jsonp",
        data: {
            source: JQWeibo.appKey,
            count: JQWeibo.numWeibo
        },

        // When the requet completed, then invokes success function.
        success: function(data, textStatus, xhr) {

            // Sets html structure.
            var html =
            '
' +
            'USER' +
            '：WEIBO_TEXT
AGO
';

            // Appends weibos into html page.
            for (var i = 0; i 
现在，我们使用$.ajax()方法向微博API发送跨源请求，而且我们向API传递了JQWeibo.appKey和JQWeibo.numWeibo，当请求完成后，调用Success()方法把JSON数据插入的页面当中。
页面的HTML代码如下：



    
    
    
    


    




 
图8 跨源数据
如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。
1.1.3 总结
本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。
回答qianlifeng关于跨源请求的几个问题：
1.一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？（可能对ajax了解不深）
答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。
2.关于“用Javascript定义回调函数”那块看的不是很明白。传递当前页面的一个js方法给跨源服务器，为什么就能跨源请求了呢？（JSONP？） 服务端根据这个js方法做了什么操作啊？
答：首先我们理解JSON是一种数据格式，而JSONP像似通过一个方法名来封装JSON格式；而跨源请求不是说指定一个回调函数实现的，而是我们利用了浏览器允许跨源请求资源，你也可以我的HTML代码中使用的是Google提供的jQuery库，这也说明了资源可以跨源请求。当我们发送跨源请求后，服务器会返回JSONP，但服务器无法预知接受JSON数据的方法名，所有我们要把函数名告诉（传递）服务器。

//JSON 
{"name":"JK_Rush","id":23} 
//JSONP 
func({"name":"JK_Rush","id":23});

3.看你新浪微博的那个例子，是jquery的ajax对跨源做了处理？能不能说说您提到的两种跨源方式的区别或者不同的应用场景，还是随便都一样？
答：是通过$.ajax()方法实现的，如果你想使用动态Javascript实现也可以；至于两种跨源的区别已经在博文中指出了。
回答@On the road....关于JSON反序列化为对象的实现：
答：一般我们可以通过三种方法把JSON数据反序列化为对象，分别是：ASP.NET AJAX中引入的JavaScriptSerializer，WCF中引入的DataContractJsonSerializer，以及Json.NET。
假设，我们获取到员工信息（employee）的JSON数据，它包含两个属性分别是id和复杂属性name，具体如下所示：

[
  {
    "id": "82105",
    "name": {
      "lastName": "Huang",
      "firstName": "JK"
    }
  },
  {
    "id": "82106",
    "name": {
      "lastName": "Leung",
      "firstName": "Cindy"
    }
  }
]

string data = "[{"id":"82105","fullname":{"lastName":"Huang","firstName":"JK"}}," + 
    "{"id":"82106","fullname":{"lastName":"Leung","firstName":"Cindy"}}]";

根据上述JSON数据的组成，我们定义出相应的对象模型，具体定义如下：

// The Employee model.
public class Employee
{
    public int Id { get; set; }
    public Name FullName { get; set; }
}

// The Name model.
public class Name
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

接下来，我们将介绍使用JavaScriptSerializer，Json.NET和DataContractJsonSerializer反序列化JSON数据为对象。
JavaScriptSerializer

var serializer = new JavaScriptSerializer();
var employees= serializer.Deserialize(data);

Json.NET

using (var stringReader = new StringReader(data))
using (var jsonTextReader = new JsonTextReader(stringReader))
{
    var serializer = new JsonSerializer();
    var employees = serializer.Deserialize(jsonTextReader);
}

DataContractJsonSerializer
对于使用WCF的DataContractJsonSerializer方法，我们需要在对象模型添加DataContract和DataMember属性，具体定义如下：

[DataContract]
public class Employee
{
    [DataMember(Name = "id")]
    public int Id { get; set; }

    [DataMember(Name = "fullname")]
    public Name FullName { get; set; }
}

[DataContract]
public class Name
{
    [DataMember(Name = "firstName")]
    public string FirstName { get; set; }

    [DataMember(Name = "lastName")]
    public string LastName { get; set; }
}

接着我们使用ReadObjects()方法把JSON数据转换为对象。
 

using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(data))) 
{ 
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(List));
    var employee = (List)serializer.ReadObject(ms); 
}