Ajax与JSON的一些学习总结

Ajax技术是现代Web开发中不可或缺的一部分，其核心是XMLHttpRequest对象，简称XHR。这一对象能在不重新加载页面的情况下，实现与服务器之间的数据交换，使得网页能够异步地获取服务器数据并在页面上呈现。尽管Ajax的名字中包含了XML，但实际上，它的通讯与数据格式并无直接关联，我们的数据格式可以是XML，也可以是JSON等。

XMLHttpRequest对象最初由微软设计，后被Mozilla、Apple和Google等浏览器采纳，目前W3C正在对其进行标准化。它提供了一个简单的方法来检索URL中的数据。创建一个XMLHttpRequest实例非常简单，只需要使用“new XMLHttpRequest()”即可。

对于不支持原始XHR对象的旧版浏览器，如IE6，我们也有其他的创建XHR对象的方法。这里先不做深入介绍。

关于XMLHttpRequest的用法，创建实例后，我们需要调用open()方法来初始化请求。open()方法接受五个参数，其中method和url是必填项。假设我们要向URL：myxhrtest.aspx发送GET请求以获取数据，我们可以这样定义：

```javascript

var req = new XMLHttpRequest();

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

```

这段代码启动了一个针对myxhrtest.aspx的GET请求。这里需要注意，URL是相对于执行代码的当前页面的，使用绝对路径也可以。调用open()方法并不会真正发送请求，而只是启动了请求的准备过程。

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

要真正发送请求，我们需要使用send()方法。send()方法接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，我们必须传递一个null值。请求发送后，我们会需要检查请求是否执行成功。我们可以通过status属性来判断，通常将HTTP状态代码为200作为成功的标志。这时，服务器的响应主体内容会保存到responseText中。

通过XMLHttpRequest对象，我们可以实现网页的异步更新，提升用户体验，是现代Web开发中不可或缺的一部分。在网页开发中，Ajax技术以其独特的异步请求方式，成为了许多开发者追求高效、流畅用户体验的首选。当我们在浏览器中输入URL并回车时，传统的页面加载方式可能导致页面长时间处于等待状态，影响用户体验。而Ajax技术的引入，正是为了解决这个问题。它不仅能让页面部分加载，还能在不刷新整个页面的情况下更新数据，使得网页操作更为流畅。

关于Ajax的同步与异步请求，这两者之间存在显著的差异。同步请求意味着发送请求后，浏览器需要等待服务器响应完成才能继续执行后续代码。而异步请求则不同，它在发送请求的允许浏览器执行其他任务，无需等待服务器的响应。这种特性使得异步请求在网页开发中尤为重要。

当我们使用Ajax进行异步请求时，一个重要的判断依据是readyState属性值。这个属性用于表示请求的状态，当它的值为4时，意味着已经接收到了全部响应数据。这时，我们就可以根据响应的状态码（status）来判断请求是否成功。状态码304表示请求的资源并没有被修改，可以直接使用浏览器缓存的数据，这是一种优化的响应方式。

具体实现上，我们首先需要创建一个XMLHttpRequest对象（这里的req就是一个示例），然后设置其onreadystatechange属性，以便在请求状态改变时执行相应的函数。在这个函数中，我们需要判断readyState的值是否为4，以及status的值是否表示请求成功。只有当这两个条件都满足时，我们才能处理服务器返回的数据。

Ajax技术的引入极大地提高了网页的交互性和用户体验。无论是同步还是异步请求，都能在不同的场景下发挥出其独特的优势。通过深入理解Ajax的工作原理和特性，我们可以更好地应用它来实现各种网页功能，从而为用户提供更为流畅、高效的浏览体验。在数字化世界中，数据的组织和管理至关重要。我们将后台数据转化为JSON格式，以便更高效地处理和使用。现在，我们来定义一个关键的数据库访问对象——ProductDao，这是与Product表交互的桥梁。

在这里，我们呈现的是一个充满活力和现代感的ProductDao类。它如同一座连接现实世界与数字世界的桥梁，承载着产品的核心信息。以下是具体的实现代码：

/// 摘要

/// Product数据表的数据库访问对象。

///

public class ProductDao : 基础数据库访问对象 //（假设有一个基础数据库访问对象类）

{

/// 摘要

/// 初始化ProductDao类的新实例。

///

public ProductDao()

{

// 初始化代码（如果有需要的话）

}

/// 属性摘要

// 获取或设置产品ID。

public int Id { get; set; }

// 获取或设置产品名称。

public string Name { get; set; }

// 获取或设置产品序列号。每一个产品都有独一无二的序列号，作为产品的身份标识。

public string SerialNumber { get; set; }

// 获取或设置产品销售数量。这反映了产品在库存中的状态。

public short Qty { get; set; }

}

在数字化世界中，我们时常需要与数据库中的产品进行交互。为此，我们创建了一个专门处理Product表数据的类——ProductManager，它如同一位数据管家，负责管理产品信息的存取。

