从服务端获取数据的几种方式:xml、fetch、axios、ajax、jsonp
原始模型
最初加载页面的方式——你为网站发送一个请求到服务器, 只要没有出错你将会获取资源并显示网页到你的电脑上。但问题是每次请求都要加载整个页面
AJAX模型
Ajax的全称是Asynchronous JavaScript And XML,即异步JavaScript和XML
通过使用诸如 XMLHttpRequest
、 Fetch API 等来实现,这些技术允许网页直接处理对服务器上可用的特定资源的 HTTP 请求,并在显示之前根据需要对结果数据进行格式化。简而言之,Ajax模型能使用Web API作为代理来更智能地请求数据,而不仅仅是让浏览器重新加载整个页面。
为了进一步提高速度,可以在首次请求时将资源存储在用户的计算机上,这意味着在后续访问中,他们将使用本地版本,而不是在首次加载页面时下载新副本。 内容仅在更新后从服务器重新加载。
XMLHttpRequest
XMLHttpRequest
(XHR)现在是一个相当古老的技术 - 它是在20世纪90年代后期由微软发明的,并且已经在相当长的时间内跨浏览器进行了标准化。不能跨域
let xhr = new XMLHttpRequest(); //1. 创建xml对象
xhr.open('GET', 'https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum');//2. 初始化请求
xhr.send();//3. 发送请求
xhr.onload = function() {//4. onload表示当请求正确并成功返回数据时调用
console.log(JSON.parse(this.response))
let num=JSON.parse(this.response).data.number
document.body.innerHTML=num
};
Fetch
Fetch API基本上是XHR的一个现代替代品——它是最近在浏览器中引入的,它使异步HTTP请求在JavaScript中更容易实现,对于开发人员和在Fetch之上构建的其他API来说都是如此。
fetch('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum')
.then(response => response.json())
.then(data => {
let num=data.data.number
document.body.innerHTML=num
});
Axios
Axios 是一个基于 HTTP 库的promise对象,可以用在浏览器和 node.js 中
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum')
.then(function (response) {
let num=response.data.data.number
document.body.innerHTML=num
})
</script>
可以跳转至axios中文文档| axios介绍及应用了解更多
Jq中的ajax
可以引入jquery,使用其为我们封装好的xml,可以跨域
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$.ajax('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum',{
type:"GET",
success:function(res){
let num=res.data.number
document.body.innerHTML=num
}
})
</script>
Jsonp
JSON with Padding,是一种借助于script 标签发送跨域请求的技巧。它本质上不是一个请求,而是通过script标签请求一个服务端的PHP文件,这个文件返回的结果是一段Js,作用是调用我们事先定义好的一个函数,从而将服务端想要给客户端发过去的数据发送给客户端。
你可以自己封装:
function jsonp(url,params,callback){
var funcName="jsonp_"+Date.now()+Math.random().toString().substr(2)
if(typeOf params==="object"){
var tempArr=[]
for(var key in params){
var value=params[key]
tempArr.push(key+"="+value)
params.tempArr.join("&")
}
}
var script=document.createElement("script")
script.src=url+"?"+params+"&callback"+funcName
document.body.appendChild(script)
window[funcName]=function(data){
callback(data)
//调用完就删掉
delete window[funcName]
document.body.removeChild(script)
}
}
jsonp('url',{id:12},function(res){})//只能是get请求
也可以通过安装一个npm包使用:
$ npm install jsonp