Worker及XMLHttpRequest简单使用说明

爬到树上看月亮

于 2023-05-26 09:51:59 发布

阅读量956

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41702466/article/details/130872515

版权

文章介绍了Worker在Web应用中的作用，如创建多线程环境以提高性能和响应速度，以及其不能直接访问DOM的特点。同时，阐述了XMLHttpRequest用于异步数据交互，提高Web性能，并提供了简单的使用示例。

摘要由CSDN通过智能技术生成

Worker

一、作用及使用场景

在Web应用程序中创建多线程环境，可以运行独立于主线程的脚本，从而提高Web应用的性能和响应速度。

Worker.js主要应用场景包括：

数据处理：在数据量较大的情况下，使用Worker可以将数据分成多个线程处理，以提高数据处理效率。
长时间运行任务：例如对大量的图像或视频进行处理，使用Worker可以将这些处理过程放在后台线程中运行，保持主线程的响应性。
提高Web应用程序的性能：使用Worker可以将一些计算密集型操作转移到后台线程中，从而释放主线程资源，提高Web应用程序的响应速度。

需要注意的是，Worker运行在与主线程相对独立的线程中，无法直接访问主线程中的DOM元素，需要通过与主线程进行通信来获取数据或操作DOM元素。

二、使用

//worker.js

self.onmessage=(event)=>{//通过postmessage传递信息
    console.log(event.data)//event.data是传递的信息

    postMessage(event.data)//再将信息传递回去，主线程的onmessage会监听
}

//主线程

//worker内部发送请求获取worker.js，所以无法加载本地js，另外网络资源需要同源

let worker = new Worker('/worker.js')

//传递信息到worker.js,  worker.js的onmessage会监听到

worker.postMessage([data1,data2])；

//监听worker.js传过来的信息
worker.onmessage=(event)=>{
    //收到worker.js传递过来的信息
    console.log(event.data)
    //......do something

    //结束worker
    worker.terminate();
}

XMLHttpRequest

一、作用及使用场景

XMLHttpRequest（XHR）是一个内置于浏览器的API，它可以在不刷新页面的情况下向服务器发送HTTP请求，并接收来自服务器的响应数据，通常用于实现AJAX（Asynchronous JavaScript and XML）。

XHR可以通过异步方式获取数据，避免了页面刷新，从而提高了Web应用程序的性能和交互性。XHR可以向服务器发送各种类型的请求，如GET、POST、PUT、DELETE等，并可以发送和接收各种数据格式，如JSON、XML、HTML、文本等。

XHR主要用于解决前端与后端数据交互的问题。通过使用XHR，前端可以向后端发送请求，获取后端返回的数据，并将其动态更新到页面上。这使得前端与后端的交互变得更加方便和高效。

要使用XHR，需要创建一个XMLHttpRequest对象，然后设置请求的URL、请求的方法和请求的数据类型等，最后发送请求。一般来说，XHR的应用场景包括但不限于以下几个方面：

前后端数据交互：通过XHR，前端可以向后端发送请求，获取数据，并将其展示在页面上。
异步加载数据：XHR可以异步方式获取数据，避免了页面刷新造成的等待时间，通过这种方式提高了Web应用程序的性能和交互性。
文件上传和下载：XHR可以通过POST请求方式向后端上传文件，并可以通过GET请求方式从后端下载文件。
跨域请求数据：XHR可以通过跨域请求方式，获取其他域名下的数据，这在前端开发中也非常常见。

总之，XMLHttpRequest是一种非常强大的前端组件，可以帮助我们解决前端与后端数据交互的问题，提高Web应用程序的性能和交互性，并且有着广泛的应用场景。

二、简单应用

//创建请求
const xhr = new XMLHttpRequest();

let url='',method='GET',data={username:'',password:''}

xhr.open(url,method);

xhr.responseType='json'

xhr.setRequestHeader('Content-Type','application/json')

xhr.onload(()=>{
    //status判断请求状态    
    if(xhr.status>=200&&xhr.status<=300){
        //xhr.response响应结果
        console.log(xhr.response)
    }
})

xhr.onerror((e)=>{
    console.log(e)
})

xhr.send(JSON.stringify(data))