JavaScript+jQuery前端开发基础教程（第2版）（微课版）课件 刘凡馨 第12章 AJAX；第13章 在线咨询服务系统.pptx

JavaScript+jQuery前端开发基础教程微课版

第12章AJAX本章主要内容：加载服务器数据get()方法和post()方法获取JSON数据获取脚本事件处理

12.1.1AJAX概述AJAX主要涉及JavaScript、HTML、XML和DOM等多种客户端网页技术。在传统Web开发模式下，获取服务器数据意味着浏览器会发起一个HTTP请求，服务器接收到请求后，返回响应结果。浏览器接收到响应结果后，将其显示在浏览器窗口中。在这种模式下，即使仅修改页面中的一个字符，也需要从服务器返回包含该字符的整个HTML文档内容，并且，在浏览器显示出响应结果之前，用户只能等待。传统Web开发模式的显著缺点是，响应HTTP请求总是需要返回新页面的全部HTML内容，这增加了网络数据流量和服务器计算工作量，用户体验也差。AJAX技术在后台发起HTTP请求，不影响用户继续浏览当前页面。服务器只返回更新页面必需的数据，这些数据通常为一个字符串。浏览器在接收到响应后，在不刷新页面的情况下，通过JavaScript脚本将响应内容显示在当前页面中。

AJAX使用XMLHttpRequest对象来完成HTTP请求。典型的AJAX请求脚本通常包含下列基本步骤。（1）创建XMLHttpRequest对象。（2）设置readystatechange事件处理函数。（3）打开请求。（4）发送请求。

AJAX请求脚本基本结构如下。var?xhr?=?getXMLHttpRequest()??????????????//创建XMLHttpRequest对象xhr.onreadystatechange?=?function?()?{?????//设置readystatechange事件处理函数????……?????????????????????????????????????//处理服务器返回的响应结果}xhr.open(GET,?ajaxtext.txt)????????????//打开请求xhr.send()?????????????????????????????????//发送请求

12.1.2部署服务器本书采用Node.js作为Web服务器，下面介绍如何在Windows10中部署Node.js，具体操作步骤如下。……

12.1.3创建XMLHttpRequest对象Edge、Firefox、Chrome、Safari及Opera等浏览器均支持调用内置的XMLHttpRequest()函数来创建XMLHttpRequest对象。var?xhr?=?new?XMLHttpRequest()

12.1.4XMLHttpRequest对象常用属性1．onreadystatechange该属性用于设置readystatechange事件处理函数。2．readystate该属性用于返回AJAX请求的处理状态。readystate属性有下列5种取值。0：请求未初始化。1：服务器连接已建立。2：请求已接收。3：请求处理中。4：请求已完成，且响应已就绪。readystate属性发生改变时会产生readystatechange事件，JavaScript调用事件处理函数处理响应。

3．status属性status属性返回服务器处理HTTP请求的状态码。常用状态码如下。200：请求已成功处理。202：请求已接受，但未成功处理。400：错误的请求。404：文件未找到。408：请求超时。500：服务器内部错误。status属性值在获得了服务器返回的响应后才有意义。

4．responseText和responseXMLresponseText和responseXML属性都用于获得服务器的响应内容。如果将服务器响应内容作为普通文本字符串处理，则应使用responseText属性。如果将服务器的响应内容作为XML对象来解析，则应使用responseXML属性。

12.1.5XMLHttpRequest对象常用方法1．open()方法open()方法用于设置AJAX发起HTTP请求时采用的方式、请求目标和其他参数，其基本语法格式如下。xhr.open(method?,?url?,?asyn?,?username?,?password?)其中，xhr为XMLHttpRequest对象。method为请求方式，例如GET或POST。url为请求的服务器文件URL。asyn为true（同步）或false（异步，默认值）。username为用户名，password为密码。除了method和url外，其他参数均可省略。

通常，只