Web全栈开发案例教程课件 第6章 Ajax与异步编程技术

Web全栈开发案例教程第6章Ajax与异步编程技术浏览器发送HTTP请求的三种方式输入网址(请求载入页面)提交表单(发送数据并载入页面)用XMLHttpRequest对象（简称xhr对象）发送异步HTTP请求（页面不会刷新）浏览器Web服务器HTTP请求HTTP响应(完整的页面)页面会刷新HTTP响应(HTML片段或字符串等)Ajax概述Ajax：异步JavaScript和XML（AsynchronousJavaScriptandXML）本质：异步刷新页面的局部区域Ajax技术主要是使用JavaScript通过XMLHttpRequest对象直接与服务器进行交互，实现页面发送异步请求到Web服务器，并接受Web服务器返回的信息，而且整个过程中无需加载整个页面，展示给用户的还是原来的页面传统的Web应用程序传统的Web应用程序：发送请求给服务器→服务器对请求进行处理（此时客户端需等待）→处理完成后服务器发送回全新的页面客户端服务器时间用户操作用户操作用户操作服务器处理服务器处理等待等待传统Web应用程序的不足一个HTTP请求对应一个页面加载页面时用户必须等待Ajax技术（可以解决这两个问题）异步：煮饭的过程中我们可以继续做菜浏览器与服务器交互的过程中，用户仍然可以在浏览器上进行其他一些操作。基于Ajax的Web应用程序Ajax程序：在与Web服务器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面；同时，在与Web服务器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待服务器的响应。浏览器Web服务器HTTP请求HTTP响应(HTML片段或字符串等)基于Ajax的Web应用程序客户端服务器时间用户操作服务器处理服务器处理Ajax引擎客户端处理9.1.2载入页面的方法比较<iframe>标记远程脚本技术Ajax技术XMLHttpRequest对象简介Ajax技术的核心：XMLHttpRequest对象

XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部windowXMLHttpRequestlocationdocument……XMLHttpRequest对象的工作过程自动售水机①投硬币②准备容器接水③出水XMLHttpRequest对象的工作过程与自动售货机售货过程的对比自动售水机①投币②准备接水④接水用户③出水浏览器Web服务器〇初始化XMLHttpRequest对象①发送异步请求③返回响应④用容器元素载入响应的内容②监听服务器响应

XMLHttpRequest对象的工作过程创建XMLHttpRequest对象的实例使用open()方法指定载入文档请求使用send()方法发送请求——投硬币使用onreadystatechange事件监听服务器——准备接水使用DOM元素载入服务器返回的内容——接水①创建XMLHttpRequest对象的实例创建XMLHttpRequest对象的实例var

xhr=newXMLHttpRequest(); ②使用open()方法指定载入文档请求使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式

xhr.open("GET","6-2.html",True);

http请求的方式请求的URL是否为异步方式③使用send()方法发送请求使用open()方法指定了请求后，还要用send()方法将请求发送出去xhr.send(null);如果不写null，则在Firefox中无法运行④使用onreadystatechange事件监听服务器用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。这时需要用事件监听机制来捕获请求的状态，onreadystatechange事件实现这一功能。xhr.onreadystatechange=RequestCallBack; functionRequestCallBack(){ if(xhr.readyState==4&&xhr.status==200){

document.getElementById("target").innerHTML=xhr.responseText; } }出来的水说明①onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕）status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求说明②服务器在收到客户端的请求后，根据请求返回相应的内容。

文本形式:存储在responseText中，

