文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

AJAX && JSON之讲解

时间：2014-04-05 12:03:31   收藏：0   阅读：876

　　Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML，但Ajax通讯与数据格式无关，所以我们的数据格式可以是XML或JSON等格式。

　　XMLHttpRequest对象用于在后台与服务器交换数据，具体作用如下：

　　　　　本文目录：

　　1.1.2 正文

　　XMLHttpRequest是一个JavaScript对象，它是由微软设计，并且被Mozilla、Apple和Google采纳，W3C正在标准化它。它提供了一种简单的方法来检索URL中的数据。

　　我们要创建一个XMLHttpRequest实例，只需new一个就OK了：

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

　　也许有人会说：“这可不行啊！IE6不支持原始的XHR对象”，确实是这样，我们在后面将会介绍支持IE6或更老版本创建XHR对象的方法。

　　XMLHttpRequest的用法

　　在创建XHR对象后，接着我们要调用一个初始化方法open()，它接受五个参数具体定义如下：

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

　　通过上面的定义我们知道open()方法的签名包含五个参数，其中有参数method和url地址是必填的，假设我们针对URL: myxhrtest.aspx发送GET请求获取数据，具体定义如下：

var req = new XMLHttpRequest();
req.open(
    "GET",
    "myxhrtest.aspx",
    false
);

　　通过上述代码会启动一个针对myxhrtest.aspx的GET请求，这里有两点要注意：一是URL相对于执行代码的当前页面（使用绝对路径）；二是调用open()方法并不会真正发送请求，而只是启动一个请求准备发送。

只能向同一个域中使用相同端口和协议的URL中发送请求；如果URL与启动请求的页面有任何差别，都会引发安全错误。

　　要真正发送请求要使用send()方法，send()方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，我们必须传递一个null值。在调用send()之后，请求就会被分派到服务器，完整Ajax请求代码如下：

var req = new XMLHttpRequest();
req.open(
    "GET",
    "myxhrtest.aspx",
    false
);
req.send(null);

　　在发送请求之后，我们需要检查请求是否执行成功，首先可以通过status属性判断，一般来说，可以将HTTP状态代码为200作为成功标志。这时，响应主体内容会保存到responseText中。此外，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据，Ajax的同步请求代码如下：

if (req != null) {
        req.onreadystatechange = function() {
            if ((req.status >= 200 && req.status < 300) || req.status == 304) {
                //// Do something.
            } else {
                alert("Request was unsuccessful: " + req.status);
            }
    };
    req.open("GET", "www.myxhrtest.aspx", true);
    req.send(null);
}

　　前面我们定义了Ajax的同步请求，如果我们发送异步请求，那么在请求过程中javascript代码会继续执行，这时可以通过readyState属性判断请求的状态，当readyState = 4时，表示收到全部响应数据，属性值的定义如下：

readyState值

描述

0

未初始化；尚未调用open()方法

1

启动；尚未调用send()方法

2

已发送；但尚未收到响应

3

接收；已经收到部分响应数据

4

完成；收到全部响应数据

表1 readyState属性值

同步请求：发生请求后，要等待服务器执行完毕才继续执行当前代码。

异步请求：发生请求后，无需等到服务器执行完毕，可以继续执行当前代码。

　　现在我们要增加判断readyState属性值，当readyState = 4时，表示全部数据接收完成， 所以Ajax的异步请求代码如下：

if (req != null) {
    req.onreadystatechange = function() {
        //// Checks the asyn request completed or not.
        if (req.readyState == 4) {
            if ((req.status >= 200 && req.status < 300) || req.status == 304) {
                //// Do something.
            } else {
                alert("Request was unsuccessful: " + req.status);
            }
        }
    };
    req.open("GET", "www.myxhrtest.aspx", true);
    req.send(null);
}

　　Ajax同源请求

　　现在我们对Ajax的请求实现有了初步的了解，接下来我们将通过具体的例子说明Ajax请求的应用场合和局限。

　　在日常网络生活中，我们在浏览器的地址中输入要访问的URL并且回车，浏览器会向服务器发送请求，当服务器收到请求后，把相应的请求页面发送回浏览器，我们会发现页面大部分加载完毕，有些还没有加载完毕。总的来说，采用异步加载方式不会影响已加载完毕的页面浏览，我们可以通过Ajax实现异步加载。

　　这里我们以AdventureWorks数据库为例，把产品表（Product）中的数据通过报表呈现给用户，我们可以通过多种方法实现该报表需求，这里我们将通过Ajax实现该功能。

　　首先，我们要把后台数据转换为JSON格式，接下来我们定义Product表的数据库访问对象（DAO），具体的实现代码如下：

/// <summary>
/// The product datatable dao.
/// </summary>
public class ProductDao
{
    /// <summary>
    /// Initializes a new instance of the <see cref="ProductDao"/> class.
    /// </summary>
    public ProductDao()
    {
    }
    /// <summary>
    /// Gets or sets the product id.
    /// </summary>
    public int Id { get; set; }
    /// <summary>
    /// Gets or sets the product name.
    /// </summary>
    public string Name { get; set; }
    /// <summary>
    /// Gets or sets the product serial number.
    /// </summary>
    public string SerialNumber { get; set; }
    /// <summary>
    /// Gets or sets the product qty.
    /// </summary>
    public short Qty { get; set; }
}

　　前面我们定义了Product表的数据库访问对象——ProductDao，它包含四个属性分别是产品的Id，名称，序列号和销售数量。

　　接下来，让我们实现Product表的数据库操作类。

/// <summary>
/// Product table data access manager.
/// </summary>
public class ProductManager
{
    /// <summary>
    /// The query sql.
    /// </summary>
    private const string Query = 
        "SELECT ProductID, Name, ProductNumber, SafetyStockLevel FROM Production.Product";
    /// <summary>
    /// Stores the object of <see cref="ProductDao"/> into list.
    /// </summary>
    private IList<ProductDao> _products = new List<ProductDao>();
    /// <summary>
    /// Gets all products in product table.
    /// </summary>
    /// <returns>
    /// The list of <see cref="ProductDao"/> object.
    /// </returns>
    public IList<ProductDao> 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;
    }
}

　　前面我们实现了Product表的数据库操作类——ProductManager，它包含两个私有字段Quey和_products，还有一个获取Product表中数据的方法——GetAllProducts()。

　　通过实现ProductDao和ProductManager，而且我们提供GetAllProducts()方法，获取Product表中的数据，接下来我们要调用该方法获取数据。

　　为了使数据通过JSON格式传递给页面，这里我们要创建一般处理程序（ASHX文件），

　　一般处理程序适用场合：

AJAX && JSON之讲解,布布扣,bubuko.com

原文：http://www.cnblogs.com/milantgh/p/3646952.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！