JavaScript前端开发案例教程第10章 Ajax 教学PPT.pptVIP

10.6 扩展技术 多 学 一 招 Fetch API fetch(test.php, { method: POST, headers: new Headers({ Content-Type: text/plain }) }).then(function(response) { // 处理响应结果 }).catch(function(err) { // 处理错误 }); 示例 10.6 扩展技术 WebSocket WebSocket：是HTML5新增的一个客户端与服务器异步通信的API。 作用：用于使浏览器支持WebSocket网络协议。 解决的问题： HTTP轮询。 HTTP轮询：客户端需要不断向服务器发送HTTP请求，询问服务器是否有新的消息，这种方式称为HTTP轮询。特点是其通信效率非常低。 10.6 扩展技术 WebSocket 解决办法：WebSocket实现了全双工通信，在建立连接后，服务器可以将新消息主动推送给客户端，这种方式实时性更强，效率更高。 WebSocket的使用具体如例10-15和10-16所示。 动手实践 进度条文件上传 代码实现思路： ① 创建一个上传文件的表单，使用FormData收集表单数据，并输出上传进度。 ② 修改PHP配置文件，确保可接收上传的文件。 ③ 在服务器端，接收上传文件并保存到当前目录中。 ④ 利用百分比实现文件上传进度的显示。 本章小结 本章首先介绍了Web服务器相关的基础知识，然后讲解了Ajax对象常用属性和方法、XML和JSON数据格式，以及Ajax跨域请求问题，最后讲解了与Ajax相关的一些扩展技术。通过本章的学习，读者应理解Ajax的基本原理，重点掌握Ajax技术和JSON数据格式在Web开发中的应用。 10.3 Ajax入门 处理服务器返回的信息 另外，Ajax状态的还可以通过“XMLHttpRequest.属性名”的方式获取。 XMLHttpRequest.UNSENT; // 对应状态值0 XMLHttpRequest.OPENED; // 对应状态值1 XMLHttpRequest.HEADERS_RECEIVED; // 对应状态值2 XMLHttpRequest.LOADING; // 对应状态值3 XMLHttpRequest.DONE; // 对应状态值4 10.3 Ajax入门 处理服务器返回的信息 onreadystatechange事件属性用于感知readyState属性状态的改变，每当readyState的值发生改变时，就会调用此事件。具体如例10-5所示。 10.3 Ajax入门 处理服务器返回的信息 status属性用于返回当前请求的HTTP状态码，值为数值类型。 例如，当请求成功时，状态码为200。 另外还有一个类似的属性statusText，值为字符型数据，包含了描述短语，如“200 OK”。 10.3 Ajax入门 处理服务器返回的信息 当请求服务器成功且数据接收完成时，可以使用Ajax对象提供的相关属性获取服务器的响应信息。 属性名 说明 responseText 将响应信息作为字符串返回 responseXML 将响应信息格式化为XML Document对象并返回（只读） responseXML属性在请求失败或相应内容无法解析时的值为null。 需要注意的是，服务器在返回XML时应设置响应头Content-Type的值为text/xml或application/xml，否则会解析失败。 Ajax如何处理服务器返回的信息，具体如例10-6所示。 10.3 Ajax入门 多 学 一 招 URL参数编码转换 在通过URL参数传递数据时，如果参数中包含特殊字符可能会出现问题。 例如“?”“=”“”，这些字符已经被赋予了特定的含义。 如果需要传递这些特殊字符，可以使用encodeURIComponent()进行URL编码。 10.3 Ajax入门 多 学 一 招 URL参数编码转换 var str = encodeURIComponent(AB C); var url = http://xxx/test.php?name= + str; // 输出结果：http://xxx/test.php?name=A%26B%20C console.log(url); “”被转换为“%26”。 空格被转换为“%20”。 当服务器收到已编码的内容之后，会对其进行解码，从而正确识别这些特殊字符。 10.3 Ajax入门 多 学 一 招 URL参数编码转换 对于已经编码的字符串，可以使用decodeURIComponent()进行解码。 var str = A%26B%20C; // 输出结果：AB C console.