XML格式:存储在responseXML中。它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的响应信息。如果设置服务器端响应内容类型为Response.ContentType="text/xml"，responseXML才会有值并被解析成一个XML文档。6.1.4用Ajax技术载入文档用Ajax技术可以载入任何网页文档，如果载入的是动态网页（如PHP），则服务器端会先执行动态网页，再将生成的静态HTML代码发送给客户端，因此客户端网页加载的是动态网页执行后的静态HTML代码6.1.5载入动态数据varexpress=require('express');varrouter=express.Router();router.get('/',function(req,res,next)

res.send('请求动态数据'+newDate());});6-3.htmlxhr.open("get","/users");//路由的起点是/users/Ajax与传统Node.js程序的区别在获取并显示服务器端数据时，页面并没有刷新由于页面没有刷新，浏览器不知道服务器什么时候完成了对请求的处理，所以需要onreadystatechange进行监听XMLHttpRequest与服务器端通信的步骤①创建XMLHttpRequest对象；②使用open()方法设置请求的URL、发送请求的方式以及是否为异步模式；③使用send()方法发送HTTP请求；④使用onreadystatechange事件监听服务器端的反馈，根据readyState属性来判断服务器是否已经完成对请求的处理，一旦完成则接收服务器端传回的数据（在responseText中）XMLHttpRequest对象与服务器通信的过程初始化发送请求等待服务器响应获取响应用回调函数监控XMLHttpRequest对象的状态，当readyState为4时获取服务器响应对XMLHttpRequest对象的反思①XMLHttpRequest对象虽然名称中含有XML，但它并不限于和XML文档一起使用，它可以接收任何形式的文本文档，如HTML文档、JSON文档、XML文档等。②XMLHttpRequest对象是位于客户端浏览器中的对象，它的作用是发送数据给服务器后再从服务器获取传回来的数据发送数据给服务器Get方式xhr.open("get","/users?user=tang");Post方式xhr.open("post","/users/p");xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');xhr.send("user=tang&n="+Math.random()); 9.2用jQueryAjax方法载入文档jQuery中常用的Ajax方法方法功能load(url,[data],[callback])载入远程HTML文件代码并插入至DOM元素中$.get(url,[data],[callback],[type])通过远程HTTPGET请求载入信息$.post(url,[data],[callback],[type])通过远程HTTPPOST请求载入信息$.ajax(options)通过

HTTP请求加载远程数据，jQuery的底层

Ajax实现。使用load方法载入HTML文档Ajax的本质特征就是刷新页面的局部，这主要是通过将远程的文档载入到页面的局部元素中实现的load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为

load(url[,data][,callback])functionAjax(){

xhr.open("get","/users");}用load方法载入/users返回的内容到#target元素中load()方法的参数参数名称类型说明urlString请求HTML文档的URL地址data(可选)Object发送至服务器的key:value数据（Json类型数据）callback（可选）Function请求完成时的回调函数，无论请求成功或失败2.载入HTML文档中的指定元素functionAjax(){ $(“#target”).load(“6-2.html.title”); //URL和选择器之间必须有一个空格

}

<inputtype="button"value="Ajax载入"onclick="Ajax();"/>

<divid="target"></div>本章所有程序的HTML代码load()方法的局限性①load方法用于直接返回HTML的Ajax接口，不能返回其他格式的文档；②load是一个jQuery对象的方法,需要在jQuery对象上调用，并且会将返回的HTML加载到这个对象内，即使设置了回调函数也还是会加载，因此不方便对返回的HTML代码先进行处理后再加载6.2.3使用$.getJSON方法载入JSON文档functionAjax(){

$.getJSON("9-7.json");

}functionAjax(){

$.getJSON("9-7.json",function(data){

$("#target").html(data[1].username);

}); }载入的JSON文档并不能直接显示在页面上9-7.json中的内容是一个JSON数组获取JSON文档中的所有数据使用普通循环functionAjax(){

$.getJSON("9-7.json",function(data){

for(i=0;i<data.length;i++){ $("#target").append("<h3>"+data[i].username+"</h3>");

$("#target").append("<p>"+data[i].content+"</p>");

} }); }回调函数

获取JSON文档中的所有数据（2）使用$.each()方法functionAjax(){ $.getJSON("9-7.json",function(data){

$.each(data,function(i,item){

$("#target").append("<h3>"+item.username+"</h3>");

$("#target").append("<p>"+item.content+"</p>"); }); }); }json数组

json对象