在这个类中，我们首先定义了一个私有的常量字符串Query，这里存储了获取产品信息的SQL查询语句。我们有一个私有的列表_products，用于存储从数据库中获取的产品对象ProductDao。

其中，ProductDao是我们的数据访问对象，它代表了数据库中的一行产品信息，包括产品ID、名称、编号以及安全库存水平。

我们的ProductManager类中最核心的方法是GetAllProducts()，这个方法如同数据的“采掘者”，负责从数据库的Product表中获取所有数据。这个方法首先打开数据库连接，然后执行预定义的SQL查询语句。查询结果会被读取并转化为ProductDao对象，然后添加到_products列表中。当我们完成数据获取后，返回这个包含所有产品信息的列表。

使用这个GetAllProducts()方法，我们可以轻松地从数据库中获取Product表的所有数据。就像呼唤数据的精灵，只需一声令下，所有的产品信息便会汇聚眼前。

接下来，我们将调用这个强大的方法，获取所有的产品信息。获取到的数据将被用于各种业务操作，如产品展示、库存管理等。通过ProductManager类，我们可以实现与数据库的轻松交互，提高开发效率，使数据管理更加便捷。

ProductManager是我们与数据库之间的桥梁，它帮助我们获取、管理产品数据，让我们的业务运行更加顺畅。为了将数据以JSON格式传递给页面，我们创建了名为ProductInfo的一般处理程序（ASHX文件）。一般处理程序适用于多种场合，例如创建动态图片、返回REST风格的XML或JSON数据以及自定义HTML。

当我们在项目中添加一般处理程序文件时，它会生成一个扩展名为.ashx的文件。对于ProductInfo处理程序，我们实现了IHttpHandler接口，该接口包含ProcessRequest方法和IsReusable属性。

ProcessRequest方法用于处理入站的HTTP请求。在这个方法中，我们首先设置响应的内容类型为“application/json”。然后，我们创建一个ProductManager对象并调用其GetAllProducts方法来获取产品数据。接下来，我们使用DataContractJsonSerializer将数据序列化为JSON格式，并将其写入响应输出流中。

至于IsReusable属性，它表示相同的处理程序是否可用于多个请求。在此情况下，我们将其设置为false。为了提高性能，您也可以将其设置为true。

当客户端发出针对ProductInfo的请求时，它将触发ProcessRequest方法的执行。该方法通过调用GetAllProducts方法从数据库中检索数据，并将数据以JSON格式写入响应流中。这样，我们便成功地将数据以JSON格式传递给了响应流。

接下来，我们将通过Ajax方式请求这些数据，并将其显示在页面上。为了创建XMLHttpRequest对象，我们定义了一个createXHR方法。需要注意的是，某些较旧的浏览器版本（如IE6）可能不支持直接使用XMLHttpRequest构造函数来创建对象。在createXHR方法中，我们需要检查当前浏览器是否为IE6或更旧版本。如果是，我们将通过MSXML库中的ActiveX对象来实现。

在IE浏览器中，可能会遇到不同版本的XHR对象。我们需要根据浏览器环境选择适当的XHR对象版本（MSXML2.XMLHttp6.0、MSXML2.XMLHttp3.0或MSXML2.XMLHttp）。通过这种方法，我们可以确保跨浏览器的兼容性和数据请求的顺利进行。最终，我们将从一般处理程序中获取的数据以JSON格式显示在网页上，为用户提供丰富的交互体验。在Web浏览器时代，XMLHttpRequest对象成为了我们与服务器交互的重要桥梁。为了创建一个XMLHttpRequest对象，我们定义了一个名为`createXHR`的函数，它可以根据浏览器的不同环境生成相应的XMLHttpRequest对象。让我们深入理解一下这个函数的工作原理。

函数会检查浏览器是否支持XMLHttpRequest对象。如果支持，则直接创建一个新的XMLHttpRequest对象并返回。考虑到老旧的Internet Explorer版本，我们还需要考虑一个额外的兼容性方案。在这种情况下，如果浏览器支持ActiveXObject对象，函数会尝试创建一个新的ActiveXObject对象作为XMLHttpRequest的替代方案。这种尝试会基于一个名为activeXString的变量进行，该变量会存储尝试创建的ActiveXObject对象的版本信息。如果所有尝试都失败，那么函数会抛出一个错误提示“无法创建XHR对象”。最终，如果一切顺利，函数将返回一个可用的XMLHttpRequest或ActiveXObject对象。否则，返回null。这种处理方式确保了我们的代码能在各种浏览器环境下稳定运行。

GetDataFromServer函数创建了一个XMLHttpRequest对象，这是向服务器发送请求并获取数据的工具。一旦请求对象创建成功，它便开始监听状态变化。当请求完成（即readyState等于4）时，函数会检查服务器的响应状态。如果状态码在200到300之间（表示成功），或者状态码为304（表示未修改），函数就会继续处理数据。

