Worker及XMLHttpRequest简单使用说明

Worker

一、作用及使用场景 

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

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

1. 数据处理：在数据量较大的情况下，使用Worker可以将数据分成多个线程处理，以提高数据处理效率。

2. 长时间运行任务：例如对大量的图像或视频进行处理，使用Worker可以将这些处理过程放在后台线程中运行，保持主线程的响应性。

3. 提高Web应用程序的性能：使用Worker可以将一些计算密集型操作转移到后台线程中，从而释放主线程资源，提高Web应用程序的响应速度。

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

二、使用

//worker.jsself.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//结束workerworker.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的应用场景包括但不限于以下几个方面：

1. 前后端数据交互：通过XHR，前端可以向后端发送请求，获取数据，并将其展示在页面上。

2. 异步加载数据：XHR可以异步方式获取数据，避免了页面刷新造成的等待时间，通过这种方式提高了Web应用程序的性能和交互性。

3. 文件上传和下载：XHR可以通过POST请求方式向后端上传文件，并可以通过GET请求方式从后端下载文件。

4. 跨域请求数据：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))