河南省建设厅官网查询,seo网站建站公司的主页,成都广告公司排行榜,百度广州分公司JavaScript请求数据有4种主流方式#xff0c;分别是Ajax、fetch、jQuery和axios。
一、Ajax、fetch、jQuery和axios的详细解释#xff1a;
1、 Ajax
Ajax#xff08;Asynchronous JavaScript and XML#xff09;是一种使用JavaScript在用户的浏览器上发送请求的技术分别是Ajax、fetch、jQuery和axios。
一、Ajax、fetch、jQuery和axios的详细解释
1、 Ajax
AjaxAsynchronous JavaScript and XML是一种使用JavaScript在用户的浏览器上发送请求的技术可以在不重新加载整个网页的情况下从服务器获取数据。它允许网页在后台与服务器进行少量数据交换从而实现网页的异步更新。这意味着可以在不干扰用户浏览体验的情况下从服务器获取数据并更新网页的部分内容。
2、fetch
fetch API是现代浏览器提供的一种用于发起网络请求的新方法。它返回一个Promise对象可以用来替代传统的XMLHttpRequest。fetch API提供了一个更现代、更强大的方式来处理网络请求并支持包括CORS在内的更多功能。
3、jQuery
jQuery是一种流行的JavaScript库旨在简化HTML文档遍历和操作、事件处理、动画和Ajax操作。它提供了一组简单易用的API使得JavaScript编程更为简单、快速和有趣。jQuery大大简化了跨浏览器的DOM操作、事件处理和动画效果同时它也提供了一些工具函数使得JavaScript编程更加高效。
4、axios
axios是一个基于Promise的HTTP客户端用于浏览器和node.js。它提供了一种简单且灵活的方式来进行HTTP请求包括XMLHttpRequests和HTTP请求。axios返回的是一个包含响应数据的Promise对象这使得异步处理更加简单和直观。axios还支持拦截请求和响应、转换请求和响应数据、取消请求等功能使得HTTP请求的管理更加方便。
二、Ajax、fetch、jQuery和axios的主要区别
1、Ajax 数据请求
原生js提供的(内置)核心使用XMLHttpRequest对象多个请求之间如果有先后关系的话就会出现回调地狱。
2、fetch 数据请求
原生js提供的(内置)和ajax同级使用promise形式关注分离思想但兼容性不太好所以用的不是很多。
3、jquery数据请求
第三方库提供的封装原生的ajax请求使用回调形式可能出现回调地狱。
4、axios数据请求
第三方库提供的封装原生的ajax请求使用promise的形式并且可以在请求和响应阶段进行拦截。
三、Ajax、fetch、jQuery和axios的代码详解
在测试Ajax、fetch、jQuery和axios的示例代码之前这里使用nodejs写一个简单的web服务器server.js做响应。
启动命令node server.jsajax的get请求示例http://127.0.0.1:8000/ajax_get.htmlajax的post请求示例http://127.0.0.1:8000/ajax_post.htmlfetch的get请求示例http://127.0.0.1:8000/fetch_get.htmlfetch的post请求示例http://127.0.0.1:8000/fetch_post.htmljQuery的get请求示例http://127.0.0.1:8000/jQuery_get.htmljQuery的post请求示例http://127.0.0.1:8000/jQuery_post.htmlaxios的get请求示例http://127.0.0.1:8000/axios_get.htmlaxios的post请求示例http://127.0.0.1:8000/axios_post.htmlaxios请求高级用法示例http://127.0.0.1:8000/axios_other.htmlaxios请求实例用法示例http://127.0.0.1:8000/axios_instance.html
代码如下
const http require(http);
const path require(path);
const url require(url)
const fs require(fs);const server http.createServer()
server.on(request,(req,res){const urlObj url.parse(req.url, true);if(urlObj.pathname /test){if(req.method GET){const str JSON.stringify(urlObj.query);res.end(str);}if(req.method POST){let params ;req.on(data, chunk{params chunk;});req.on(end, (){res.end(params);});}}else{fs.readFile(path.join(__dirname, urlObj.pathname), utf8, function(err, dataStr){if(err){return console.log(err.message)}res.setHeader(Content-type, text/html; charsetutf-8);res.end(dataStr);})}
})
server.listen(8000, (){console.log(server running at http://127.0.0.1:8000)
})1、Ajax请求
Ajax使用五个步骤
步骤1创建一个XMLHttpRequest对象
var xmlhttpnew XMLHttpRequest();
步骤2设置请求方式和请求地址使用open(method,url,async)方法
method请求方式get或者post。默认为get
url请求路径,文件在服务器上的位置
async是否为异步请求。默认为true异步请求
步骤3发送send() 请求
若为post方式时需要使用setRequestHeader()来添加http头
步骤4监听状态的变化
每当readyState状态改变时就会触发 onreadystatechange事件执行回调函数。readyState存有XMLHttpRequest的5种状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成且响应已就绪
步骤5处理返回的结果
根据请求服务器返回状态码(status)大于200小于300或等于304则表示请求成功, 否则服务器请求失败。获取服务器中响应使用XMLHttpRequest对象的responseText或responseXML属性。
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
ajax的get请求示例代码
buttonajax的get请求/button
script
const btn document.querySelector(button);
btn.onclick function () {var xmlhttp new XMLHttpRequest();xmlhttp.open(GET, http://127.0.0.1:8000/test?param1ajaxparam2getparam3公众号愤怒的it男, true);xmlhttp.send();xmlhttp.onreadystatechange function () {if (xmlhttp.readyState 4) {if (xmlhttp.status 200 xmlhttp.status 300 || xmlhttp.status 304) {console.log(JSON.parse(xmlhttp.responseText));} else {console.log(没有接收到服务器的数据);}}}
}
/script
ajax的post请求示例代码
buttonajax的post请求/button
script
const btn document.querySelector(button);
btn.onclick function () {var xmlhttpnew XMLHttpRequest();xmlhttp.open(POST,http://127.0.0.1:8000/test,true);xmlhttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xmlhttp.send(JSON.stringify({param1:ajax,param2:post,param3:公众号愤怒的it男}));xmlhttp.onreadystatechangefunction () {if (xmlhttp.readyState 4) {if (xmlhttp.status200 xmlhttp.status300 ||xmlhttp.status304 ){console.log(JSON.parse(xmlhttp.responseText));}else{console.log(没有接收到服务器的数据);}}}
}
/script
2、fetch请求
1POST请求的2种内容类型
//如果是application/x-www-form-urlencodedbody请求体内容为FormData对象
var formData new FormData()
formData.append(param1,fetch)
formData.append(param1,post)
formData.append(param1,公众号愤怒的it男)
//如果是application/jsonbody请求体内容为JSON字符串
JSON.stringify({param1:fetch,param2:post,param3:公众号愤怒的it男})
2response返回的3种数据格式
//如果是json格式
fetch(url [,options]).then(rsp {return rsp.json()}).then(data {console.log(data)})
//如果是文本格式
fetch(url [,options]).then(rsp {return rsp.text()}).then(data {console.log(data)})
//如果是二进制流
fetch(url [,options]).then(rsp {return rsp.blob()}).then(data {console.log(data)})
fetch的get请求示例代码
buttonfetch的get请求/button
scriptconst btn document.querySelector(button);btn.onclick function() {fetch(http://127.0.0.1:8000/test?param1fetchparam2getparam3公众号愤怒的it男, {method: GET,body: null,headers: {accept: */*,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: none,content-type: application/json, text/plain, */*}}).then(res {return res.json()}).then(data {console.log(data)});}
/scriptfetch的post请求示例代码
buttonfetch的post请求/button
scriptconst btn document.querySelector(button); btn.onclick function() {fetch(http://127.0.0.1:8000/test, {method: POST,body: JSON.stringify({param1:fetch,param2:post,param3:公众号愤怒的it男}),headers: {accept: */*,sec-fetch-dest: empty,sec-fetch-mode: cors,sec-fetch-site: none,content-type: application/json; charsetUTF-8}}).then(res {return res.json()}).then(data {console.log(data)});}
/script
3、jQuery请求
jQuery的get请求示例代码
script srchttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script
buttonjQuery的get请求/button
scriptconst btn document.querySelector(button);btn.onclick function() {$.get(http://127.0.0.1:8000/test?param1jQueryparam2getparam3公众号愤怒的it男,function(data,status){console.log(JSON.parse(data));});}
/script
jQuery的post请求示例代码
script srchttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script
buttonjQuery的post请求/button
scriptconst btn document.querySelector(button); btn.onclick function() {data JSON.stringify({param1:fetch,param2:post,param3:公众号愤怒的it男});$.post(http://127.0.0.1:8000/test, data, function(data,status){console.log(JSON.parse(data));});}
/script
$.get等价于jQuery.get$.post等价于jQuery.post。
4、axios请求
axios的get请求基础使用示例代码
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
buttonaxios的get请求/button
scriptconst btn document.querySelector(button);btn.onclick function() {axios.get(http://127.0.0.1:8000/test?param1axiosparam2getparam3公众号愤怒的it男).then(response {console.log(response.data)});}
/script
axios的post请求基础使用示例代码
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
buttonaxios的post请求/button
scriptconst btn document.querySelector(button); btn.onclick function() {data{param1:axios,param2:post,param3:公众号愤怒的it男}axios.post(http://127.0.0.1:8000/test,data).then(response {console.log(response.data)});}
/script
axios支持多请求并发可以添加全局或局部配置也可以添加请求拦截器和响应拦截器。拦截器会在发生响应请求之前和收到响应数据之后第一时间被调用其中请求拦截器是先发的请求先拦截而响应拦截器则是先发的请求后拦截。如下代码涉及axios的多个高级用法
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
buttonaxios请求高级用法/button
scriptconst btn document.querySelector(button);btn.onclick function() {// 全局配置baseURL和timeoutaxios.defaults.baseURL http://127.0.0.1:8000;axios.defaults.timeout 3000;// 添加请求拦截器axios.interceptors.request.use(config { console.log(config);return config;},err {console.log(err);})// 添加响应拦截器axios.interceptors.response.use(res{console.log(res);return res;},err{console.log(err);})// 多个请求并发axios.all([axios({method:get, // 请求方式不写则默认为get请求//单个axios配置baseURL和timeout//baseURL:http://127.0.0.1:8000,//timeout:3000,url:/test,params:{ // get请求中url后面的参数可以分开单独放在params中param1:axios1,param2:get,param3:公众号愤怒的it男}}),axios({method:post,//单个axios配置baseURL和timeout//baseURL:http://127.0.0.1:8000,//timeout:3000,url:/test,data:{param1:axios2,param2:post,param3:公众号愤怒的it男}}),]).then(response {console.log(response[0].data);console.log(response[1].data);});}
/script输出结果如下 有时候请求不想使用全局的配置或者拦截器则我们可以创建axios实例在该axios实例中配置或者添加拦截器则之后只在该实例内有效。具体示例代码如下
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
buttonaxios请求实例用法/button
scriptconst btn document.querySelector(button);btn.onclick function() {// 创建实例并为实例配置const instance axios.create({baseURL:http://127.0.0.1:8000,timeout:3000,});// 为实例添加请求拦截器instance.interceptors.request.use(config { console.log(config);return config;},err {console.log(err);});// 为实例添加响应拦截器instance.interceptors.response.use(res{console.log(res);return res;},err{console.log(err);});// 发起get请求instance({method:get,url:/test,params:{param1:axios1,param2:get,param3:公众号愤怒的it男}}).then(response {console.log(response.data);});// 发起post请求instance({method:post,url:/test,data:{param1:axios2,param2:post,param3:公众号愤怒的it男}}).then(response {console.log(response.data);});}
/script输出结果如下 更多爬虫知识以及实例源码可关注微信公众号【愤怒的it男】
