JavaScript程序设计（微课版）课件 第七章Ajax应用

JavaScript程序设计与应用Ajax应用目

录Ajax概述Ajax使用步骤Ajax数据格式目

录Ajax概述Ajax使用步骤Ajax数据格式一、什么是Ajax内置函数Ajax概述AsynchronousJavascript

AndXML（异步的JavaScript和XML）刷新页面刷新页面Ajax局部刷新页面局部刷新页面Ajax不是一种新的编程语言，它是一种使用现有技术集合的‘新’方法，包括:HTML或XHTML,CSS,JavaScript,DOM,XML,XSLT,以及最重要的XMLHttpRequest，是在2005年被JesseJamesGarrett提出的新术语。Ajax在浏览器与Web服务器之间使用异步数据传输，可以使网页从服务器请求少量的信息而不是整个页面，从而能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。Ajax是一种用于创建更好更快以及交互性更强的Web应用程序的技术。二、Ajax的核心Ajax使用步骤xhr（XMLHttpRequest）对象代表着http协议规范在客户端js中的实现。在web前端，一次http请求对应着一个xhr实例。通过xhr实例，可以取到http协议中规定的各种协议属性。本质上，所有的请求响应报文的主体都是二进制的数据。我们传输的文本内容，也是编码好的二进制数据。http规范中规定了一个Content-type头，指明数据主体的格式，告诉收发的两端将二进制的数据主体按照什么类型进行解析。接口response和responseText

、responseXML提供了便捷的接口，配合responseType，方便用户获取到解析好的响应，省去手动解析响应主体的步骤。目

录Ajax概述Ajax使用步骤Ajax数据格式一、Ajax的使用步骤Ajax使用步骤1.创建XMLHttpRequest对象letxhr;if(window.XMLHttpRequest){//现代主流浏览器xhr=newXMLHttpRequest();}else{//针对浏览器，比如IE5或IE6xhr=newActiveXObject("Microsoft.XMLHTTP");}2.初始化：给定请求方式以及请求地址xhr.open(method,url,async)method:get和posturl:文件或资源的路径async:true(默认，代表异步),false（代表同步）post发送请求什么时候能够使用？(1)更新一个文件或者数据库的时候。

(2)发送大量数据到服务器，因为post请求没有字符限制。

(3)发送用户输入的加密数据。3.发送请求xhr.send();使用get方法发送请求到服务器。xhr.send(string);使用post方法发送请求到服务器。Ajax使用步骤4、获取服务器端给客户端的响应数据xhr.onreadystatechange=function(){//readyState属性判断//0:open()没有被调用，1:open()正在被调用,2:send()正在被调用，3:服务端正在返回结果//4:请求结束，并且服务端已经结束发送数据到客户端if(xhr.readyState===4){//status属性判断//1**：请求已经被接受，需要继续处理,2**：请求已经被服务器接受//3**：重定向，4**：请求错误if(xhr.status>=200&&xhr.status<300){

//接收数据}else{console.log('erro:'+xhr.status);}}}目

录Ajax概述Ajax使用步骤Ajax数据格式一、接收数据的属性1、xhr.responseText：文本字符串2