异步的相关知识

最新推荐文章于 2024-06-10 22:52:06 发布

weixin_45989924

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量307

点赞数

分类专栏： JavaScript 文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/weixin_45989924/article/details/122930309

版权

前言

我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。

这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。
在h5中js引入了web worker这个标准，允许js创建多个子线程，但是子线程完全受控于主线程。且这个标准无法操作DOM ,所以这个功能并没有实质性地解决，单线程这个问题。
js中的同步：多个任务在主线程上一个一个执行，前一个任务执行完毕，下一个任务继续执行
js中的异步：在主线程里面执行同步任务，发现有异步任务，就把任务丢到任务队列里面，等到队列任务执行完后，再通知主线程，此刻异步就结束了，结束的任务就会从队列里面消失。

步骤

1.所有的同步任务都会在主线程上面完成，会形成一个执行栈。
2.主线程外还有一个任务队列，异步任务就放在队列里面，异步有了结果就代表执行完毕，
3.一旦执行栈中的任务执行完毕，系统就会读取任务队列，看看还有哪些任务，
4.主线程不断重复第三步骤
只要是异步一定会涉及到：回调函数

Ajax用来处理异步

Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。
实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

1.创建XMLHttpRequest对象,即创建一个异步调用对象.
2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3.设置响应HTTP请求状态变化的函数.
4.发送HTTP请求.
5.获取异步调用返回的数据.
6.使用JavaScript和DOM实现局部刷新.

ajax的两种实现：原生js,jquery实现，还有一种mock版本的拦截ajax

完整的AJAX实例，原生js实现

<html>
<head>
<title>AJAX实例</title>
<script language="javascript" type="text/javascript">   
    function ajaxHttpRequestFunc(){
   
		let xmlHttpRequest;  // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量
		if(window.ActiveXObject){
    // IE浏览器的创建方式
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){
    // Netscape浏览器中的创建方式
            xmlHttpRequest = new XMLHttpRequest();
        }
		xmlHttpRequest.onreadystatechange=function(){
    // 设置响应http请求状态变化的事件
            console.log('请求过程', xmlHttpRequest.readyState);
			if(xmlHttpRequest.readyState == 4){
    // 判断异步调用是否成功,若成功开始局部更新数据
				console.log('状态码为', xmlHttpRequest.status);
				if(xmlHttpRequest.status == 200) {
   
					console.log('异步调用返回的数据为：', xmlHttpRequest .responseText);
					document.getElementById("myDiv").innerHTML = xmlHttpRequest .responseText;

最低0.47元/天解锁文章

weixin_45989924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步的相关知识

前言我们知道Javascript语言的执行环境是"单线程"。也就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。在h5中js引入了web worker这个标准，允许js创建多个子线程，但是子线程完全
复制链接

扫一扫