Ajax和Axios详解

原创已于 2023-05-30 18:54:54 修改 · 681 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

于 2023-05-30 18:50:57 首次发布

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 头部，还是在客户端发起跨域请求，都需要仔细的考虑安全问题，避免信息泄露、攻击等问题。