JavaScript+jQuery前端开发基础教程（第2版）（微课版）第12章

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外，其他参数均可省略。通常，只请求服务器数据时使用GET方式，向服务器提交数据时使用POST方式。请求的服务器文件的类型不限，.xml、.txt、.asp、.aspx、.jsp或其他文件类型均可。典型的AJAX是异步操作，即open()方法的第3个参数为false。如果请求的服务器文件需要验证用户身份，则需要在open()方法中提供用户名和密码。open()方法中提供的用户名和密码以明文方式传递，存在被拦截的风险，慎用。例如，下面的语句采用GET方式异步请求服务器端的data.xml文件。xhr.open("GET"

,

"data.xml")2．send()方法send()方法用于将HTTP请求发送给服务器，其基本语法格式如下。xhr.send(str)参数str为传递给服务器的数据（数据封装为URL查询参数格式），可以省略。例如，服务器端处理查询的ASP文件为doQuery.asp，可用下面的语句来发起HTTP请求。var

str

=

"type=程序设计&kword=Java"xhr.open("POST",

"doQuery.asp")xhr.send(str)也可将查询参数放在open()方法的url中。var

str

=

"type=程序设计&kword=Java"xhr.open("POST",

"doQuery.asp?"

+

str)xhr.send()3．setRequestHeader()方法setRequestHeader()方法用于设置HTTP请求头。xhr.setRequestHeader('Content-type',

'text/plain,charset=UTF-8')setRequestHeader()方法必须在open()方法之后、send()方法之前进行调用，否则会出错4．getRequestHeader()方法getRequestHeader()方法返回服务器响应的HTTP头参数。var

ctype

=

xhr.getRequestHeader('Content-type')5．getAllRequestHeaders()方法getAllRequestHeaders()方法以字符串的形式返回服务器响应的HTTP头的全部参数。var

rheaders=

xhr.getAllRequestHeaders()6．abort()方法abort()方法用于停止当前异步请求。xhr.abort()【例12-2】获取AJAX请求状态和响应结果。12.1.6处理普通文本响应结果XMLHttpRequest对象的responseText属性用于获得普通文本响应结果。在服务器端，响应内容通常使用脚本动态生成。【例12-3】采用GET方式向服务器提交学生学号，返回其姓名、班级、年龄等信息。……12.1.7处理XML响应结果responseXML属性返回包含响应结果的XML对象，进一步使用XMLDOM解析即可获得具体数据。XMLDOM与HTMLDOM类似，限于篇幅，本书不再详细介绍XMLDOM。【例12-4】修改例12-3，以XML文档格式返回响应结果，将其转换为字符串显示在页面中。12.1.8处理JSON响应结果JSON字符串在JavaScript中可直接转换为对象。下面是一个JSON字符串。{class:"高一、8班",name:"李雷雷",age:15}{}表示对象常量，eval()函数可将JSON字符串转换为对象。var

a

=

