题记
javascript异步函数的用法
回调函数
普通回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<!--设置id-->
<p id="demo"></p>
<script>
function print() {
document.getElementById("demo").innerHTML="ngxe";
}
//3s后执行
setTimeout(print, 3000);
</script>
</body>
</html>匿名函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo"></p>
<script>
setTimeout(function () {
document.getElementById("demo").innerHTML="ngxe";
}, 3000);
</script>
</body>
</html>异步的体现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
document.getElementById("demo1").innerHTML="ngxe1!"; // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="ngxe2!"; // 主线程先执行
</script>
</body>
</html>异步AJAX
XMLHttpRequest对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<p><strong>以下内容是通过异步请求获取的：</strong></p>
<p id="demo"></p>
<script>
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//加载
xhr.onload = function () {
// 输出接收到的文字数据
document.getElementById("demo").innerHTML=xhr.responseText;
}
//报错
xhr.onerror = function () {
document.getElementById("demo").innerHTML="请求出错";
}
// 发送异步 GET 请求
//接受参数
xhr.open("GET", "https://v.api.aa1.cn/api/yiyan/index.php", true);
//发送请求
xhr.send();
</script>
</body>
</html>
jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<!--导入jQuery库-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("https://v.api.aa1.cn/api/yiyan/index.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>后记
觉得有用可以点赞或收藏！