Ajax（前后端的qiaoliang）

Posted 2021-03-30 雪天前端

原生JS

原生JS中的ajax

Ajax 即 Asynchronous javascript and XML（异步的JavaScript 和 XML）

用来和后端数据交互的东西，他不是一个独立的语言，他是javscsript中的一个对象即xmlhttpRequest对象。（ 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表 ）

ajax的最后一个字母的意思是xml，什么是xml？

xml是一种数据格式，在json格式没出来之前一直在用xml格式传输数据。所以最后一个字母是数据类型的首字母，现在都是json格式了，所以，你也可以叫他 ajaj （json的首字母），哈哈，个人理解。

xml格式的数据：

（图片来源网络）

json格式的数据：

为什么要说数据格式？

因为我们用ajqx请求的回来的数据肯定有某种数据格式去展现，以前就是xml格式，现在基本都是json格式的数据。

我们需要操作请求回来的数据，所以必须清楚数据格式。

但是json格式的数据我们也是不能直接操作的，需要把json字符串转换为js对象，这个转化有个高大上的名字 ---- 反序列化 ，才能拿到需要的数据内容。如何转为js对象，后面有介绍。

为什么使用ajax

Ajax主要用来拿到后端接口的数据，我们写的页面都是写死的数据（如文字，图片等），而开发中，数据很重要（数据是网页的灵魂），客户消费的就是数据，而样式和效果只是视觉体验。

我们写好静态页面之后，需要拿到后端写好的包含着数据的接口，那怎么拿到接口数据呢,这时就需要ajax拿了。Ajax就是专门拿后端接口的数据的，拿到数据之后，我们再把数据显示在网页上。

前端与服务器交互的方式

前端和服务端交互一般有两种方式，获取数据或者提交数据。

获取数据一般都是GET请求方式（获取数据   如获取新闻数据）

提交数据一般都是POST请求方式（提交数据   如上传图片）

发起请求的方式有很多，下面主要说下原生js中通过 xmlhttpRequest对象 发起ajax请求， jQuery中的ajax 请求，和使用最多的 axios 请求，以及无法用ajax请求时（ 跨域 ）的解决方式 jsonp 请求。

原生js中通过xmlhttpRequest对象发起ajax请求

1. new出一个XMLhttpRequest构造函数的实例

 

带参数时：（获取参数所指定的数据  例如这里就是只获取id为1的name值为’西游记’的这一条数据）（get请求的参数直接在？后面用键值对的方式拼接即可，多个参数键值对之间用&符号隔开 参数名是根据接口规定来写的）

3. 使用send()方法发起请求（GET请求时，send（）没有参数）

4. 接收请求结果（固定写法 忘了网上搜索下）

实例对象.responseText----这个里面就是返回的数据了，把它打印出来

到此：数据已经能在控制台看到了

我们看到ajax请求到的数据都是以json字符串格式展示的，我们想要使用这些数据，因为是字符串就很难使用，例如我要取到id为1 的这数据的 西游记 这三个字，字符串怎么取？substr？还是….不现实，如果有几百条数据，就没法搞了。

所以我们需要把这样的json字符串转成对象不就好取了，对象直接就是一路点下去就能拿到了。

将对象转成json字符串的方法：JSON. Stringify ( 对象 ) 序列化

将json字符串转成对象的方法：  JSON. parse(字符串 )  反序列化

5. 我们把请求到的json字符串转成对象

6. 再取出西游记这三个字

因为res是一个对象，对象里面包着一个data的数组，data数组里面的第一个元素是一个对象，所以我们要取的是这个data数组第一个元素里面的bookname这个属性的值

7. 最后，把拿到的数据渲染到页面展示

所谓的渲染，就是把数据通过innerhtml或者其他方式显示在网页上，一般我们拿到的数据很多，所以需要遍历，而一般这些数据格式都是数组里面包着很多对象的形式，那么每个对象就是一个数组元素，所以我们可以先用forEach遍历这个数组，拿到数组的每一项元素（即每个对象），再通过取对象属性值的方法拿到每一个需要的值，最后通过innerHTML显示在页面上。

至此，我们就实现了后台接口的数据显示在页面上了，实现了前后端的交互。

     

JQuery

JQuery中的ajax

Jquery中的ajax请求：

$.ajax({

            type:请求方式,

            url: '请求地址',

            data: {

              参数

            },

            success: function(res) {

                console.log(res);

            }

        })

jQuery的ajax请求参数 都是写在data 对象里面的

Get请求：

Post请求：

Axios 

常用的请求库 axios

首先axios是一个专门做ajax请求的库，是库，那么我们就得先引入。

在线引入地址：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

注意他的请求结果是在 then这个回调函数中。

GET请求（注意参数是放在名为 params 的对象中）

POST请求（参数是放在名为 data 的对象中）

JSONP 

跨域请求

同源

同源就是协议域名端口号三个都相同   就是同源（地址一样）

同源策略

这是浏览器设置的规则，不是同源的页面之间不能相互通信

跨域 （地址不一样就是跨域）

如果不是同源的页面之间强行通信拿数据（例如使用ajax获取数据）就是跨域  跨域就会被同源策略拦截   拿不到数据的。

同源策略拦截的过程（是在返回给浏览器的时候被拦截了）

ajax请求跨域的时候，是可以发服务器也能接收到  返回回来 给ajax的时候被浏览器的同源策略拦截了 ajax就接收不到了所以请求失败

那前面请求的接口域名也不同，我们为什么能请求到呢？

那是因为跨域的问题一般后端都处理好了。

但有时候后端给你的接口就是没有处理跨域，那我们怎么拿到数据呢？

如何解决ajax请求跨域？  

1. JSONP

2. CORS（让后台开放接口）

3. 服务器代理（中间人效果）

JSONP （是另一种请求数据的东西 跨域请求）

目前已经学了两种请求，ajax 和 jsonp，他们的区别是，ajax不能跨域请求，jsonp可以实现跨域请求。 但 ajax 用的多，因为很少遇到跨域。

Jsonp实现的原理：

利用script标签的src属性不会被浏览器的同源策略所拦截的特点实现跨域请求的。（例如我们在线引入其他的库文件）

Jsonp的优点：实现了跨域请求

Jsonp的缺点：只能get获取数据，不能post请求

Jquery中的jsonp请求

jQuery的JSONP就是依靠script标签不会被同源策略拦截的特性来实现跨域请求的

写法开头就是ajax   但不是ajax请求  是JSONP请求

url请求地址和成功后的函数一样  但 请求类型不同  dataType ： 'jsonp'

 $.ajax({

 

        url: '请求地址',

 

        dataType: 'jsonp',

 

        success: function(res) {

            console.log(res);

        }

    })

扫码二维码

获取更多精彩

雪天前端