JavaScript程序设计第七章Ajax应用.pptx

JavaScript程序设计与应用 Ajax应用 目 录Ajax概述Ajax使用步骤Ajax数据格式 目 录Ajax概述Ajax使用步骤Ajax数据格式 一、什么是Ajax内置函数Ajax概述Asynchronous Javascript And XML（异步的JavaScript和XML）刷新页面刷新页面Ajax局部刷新页面局部刷新页面Ajax不是一种新的编程语言，它是一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，是在 2005年被Jesse James Garrett提出的新术语。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 对象let xhr;if (window.XMLHttpRequest) {//现代主流浏览器xhr = new XMLHttpRequest();} else {// 针对浏览器，比如IE5或IE6xhr = new ActiveXObject(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、xhr.responseXML：XML文档3、xhr.response：通过设置xhr.reponseType的值可以接收不同类型的文件数据 Ajax数据格式 单击此处添加副标题谢谢聆听