说明①回调函数function(data)中的data参数可以将服务器端输出的数据转换成客户端的数据，是Ajax技术中服务器与浏览器之间传递数据的桥梁。②遍历数组可采用循环的方法，也可采用$.each方法，程序中将每个数组元素中的对象属性取出后，将其放置在不同的HTML标记中，使它们以不同的表现形式显示出来。可见，JSON格式数据由于具有规范的格式，使JSON文档中的任何数据都可以按需取出加载不同文档后回调函数data中的内容加载HTML文档后，回调函数的参数data中保存的是一个字符串加载JSON文档后，回调函数的参数data中保存的是一个数组或对象加载XML文档后，回调函数的参数data中保存的是一个XML元素（XML文档的根元素）6.3发送数据给服务器9.3.1使用$.get()方法执行GET请求如果使用$.get()方法的data参数，该方法就还能发送数据给远程页面$.get(URL[,data][,callback][,type])参数名称类型说明URLString请求的远程文件的URL地址dataObject发送给服务器的key:value数据callback（可选）Function回调函数，载入成功后会执行该函数中的代码type（可选）String服务器端返回内容的格式，可以是html、json、xml、script、jsonp、text等1.发送表单中的数据给服务器functionAjax(){$.get(“/users/get”,

{user:$(“#user”).val(),comment:$(“#comment”).val()},

function(data){ $("#target").append(data); });}表单中的数据data参数遵循JSON对象形式补充：获取各种表单元素的数据varsingleValues=$("#single").val();varmultipleValues=$("#multiple").val()||[];varcheckboxValues=[];$("input:checkbox:checked").each(function(){checkboxValues[checkboxValues.length]=$(this).val(); });varradioValue=$("input:radio[name=r]:checked").val();一般用val()获取如果没有值，将空值赋给变量以URL字符串形式发送数据给服务器$.get方法也可以使用传统的url字符串方式发送数据给服务器。$.get("/users/get?user="+$('#user').val()+

"&comment="+$('#comment').val(),

function(data){…});服务器端程序可以用req对象获取数据

router.get('/get',function(req,res,next){

var

user=req.query.user;//获取URL变量

var

comment=ment;

res.send('<h3>评论人：'+user+'</h3><p>内容：'+comment+'</p>');});3.接收JSON格式的数据

res.send({user:user,comment:comment});接收发送来的数据users.jsfunctionAjax(){$.get("/users/json", {user:$("#user").val(),comment:$("#comment").val()}, function(data){

var

html="<h3>评论人："+data.user+"</h3><p>内容："+ment+"</p>"; $("#target").append(html); },"json"); }

}data是一个JSON对象发送超链接中的数据给服务器【例6-8】使用$.get()发送超链接中的内容。$(document).ready(function(){$('#newsa').click(function(){ //单击链接时

$.get("users/param",{'title':$(this).text()},function(data){

$("#target").append(data); });returnfalse; //使单击超链接不发生跳转

}); });</script><ulid="news"><li><ahref="users/param?id=1">让我们聆听船山先生的“梦”</a></li>……</ul><divid="target"></div>$.get()方法各个参数的功能示意图$.get("/users/",{key1:val1,key2:val2,…}, function(data){ $("#target").append(data); });请求文件的URL发送给服务器的数据服务器返回的数据对服务器返回数据进行处理的代码9.3.2使用$.post()方法执行POST请求$.post()方法的结构如下：

$.post(URL[,data][,callback][,type])$.post方法的参数、选项及使用方法与$.get方法完全相同，只是$.post方法在发送数据时是以POST方式发送的GETVS.POST①GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，用户看不到这种区别②GET方式对传输的数据有大小限制，通常不能超过2KB，而使用POST方式传递的数据量要比GET方式大得多，理论上没有限制。③GET方式请求的数据会被浏览器缓存起来，而POST方式请求的数据不会被浏览器缓存④通过GET方式和POST方式传递给服务器端的数据，服务器端需要采用不同的方式获取，$.post()方法示例$.post("/users/post", {user:$("#user").val(),comment:$("#comment").val()},

function(data){ $("#target").append(data); });服务器端程序可以用req.body对象获取数据router.post('/post',function(req,res){varuser=req.body.user;varcomment=ment;

res.send(`<h3>评论人：${user}</h3><p>内容：${comment}</p>`);});9.3.3使用$.ajax()方法设置Ajax的细节$.ajax()方法是jQuery中最底层的Ajax实现，load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构造的，它的语法为：$.ajax(options)示例：$.ajax({

type:“GET”, //设置请求方式

url:“9-8.js”, //设置请求的URL

dataType:“script” //设置返回数据的类型

})$.ajax()方法用法举例functionAjax(){ $.ajax({ type:"GET", url:"/users/get2", data:"user="+escape($("#user").val())+

"&comment="+escape($("#comment").val()),beforeSend:function(){ $("#target").html("<imgsrc='loading.gif'/><br>正在载入…");},error:function(){$("#target").html("<p>载入失败</p>");},success:function(data){ //请求成功时

$("#target").html(data); } }); }$.ajax()方法中可以用到的回调函数beforeSend：发送请求之前调用的回调函数，该函数接受一个惟一的参数，即XMLHttpRequest对象作为参数。success：在请求成功时调用的回调函数，该函数接受两个参数，第一个参数为服务器返回的数据data，第2个参数为服务器的状态textStatus。error请求失败时调用的回调函数。complete请求完成时调用的回调函数（无论请求是成功还是失败），如果同时设置了success或error，则在它们执行完之后才执行complete中的回调函数。6.3.4全局设定Ajax当一个页面中有多个地方都需要利用Ajax方法进行异步通信时，可以利用$.ajaxSetup(options)方法统一设定所有Ajax方法中的参数

$.ajaxSetup({

type:"GET",

url:"/users/get2“

});说明①$.ajax()方法中的data数据一般不能用$.ajaxSetup(options)方法统一设定，因为传送给服务器的数据是用户在表单中输入的，每次都不同，而$.ajaxSetup(options)方法只会在页面初始化时运行一次，此时用户还没有输入数据，因此会获取不到。②$.ajaxSetup(options)方法不能设置load()方法的相关操作，如果设置请求类型type为"GET"，也不会改变$.post()方法采用POST方式。6.4表单的序列化方法在表单中输入框较少的情况下，可以通过

“键:值”对参数向服务器端发送数据functionAjax(){

$.get("/users/get2", {user:$("#user").val(),comment:$("#comment").val()},

function(data){ $("#target").append(data); }); }在输入框很多的情况下$("#form1").serialize(),

说明①serialize()方法通常用来获取某个form元素内所有表单元素的name/value属性值，因此必须添加一对<form>标记将需要序序列化的表单元素包含起来。并且该元素必须是<form>，如果将上述代码中的<form>改成<div>等其他元素就不行了。②serialize()方法必须通过元素的name属性才能获取到元素的value值，因此应设置表单中每个表单元素的name属性。总结：传统Web编程与Ajax编程区别客户端发送请求的方式不同服务器生成的响应不同客户端加载响应的方式不同6.4Node.js异步编程什么是异步编程异步编程是一种让程序能够在等待某些操作完成的同时继续执行其他任务的技术，打破了传统编程中顺序执行代码的束缚。异步编程的用途之一就是用fetch函数异步请求远程URL，这是Ajax技术的替代解决方案6.4.1Promise语法JavaScript中常见的异步函数有setTimeout、fetch、XMLHttpRequest等，它们需要通过回调函数返回值，异步API存在回调函数嵌套层次太多的问题，这被称为回调地狱。Promise是一种用于处理异步操作的对象，它代表一个可能还没有完成但将来会完成的操作。Promise有三种状态：Pending（待定）、Fulfilled（已完成）、Rejected（被拒绝）。Promise语法举例【例6-13】用Promise语法重写例6-12functionwait(seconds){returnnewPromise((resolve)=>{ //当成功完成时

setTimeout(()=>{resolve(); //成功完成的结果},seconds*1000);});}wait(1) //等一秒钟再执行then中的代码.then(()=>{console.log('等一秒钟');returnwait(1);}).then(()=>{console.log('等二秒钟');returnwait(1);}).then(()=>{console.log('等三秒钟');});6.4.2async和await关键字【例6-14】用async函数和await关键字重写例6-13functionwait(seconds){returnnewPromise((resolve)=>{

setTimeout(()=>{resolve();},seconds*1000);});}asyncfunctionrunSequence(){awaitwait(1);console.log('等一秒钟');awaitwait(1);console.log('等二秒钟');awaitwait(1);console.log('等三秒钟');}runSequence();说明·async声明的异步函数体内可以有return语句，但其return语句只能返回一个Promise对象，如果其返回值是其他数据类型，也会被自动包装成Promise对象。·Promise对象有一个构造函数，接收两个参数resolve和reject。如果异步操作成功，就会调用resovle函数，将异步操作的结果作为函数参数传入。如果失败则调用reject函数。·使用async函数时，由于Promise运行结果可能是rejected，所以可以把await语句放在try…catch…代码块中。await只会暂停当前异步函数的执行，并不会阻塞整个线程。await右侧的表达式一般为Promise对象。6.4.3用fetch函数执行HTTP请求fetch函数是一个执行HTTP请求的全局函数，它提供了一种更简洁、强大的方式来处理网络请求。无论HTTP请求成功与否，fetch函数都会返回一个Promise对象。fetch(url[,options])其中，options是一个对象，用于配置请求的细节，例如请求方法、头信息、请求体等。参数如下：method：请求方法（如GET、POST、PUT、DELETE）；headers：请求头，一个对象或Headers实例；body：请求体，用于POST或PUT请求，可以是FormData、URLSearchParams、Blob、BufferSource或字符串；mode：请求模式，