Ajax和Axios详解
1.Ajax
Asynchronous JavaScript And XML (异步JS和XML)
一种用于创建交互式,快速动态网页应用的网页开发技术。无需加载整个网页的情况下,能够更新部分网页的技术。
优势:
1.通过异步请求,优化用户体验、
2.优化浏览器和服务器之间的数据传输,减少宽带占用(只用局部网页的数据,减少数据量传输)
3.Ajax在浏览器端运行,减少了服务器部分工作,减轻大量用户下的服务器负载
2.Axios
可以看作是Ajax的加强版
实现代码实例
<script>
//1.引入axios
import Axios from 'axios'
export defalt{
methods:{
test(){
const url="http://www.baidu.com/"
Axios.get(url).then(respose=>{
if(response.data){
.....
}
}).catch(err=>{
//请求失败处理
})
}
}
}
</script>
3.区别
axios和ajax都是用来发起异步请求的前端技术,不过它们有以下几点区别:
1.使用方式:ajax是原生的XMLHttpRequest对象实现的,需要手动构造请求、处理回调、处理错误等,而axios是基于Promise实现的,使用起来更加简单方便。
2.语法简洁性:相对于ajax,使用axios时的语法更加简洁、易读,可以大幅减少代码量和提高开发效率。
3.功能丰富性:axios支持Promise方式调用、请求取消、拦截器、错误处理等,功能更加强大。
4.跨域处理:相对于ajax,axios对于跨域问题的解决方法更加完备和灵活。
总的来说,axios相较于ajax更加强大、易用、易读,是当今前端开发中最流行的异步请求库之一。
4.跨域处理
跨域问题通常是指在浏览器中,当通过 AJAX、WebSocket 或者其它方式发起跨域请求时,会存在一些限制,导致请求失败或者请求的数据无法被获取。这些限制是由浏览器的同源策略(Same-Origin Policy)引起的。
同源策略是一种安全机制,它规定了浏览器只能让页面请求同源(协议、域名、端口都相同)的资源,而跨域请求则需要通过特殊的处理方式来实现。
常见的跨域解决方案包括:
1. JSONP:利用script标签的src属性不受同源策略限制的特点,动态创建script标签实现跨域请求。
2. CORS:通过在服务器端设置 Access-Control-Allow-* 头部信息来允许其它域的请求访问资源。
3. 代理服务器:在客户端和服务端之间再添加一个代理服务器,让代理服务器来处理跨域请求。
4.1JSONP
JSONP(JSON with Padding)是一种利用 script 标签的 src 属性不受同源策略限制的特性来实现跨域请求的技术。JSONP 的原理是通过动态创建 script 标签,使得客户端能够请求到服务端的 JSONP 数据,从而实现跨域请求。
举个例子,假设我们需要在网页中通过跨域请求获取百度搜索接口的数据。在服务端,我们可以设置后端接口返回一个 JSONP 格式的数据,例如:
callback({ result: '百度搜索接口返回的数据' })
客户端可以通过动态创建 script 标签的方式来请求该接口,例如:
function handleJsonpData(data) {
console.log(data.result);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/api/search?callback=handleJsonpData';
document.body.appendChild(script);
当客户端发送请求时,服务端会返回一个类似下面的响应内容:
handleJsonpData({ result: '百度搜索接口返回的数据' })
客户端会执行 handleJsonpData 函数,并把服务端返回的数据传递给它,这样我们就可以在客户端中使用百度搜索的数据了。
需要注意的是,JSONP 存在缺陷,容易受到 XSS 攻击,在使用时需要谨慎。
4.2CORS
CORS是Cross-Origin Resource Sharing的缩写,中文翻译为“跨域资源共享”。它是一种在现代浏览器中使用的跨域解决方案,通过在服务器端设置一些特殊的 HTTP 头部信息,让客户端的跨域请求得到服务器的允许,从而实现跨域资源访问。与 JSONP 相比,CORS 更加灵活,也更加安全,因为它不需要使用特殊的回调函数和动态创建
具体解析:
CORS头部通过设置 Access-Control-Allow-* 开头的 HTTP 头部信息来允许跨域请求。下面是一些常见的 CORS 头部格式的例子:
- 允许所有域名的跨域请求:
Access-Control-Allow-Origin: * - 允许某个具体域名的跨域请求:
Access-Control-Allow-Origin: http://example.com - 支持的请求头:
Access-Control-Allow-Headers: X-Requested-With, Content-Type - 支持的请求方法:
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS - 允许跨域请求带上身份凭证(Cookies、Authorization 等):
Access-Control-Allow-Credentials: true
需要注意的是,不管是在服务端设置 CORS 头部,还是在客户端发起跨域请求,都需要仔细的考虑安全问题,避免信息泄露、攻击等问题。
4.3接口代理(代理服务器)
在 vue 项目中创建一个 vue.config.js,导入一个 devserve,并配置里面的选项即可。