html5,flash设计开发|交互设计|网站建设 青岛,网站域名推广,北京公司注册最新政策,计算机前端开发工资多少四种常见的异步请求方式
一、xhr异步老祖
XMLHttpRequest#xff08;简称XHR#xff09;是一种在JavaScript中创建异步请求的技术。XHR对象可以向服务器发送请求#xff0c;并获取服务器返回的数据#xff0c;而不会使页面刷新。
XHR对象的创建方式通常是通过构造…四种常见的异步请求方式
一、xhr异步老祖
XMLHttpRequest简称XHR是一种在JavaScript中创建异步请求的技术。XHR对象可以向服务器发送请求并获取服务器返回的数据而不会使页面刷新。
XHR对象的创建方式通常是通过构造函数例如
const xhr new XMLHttpRequest();
XHR对象提供了几个属性和方法来帮助我们处理异步请求
xhr.open()用于指定请求的方法、URL和是否异步的布尔值。xhr.setRequestHeader()用于设置HTTP请求头。xhr.send()用于向服务器发送请求。xhr.abort()用于在请求发送过程中中止请求。xhr.onreadystatechange()用于指定当readyState属性发生变化时调用的函数。
请求的结果可以在xhr.responseText中获取到如果想在页面的某处展示这个结果可以将其设置到HTML元素的innerText或innerHTML属性中。请注意由于XHR对象已被废弃如果可能的话请尝试使用fetch、axios或jQuery等现代方法来处理异步请求。
二、jquery
jQuery是一种基于JavaScript的快速、小巧、功能丰富的JavaScript库。它使得JavaScript编程变得更加简单并且可以跨浏览器工作。
jQuery提供了各种实用的DOM操作方法和事件处理函数使得在网页上实现各种交互效果变得轻而易举。例如可以很方便地选择元素、修改元素样式、处理表单和处理Ajax异步请求等。 jQuery使用源语言的创新NoConflict方式解决了多库共存的问题。
以下是一些常用的jQuery方法
$(selector).hide()隐藏匹配的元素。$(selector).show()显示匹配的元素。$(selector).addClass(className)向匹配的元素添加类。$(selector).removeClass(className)从匹配的元素中删除类。$(selector).toggle()交替地显示和隐藏匹配的元素。$(selector).click(function)为匹配的元素绑定click事件。
通过使用这些方法可以在与原生JavaScript相比更简洁而且易于理解。请注意目前有许多现代的JavaScript库和框架可以替代jQuery但是如果您已经习惯了使用jQuery它仍然是一种非常强大和实用的JavaScript库。
jquery的cdn库
script srchttps://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js/script4三、fetch
fetch是一种基于Promise的API用于发送和接收HTTP请求。它可以用于获取数据、提交数据等并支持Blob、JSON等数据类型。fetch方法被广泛运用于Web前端开发特别是在React、Vue等现代JavaScript框架中。请注意fetch在处理跨域请求时有一些限制需要在服务器端或通过CORS等方式进行支持。如果在老旧的浏览器上运行fetch时可能需要使用像unfetch这样的polyfill库。
四、axios
axios是一种基于Promise的HTTP库用于浏览器和Node.js中发送HTTP请求。它可以同时处理浏览器中的XHR请求和Node.js中的http请求并且具有很好的API设计。
axios支持各种请求类型如GET、POST、PUT等并支持并发请求、请求取消、请求拦截、响应拦截、错误处理等功能。axios也提供了丰富的配置选项例如请求超时时间、请求头、响应类型等。
React、Vue等现代JavaScript框架中也经常使用axios来进行HTTP请求如果您使用这些框架建议使用npm安装axios并通过模块化方式引入。
axios的cdn
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodydivbutton onclicktestXhr()testXhr/buttonbrbutton onclicktestFetch()testFetch/buttonbrbutton onclicktestJquery()testJquery/buttonbrbutton onclicktestAxios()testAxios/buttonbr/divscript srchttps://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptfunction testXhr() {// 创建一个XHR对象var xhr new XMLHttpRequest();// 设置请求方式和请求地址xhr.open(GET, https://jsonplaceholder.typicode.com/posts/1);// 设置回调函数处理异步响应xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {console.log(xhr.responseText);}};// 发送异步请求xhr.send();}function testFetch() {fetch(https://jsonplaceholder.typicode.com/posts/1).then(response response.json()).then(data console.log(data)).catch(error console.error(error));}function testJquery() {$.ajax({url: https://jsonplaceholder.typicode.com/posts/1,method: GET,dataType: json,success: function (data) {console.log(data);},error: function (error) {console.error(error);}});}function testAxios() {axios.get(https://jsonplaceholder.typicode.com/posts/1).then(response console.log(response.data)).catch(error console.error(error));}/script/body/html
