Ajax的基础概念（第三天）

最新推荐文章于 2022-07-23 19:06:33 发布

孙大大啊

最新推荐文章于 2022-07-23 19:06:33 发布

阅读量361

点赞数 2

分类专栏：学习（Ajax）文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/szw2377132528/article/details/122545757

版权

学习（Ajax）专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1. axios

1.1 什么是axios

axios是一个专注于网络数据请求的库

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

1.2 如何用axios发起get请求

使用axios发起get请求的语法：

axios.get('url', { params: { /*参数*/ } }).then(callback)

用法：

// 请求的 URL 地址
var url = 'http://www.baidu.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

1.3 如何用axios发起post请求

使用axios发起get请求的语法：

axios.post('url', { /*参数*/ }).then(callback)

用法：

// 请求的 URL 地址
var url = 'http://www.baidu.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
})

2. 直接使用axios发起请求

2.1 其实跟我们之前学的jq中的$.ajax的函数语法很像

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)

3. 同源策略

3.1 什么是同源

就是如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。

具体比较请见下表：

3.2 什么是同源策略

简单来说就是浏览器提供的一个安全功能

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

② 无法接触非同源网页的 DOM

③ 无法向非同源地址发送 Ajax 请求

4. 跨域

4.1 什么是跨域

一句话概括，不是同源就是跨域

5. 跨域怎么实现数据请求

目前我只学了JSONP

那么什么是JSONP？

答：由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。

因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

5.1 自己实现一个简单的JSONP

首先我们要定义一个success回调函数

 <script>
     function success(data) {
     console.log('获取到了data数据：')
     console.log(data)
     }
 </script>

然后我们再通过 <script> 标签，请求接口数据：

<script src="http://ajax.frontend.baidu.net:3006/api/jsonp?callback=success&name=zs&a
ge=20"></script>

5.2 JSONP的缺点

JSONP有一个缺点那就是只能发送GET请求，不支持POST请求

5.3 使用JQ中的JOSNP

利用jq中的ajax发起JSONP请求

$.ajax({
     url: 'http://ajax.frontend.baidu.net:3006/api/jsonp?name=zs&age=20',
     // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
     dataType: 'jsonp',
     success: function(res) {
     console.log(res)
     }
})

同时我们还能指定自定义参数和回调函数名称

$.ajax({
     url: 'http://ajax.frontend.baidu.net:3006/api/jsonp?name=zs&age=20',
     dataType: 'jsonp',
     // 发送到服务端的参数名称，默认值为 callback
     jsonp: 'callback',
     // 自定义的回调函数名称，默认值为 jQueryxxx 格式
     jsonpCallback: 'abc',
     success: function(res) {
     console.log(res)
     }
})

5.4 在JQ中JSONP的实现过程

jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除标签的方式，来发起 JSONP 数据请求。