js下多个异步函数,怎么获取最终结果?

JavaScript012

js下多个异步函数,怎么获取最终结果?,第1张

异步处理不用阻塞来等待处理完成,而是允许后续操作,直至其程序将处理完成,并回调通知此函数

那么在js中有如下几种异步方式:

示例1

var async=function(callback){

//read data

setTimeout(function(){

callback('data')

},1000)//1秒后回调

}

//使用

async(function(data){

alert(data)

})

示例2

var async=function(callback){

var xhr=new XMLHttpRequest()

xhr.open('get','.',true)

xhr.onreadystatechange=function(){

callback(xhr.readyStatus)

}

xhr.send()

}

async(function(data){

alert(data)

})

示例3

var async=function(callback){

var img=new Image()

img.onload=img.onerror=function(){

callback(img)

}

img.src='x.jpg'

}

async(function(data){

alert(data)

})

通过js来获取后台数据的方法是采用ajax方式完成的。

1、定义页面click按钮,通过此按钮触发ajax异步取后台数据功能

<!DOCTYPE html>

<html>

<body>

<div id="demo">

<h2>Let AJAX change this text</h2>

<button type="button" onclick="loadDoc()">Change Content</button>

</div>

</body>

</html>

2、定义函数loadDoc来执行ajax与服务器交互的动作:

function loadDoc() {

//定意思XMLHttpRequest对象

var xhttp = new XMLHttpRequest()

//定义返回状态为成功时的返回结果显示

xhttp.onreadystatechange = function() {

//返回值状态为4或者响应码为200是成功

if (this.readyState == 4 &&this.status == 200) {

//给标签div赋值返回结果responseText

document.getElementById("demo").innerHTML = this.responseText

}

}

//开始执行后台取数据

xhttp.open("GET", "ajax_info.txt", true)

//开始发送请求

xhttp.send()

}