伪ajax教程

​ 能大致学会ajax是什么,怎么用,项目中常用ajax插件以及如何mock数据等技巧.这里只讲前端

ajax是什么?

​ 传统的网页就好像两个人在填一张表(网页),服务器端提供了一个空白的表格给客户端,客户端看见之后在上面填写内容,并将整张表发回服务器,服务器查看之后没有问题,再将整张表格返回给客户端.

​ 有了ajax就不一样了,用户可以在填写表格时选择发送或接受哪些数据.因为ajax可以让网页的局部数据更新,例在百度搜索时弹出的搜索建议列表就是ajax加载出来的.

​ 最新的一些前端框架vue等,能做到前后端分离也是基于ajax,

怎么用?

前置知识:

• 什么是数据接口?

  我们管有一堆数据的链接地址叫接口

  e.g. https://www.easy-mock.com/mock/5b319ab2a776703db5dff938/test/home

• 常见名词request和response

  request是请求(客户端发给服务器的)

  response是回答(服务器返回给客户端的)

  中间省略HTTP请求细节(自行百度)

• 请求接口的类型

  大致分为POST和GET两种类型的接口

• 请求接口方式

  传参请求和不传参请求

  get和post在请求时有区别,get会把参数放在url里post不会

  e.g.登录过程就是传参请求,将用户名和密码发给后台

• 查看接口请求技巧,浏览器f12开控制台有个network,name里是请求,可以点开看response就是这个接口返回给我们的内容

主题

​ 原生的js提供了XMLHttpRequest这个对象,对象的方法都在这个链接里面.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

​ 工作的时候基本很少用到原生的方法,一般都是使用第三方的轮子,常用的ajax轮子有 jq的ajax方法,axios,具体怎么用都在他们相应的官方文档里了.

重点!!

模拟数据

这个网站

https://www.easy-mock.com/ 注册登录

https://www.easy-mock.com/docs 教程

跟着教程做就有自己的数据接口了,就可以测试用了