一、本课目标

• 了解Ajax的概念
• 学会使用JS实现Ajax

二、概述

2.1导言

在传统web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断地刷新页面。在等待期间，由于新的页面没有生成，整个浏览器将会是一片空白，而用户只能继续等待。对用户而言，这是一种不连续的体验。同时，频繁地刷新页面也会使服务器的负担加重。
Ajax技术正是为了弥补以上不足而诞生的。Ajax应用使用JavaScript异步发送请求，不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器相应完成以后，再使用JavaScript将响应展示给用户。
使用Ajax为例，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到干扰。我们在必要的时候可以只更新页面的一小部分，而不用刷新整个页面，即“无刷新”技术。
例如Google地图，提供的拖动、放大、缩小等操作都是建立在“无刷新”技术之上的。Ajax强调的是异步发送用户请求，在一个请求的服务器相应还没返回时，可以再次发送请求。这种发送请求的模式可以使用户获得类似桌面程序的用户体验。

2.2Ajax技术与传统的web开发技术的差异

1、发送请求的方式不同：传统的web应用通过浏览器发送请求，而Ajax技术则是通过JavaScript的XMLHttpRequest对象发送请求。
2、服务器的响应不同：针对传统web应用，服务器的响应是一个完整的页面，而采用Ajax技术后，服务器的响应只是需要的数据。
3、客户端处理的响应方式不同：传统的web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后，浏览器将不再专门等待请求的响应，而只是通过JavaScript动态更新页面中需要更新的部分。

2.3认识Ajax

从前面的介绍中我们已经知道，使用Ajax技术可以通过JavaScript发送请求到服务器，在服务器响应结束后，根据返回结果可以只更新局部页面，以提供连续的客户体验。那么什么是Ajax呢？
Ajax（Asychronous Javascript And XML）并不是一种全新的技术，而是由JavaScript、XML、CSS等几种现有技术整合而成。Ajax的执行流程是先由用户界面触发事件调用JavaScript，通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或者HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

image.png

Ajax技术包括以下关键内容：

• JavaScript语言：Ajax技术的主要开发语言
• XML/JSON/HTML等：用来封装请求或响应的数据格式
• DOM（文档对象模型）：通过DOM属性或者方法修改页面元素，实现页面局部刷新
• CSS：改变样式，美化页面效果，提升用户体验
• Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据。

AJAX即Asychronous Javascript And XML，异步JavaScript和XML。
AJAX是一种用于创建交互式网页应用的技术。
AJAX是一种网页局部内容更新的技术。

image.png