开始一个Ajax

一个Web网店###

---

顾客点击目录页面缩略图后，浏览器显示所选商品信息之前要等待漫长的时间。
网店存在的问题并不是他的服务器太慢，而是他的页面一直在向服务器发送请求……
即使有时并不需要如此。

**网店现在的做法**

利用Ajax，可以完全去除目录页面上的页面刷新。
做法如下：

**修改目标**

Q：我怎么知道什么时候使用Ajax和异步请求，而在哪些情况下不使用呢？
A：这样来考虑。如果你希望在用户工作的同时继续做一下处理，可能就需要一个异步请求。但是，如果你的用户在继续操作之前需要从你的应用得到某些信息或者得到一个响应，那就要让用户等待。这往往意味着需要一个同步请求。

---

Q：呢么，对于这个网店，由于我们希望加载商品图形和描述信息的同事用户能继续浏览页面，所以需要一个异步请求，对吗？
A：完全正确。网店应用中有一部分——也就是查看不同商品——并不需要用户每次选择一个新商品时都必须等待。所以这里非常适合使用Ajax并建立异步请求。

---

使用Ajax改造网店的5个步骤####

• 修改XHTML Web页面。
  需要包含接下来要编写的JavaScript文件，并增加一些div和id，使 JavaScript脚本能查找和处理web页面中的不同部分。

2. 编写一个函数初始化页面。
   首次加载目录页面时，需要运行一些JavaScript脚本来建立这些图像，准备好一个请求对象，并确保页面已经准备就绪。
   window.onload = initPage;
   function initPage(){
   //建立图像
   //创建请求对象
   }
3. 编写一个函数请求对象。
   我们需要一个途径与服务器通信，并得到商品目录中每个纪念品的详细信息。为此将编写一个函数创建一个请求对象，以便我们的代码与服务器通信；这个函数名为createRequest()。只要点击一个缩略图就可以使用这个函数启动一个新的请求。

createRequest()是一个工具函数，我们将反复使用这个函数。它会创建一个基本的通用请求对象。

4. 从服务器得到一个商品的详细信息。
   我们将在getDetails()中向服务器发送一个请求，告诉浏览器当服务器响应时该怎么做。
5. 显示商品的详细信息。
   可以在getDetails()中改变要显示的图像，然后需要另一个函数displayDetails()在服务器对请求作出响应时更新商品的描述信息。