图3展示了Ajax请求结果在页面上的呈现。为了提升用户体验，我们可以为页面添加CSS样式。例如，为header添加宽度、边距和背景色；为body定义左右边距；为包含JSON数据的div设置背景色、边框半径等。这些样式细节已经预先定义好，只需简单应用即可。

刷新页面后，你会发现页面的视觉效果大大提升了。产品数据以更加友好和直观的方式展示在用户面前。每一项数据都被包裹在一个具有独特样式的div中，这不仅增强了可读性，还为用户带来了更好的体验。

图4介绍：同源策略与跨源策略

在网页开发中，我们经常面临页面和数据交互的问题。当我们处于同源请求的情况下，也就是说，客户端浏览器请求的页面和数据都属于同一域名、同一端口和同协议时，一切似乎进行得相当顺利。当涉及到跨域请求时，事情就变得复杂起来。这就是所谓的同源策略，它阻止了从一个域上加载的脚本获取或操作另一个域上的文档属性。换句话说，任何试图从与当前Web页面不同域名的URL获取数据的请求都会被阻止。

图5详解同源请求过程

微博数据获取与展示

在获取微博数据的过程中，我们需要了解并使用微博的API接口。API请求参数中有一个关键的参数——source（AppKey），我们需要从微博官方申请获取。通过传递AppKey，我们可以调用API并获取相关数据。接下来，我们将如何使用jQuery来实现这一过程。

让我们关注微博数据的结构。通过JSON viewer，我们可以清晰地看到微博数据的组成。微博数据包含了丰富的基础数据类型和复杂的用户信息（user）。这些数据为我们提供了丰富的信息来源，让我们能够展示微博内容并实现各种功能。

接下来，我们定义一个全局对象JQWeibo，用于管理和操作微博数据。该对象包含了一些重要的属性和方法。属性包括页面上展示的微博数量（numWeibo）、附加的类名（appendTo）以及AppKey。方法包括加载微博数据（loadWeibo）、时间转换（timeAgo）和清理微博数据（clean）。下面是这个对象的详细定义：

JQWeibo = {

// 在页面上展示的微博数量。

numWeibo: 15,

// 附加的类名，用于将微博内容添加到指定的HTML元素中。

appendTo: 'jsWeibo',

// 从微博申请的AppKey。

appKey: YourAppKey,

// 加载微博数据的函数。

loadWeibo: function() {

// 使用jQuery的Ajax方法向微博API发送跨源请求，获取微博数据。

},

// 将时间转换为相对时间（如"8分钟前"）。

// @return {string} 返回相对时间字符串。

timeAgo: function(dateString) {

// 实现时间转换逻辑。

},

// 清理微博数据的函数。通过一系列处理，包括提取、链接等，返回处理后的微博数据。

clean: function(weibo) {

return this.hash(this.at(this.list(this.link(weibo))));

}

}; // JQWeibo对象定义结束。

微博数据获取：跨源请求的Ajax与JSONP策略

在Web开发中，我们经常需要从不同的源获取数据，而跨源请求是这一过程中的关键。本文将详细介绍如何使用Ajax和JSONP技术来实现跨源请求，并针对读者提出的问题进行解答。

一、跨源请求的挑战与解决方案

当我们尝试使用Ajax进行跨源请求时，会遇到浏览器的同源策略限制。为了解决这个问题，我们引入了JSONP技术。JSONP利用HTML的script标签可以跨域加载资源的特点，通过动态创建script标签来实现跨源请求。

二、微博数据获取的实现

现在，我们来详细解读如何通过Ajax获取微博数据。我们使用$.ajax()方法向微博API发送跨源请求。我们向API传递了JQWeibo.appKey和JQWeibo.numWeibo作为参数，以获取微博的公开数据。

三、回答关于跨源请求的问题

1. 跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？

答：跨源请求不使用JSONP时，由于浏览器的同源策略限制，浏览器会阻止跨域请求，导致报错。而同源请求则不会受到这个限制。JSONP是一种绕过同源策略的方法，通过动态创建script标签来实现跨源请求。

2. 关于“用Javascript定义回调函数”看的不是很明白。传递当前页面的一个js方法给跨源服务器，为什么就能跨源请求了呢？（JSONP？）服务端根据这个js方法做了什么操作啊？

答：在JSONP中，我们通过定义一个回调函数来处理跨源请求的数据。我们将这个函数的名称作为参数传递给跨源服务器，服务器返回的数据会调用这个函数并传入数据作为参数。这样，我们就能通过回调函数获取到跨源服务器的数据。服务器会根据我们传递的回调函数名称来调用这个函数，并将数据作为参数传递给它。这样，我们就实现了跨源请求并获取到了数据。

JSON与JSONP：跨源请求与数据反序列化之旅

我们理解JSON作为一种数据格式，简洁且易于机器。而JSONP则像通过一种特殊的方法名来封装JSON格式的数据，以满足跨源请求的需求。跨源请求并不是通过指定一个回调函数来实现的，而是利用浏览器允许跨源请求