2023学年完整公开课版Ajax服务器交互

《物联网Web前端开发基础》课程

Ajax服务器交互【任务8-2】Ajax技术需求分析在传统网站中，网页无法实现局部更新，当用户刷新页面，页面会更新整个页面的数据，在网速慢的情况下，如果网页非常大，用户体验非常不好。【任务8-2】Ajax技术下面将带领读者认识Ajax。需求分析为了提高用户体验，浏览器引入了Ajax技术，通过Ajax技术可以实现网页的局部更新。【任务8-2】Ajax技术知识储备——Ajax与传统网页的区别传统网页工作流程：【任务8-2】Ajax技术知识储备——Ajax与传统网页的区别Ajax网页工作流程：【任务8-2】Ajax技术知识储备——Ajax与传统网页的区别Ajax技术的优势：减轻服务器的负担节省宽带用户体验更好【任务8-2】Ajax技术知识储备——创建Ajax对象通过XMLHttpRequest构造函数创建Ajax对象：varxhr=newXMLHttpRequest();【任务8-2】Ajax技术知识储备——Ajax对象常用的方法Ajax对象有3个常用的方法：open()send()setRequestHeader()【任务8-2】Ajax技术知识储备——Ajax对象常用的方法open()基本语法格式open('method','URL'[,asyncFlag[,'userName'[,'password']]])method用于指定请求方式，如GET、POST，不区分大小写；URL表示请求的地址。可选参数：asyncFlag用于指定请求方式，同步请求为false，默认为异步请求true；userName和password表示HTTP认证的用户名和密码。【任务8-2】Ajax技术知识储备——Ajax对象常用的方法send()基本语法格式send(content)content用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用。如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。【任务8-2】Ajax技术知识储备——Ajax对象常用的方法setRequestHeader()基本语法格式setRequestHeader('haeder','value')header表示请求头字段value为该字段的值。注意：此方法必须在open()方法后调用。【任务8-2】Ajax技术知识储备——Ajax对象发送请求【任务8-2】Ajax技术知识储备——同步请求与异步请求open()方法的第3个参数用于设置同步请求和异步请求。两种方式的区别在于，是否阻塞代码的执行。【任务8-2】Ajax技术知识储备——同步请求与异步请求默认的异步方式是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。【任务8-2】Ajax技术知识储备——同步请求与异步请求同步方式是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。【任务8-2】Ajax技术知识储备——同步请求与异步请求由于同步请求的Ajax导致程序阻塞，会对用户体验造成不利影响，所以通常情况下不推荐使用同步请求。【任务8-2】Ajax技术知识储备——处理服务器返回的信息readyState属性用于获取Ajax的当前状态，状态值有5种形式。状态值说明解释0未发送对象已创建，尚未调用open()方法1已打开open()方法已调用，此时可以调用send()方法发起请求2收到响应头send()方法已调用，响应头也已经被接收3数据接收中响应体部分正在被接收。responseText将会在载入的过程中拥有部分响应数据4完成数据接收完毕。此时可以通过responseText获取完整的响应【任务8-2】Ajax技术知识储备——处理服务器返回的信息onreadystatechange属性用于感知readyState属性状态的改变，每当readyState的值发生改变时，就会调用此事件。【任务8-2】Ajax技术知识储备——处理服务器返回的信息当调用open()和send()方法后，readyState属性的值会发送变化，每次变化都会触发onreadystatechange事件。【任务8-2】Ajax技术知识储备——处理服务器返回的信息status属性用于返回当前请求的HTTP状态码，值为数值类型。例如，请求成功时的状态码为200。statusText属性值功能类似，它返回字符型结果，包含了描述短语，如“200OK”。【任务8-2】Ajax技术知识储备——处理服务器返回的信息当请求服务器成功且数据接收完成时，可以使用Ajax对象提供的相关属性，获取服务器的响应信息。属性名说明responseText将响应信息作为字符串返回responseXML将响应信息格式化为XM