开始一个Ajax

一个Web网店###


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

**网店现在的做法**

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


**修改目标**

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


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


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

  • 修改XHTML Web页面。
    需要包含接下来要编写的JavaScript文件,并增加一些div和id,使 JavaScript脚本能查找和处理web页面中的不同部分。
  1. 编写一个函数初始化页面。
    首次加载目录页面时,需要运行一些JavaScript脚本来建立这些图像,准备好一个请求对象,并确保页面已经准备就绪。
    window.onload = initPage;
    function initPage(){
    //建立图像
    //创建请求对象
    }
  2. 编写一个函数请求对象。
    我们需要一个途径与服务器通信,并得到商品目录中每个纪念品的详细信息。为此将编写一个函数创建一个请求对象,以便我们的代码与服务器通信;这个函数名为createRequest()。只要点击一个缩略图就可以使用这个函数启动一个新的请求。

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

  1. 从服务器得到一个商品的详细信息。
    我们将在getDetails()中向服务器发送一个请求,告诉浏览器当服务器响应时该怎么做。
  2. 显示商品的详细信息。
    可以在getDetails()中改变要显示的图像,然后需要另一个函数displayDetails()在服务器对请求作出响应时更新商品的描述信息。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,607评论 0 7
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,956评论 0 106
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,324评论 19 139
  • Angelo Donghia是上个世纪美国著名的室内设计师之一,虽然他在1985年就去世了,但是他的工作室依然发展...
    3D虎阅读 4,073评论 0 1
  • 《魔法岁月》P161-183 性教育的意义 告诉孩子生殖方面的知识只是性教育工作的一小部分内容。在性教育的早期,我...
    喵妈爱小鱼阅读 1,527评论 0 0