eval('({class:"高一、8班",name:"李雷雷",age:15})')执行该语句后，a.class、、a.age分别为对象的3个属性。在服务器脚本中，可将响应内容构造为JSON字符串返回。【例12-5】修改例12-3，以JSON字符串返回响应结果。12.2使用<script>完成HTTP请求<script>标记可向服务器提交HTTP请求，其原理为，将一个新的<script>标记插入页面中时，若其src属性设置为URL，浏览器会向服务器发送该URL的请求。这种方式发起的HTTP请求是同步执行的——等同于用XMLHttpRequest对象执行同步请求，用户必须等待响应返回，所以适用于耗时较小的操作。服务器返回结果应包含一个函数调用表达式，JavaScript执行函数来处理返回结果。例如，下面的服务器脚本输出返回结果。Response.Write('getInfo('+rs+')')getInfo()为客户端脚本中定义的函数。rs为返回给客户端的数据，它作为getInfo()函数的参数。响应结果返回到客户端时，等同于通过<script>标记来调用getInfo()函数。要使用<script>完成HTTP请求，需要使用脚本向当前页面添加一个<script>标记，并定义处理响应结果的函数。【例12-6】修改例12-3，使用<script>完成HTTP请求。12.3.1加载简单数据load()方法最简单的用法是直接将服务器返回数据加载到页面元素中，其基本语法格式如下。$(选择器).load(url)其中，$(选择器)匹配的页面元素用于显示服务器返回的数据。url为请求的服务器资源的URL，返回的数据通常为HTML格式的文本。【例12-7】从服务器加载简单数据。12.3.2筛选加载的数据jQuery允许对load()方法返回的数据应用选择器，基本语法格式如下。$(选择器).load("url

选择器")【例12-8】筛选加载的数据。12.3.3向服务器提交数据可在load()方法的第2个参数中指定提交给服务器的数据，其基本语法格式如下。$(选择器).load(url,data)其中，参数data为提交的数据，可以是对象或字符串。包含提交的数据时，load()方法采用POST方式发起AJAX请求。在本章前面的所有实例中，采用的均为GET方式。GET方式的HTTP请求，客户端提交的数据包含在URL中，所以在服务器端需解析URL，以获得其中的客户端数据。POST方式的HTTP请求，客户端提交的数据包含在请求体中。Node.js接收到客户端采用POST方式提交的数据时，触发request的data事件，可在事件处理函数中接收客户端数据。客户端数据接收完成后，触发request的end事件，可在事件处理处理函数中处理接收到的数据，向客户端返回响应【例12-9】向服务器提交数据。12.3.4指定回调函数可为load()方法指定一个回调函数，该函数在AJAX请求返回数据且数据已经显示到当前页面后执行。基本语法格式如下。$(选择器).load(url[,data][,callback])其中，callback为回调函数名称，也可是一个匿名函数。【例12-10】在load()方法中使用回调函数。12.3.5执行脚本load()方法返回的数据可以包含脚本，脚本作为数据的一部分加载到当前页面元素中，然后被执行。【例12-11】执行来自服务器的脚本。12.4.1get()方法get()方法基本语法格式如下。jQuery.get(

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.get(

{url:请求url

[,

data:提交的数据

]

[,

success:回调函数

]

[,

dataType:返回数据的类型

]})其中，参数url为请求的服务器资源的URL。参数data为对象或字符串，包含向服务器提交的数据。参数success为AJAX请求成功完成时调用的回调函数。参数dataType为服务器返回数据的数据类型，通常jQuery可自动决定数据类型。常用的数据类型有xml、json、script、text或html等。get()方法的参数url是必需的，其他参数均可省略。load()方法类似于get(url,data,success)。get()方法返回的数据通常在success参数指定的回调函数中进行处理。回调函数的3个参数依次为封装了返回数据的对象、表示AJAX请求完成状态的字符串（通常为success）和执行当前AJAX请求的XMLHttpRequest对象。【例12-12】使用get()方法执行AJAX请求。12.4.2post()方法post()方法的基本语法格式如下。jQuery.post(

url

[,

data

]

[,

success

]

[,

dataType

]

)jQuery.post(

{url:请求url

[,

data:提交的数据

]

[,

success:回调函数

]

[,

dataType:返回数据的类型

]})各参数含义与get()方法参数相同。【例12-13】使用post()方法执行AJAX请求。12.5获取JSON数据getJSON()方法用于从服务器返回JSON格式的数据，其基本语法格式如下。jQuery.getJSON(

url

[,

data

]

[,

success

])其中，参数url为请求的服务器资源的URL。参数data为对象或字符串，包含向服务器提交的数据。参数success为AJAX请求成功完成时调用的回调函数。回调函数的3个参数依次为封装了JSON数据的对象、表示AJAX请求完成状态的字符串（通常为success）和执行当前AJAX请求的XMLHttpRequest对象。【例12-14】获取服务器端的JSON数据。12.6获取脚本getScript()方法用于请求服务器端的JavaScript脚本文件，其基本语法格式如下。jQuery.getScript(

url

[,

success

])其中，参数url为请求的服务器资源的URL。参数success为AJAX请求成功完成时调用的回调函数。回调函数的3个参数依次为包含脚本代码的字符串、表示AJAX请求完成状态的字符串（通常为success）和执行当前AJAX请求的XMLHttpRequest对象。【例12-15】获取服务器端的脚本。12.7.1AJAX事件Query定义的AJAX事件可分为两种类型：本地事件和全局事件。本地AJAX事件指执行AJAX请求的XMLHttpRequest对象所发生的事件。全局AJAX事件指在执行AJAX请求时Document对象发生的事件，对当前页面中执行的所有AJAX请求均有效。jQuery定义的AJAX事件ajaxStart：全局事件，在开始一个AJAX请求时会发生该事件。beforeSend：本地事件，在开始一个AJAX请求之前发生该事件，此时，允许修改XMLHttpRequest对象（如添加HTTP请求头参数等）。ajaxSend：全局事件，在开始一个AJAX请求之前发生该事件。succes：本地事件，在AJAX请求成功完成时发生该事件。ajaxSuccess：全局事件，在AJAX请求成功完成时发生该事件。error：本地事件，在AJAX请求执行过程中出现错误时发生该事件。ajaxError：全局事件，在AJAX请求执行过程中出现错误时发生该事件。complete：本地事件，在AJAX请求结束时发生该事件。ajaxComplete：全局事件，在AJAX请求结束时发生该事件。ajaxStop：全局事件，在当前页面中，所有的AJAX请求结束时发生该事件。12.7.2全局AJAX事件方法jQuery定义了几个全局AJAX事件方法，用于注册全局AJAX事件处理函数。jQuery中的全局AJAX事件方法如下。ajaxComplete(handler)：注册ajaxComplete事件处理函数，处理函数原型为Functi