axios、跨域与JSONP、防抖和节流

文章目录

  • 一、axios
    • 1、什么是axios
    • 2、axios发起GET请求
    • 3、axios发起POST请求
    • 4、直接使用axios发起请求
  • 二、跨域与JSONP
    • 1、了解同源策略和跨域
    • 2、JSONP
      • (1)实现一个简单的JSONP
      • (2)JSONP的缺点
      • (3)jQuery中的JSONP
      • (4)自定义参数及回调函数名称
      • (5)jQuery中JSONP的实现过程
  • 三、案例:淘宝搜索
    • 1、UI效果
    • 2、获取用户输入的搜索关键词
    • 3、封装getSuggestList函数
    • 4、渲染建议列表的UI结构
    • (1)定义搜索建议列表
    • (2)定义模板结构
    • (3) 定义渲染模板结构的函数
    • (4)搜索关键词为空时隐藏搜索建议列表
    • 5、输入框防抖
    • 6、缓存搜索的建议列表
  • 四、防抖和节流
    • 1、防抖
    • 2、节流
      • (1)概念
      • (2)**节流案例 – 鼠标跟随效果**
    • 3、防抖和节流的区别


一、axios

1、什么是axios

  • Axios 是专注于网络数据请求的库。
  • 相比于原生的 XMLHttpRequest 对象,axios 简单易用
  • 相比于 jQuery,axios 更加轻量化,只专注于网络数据请求。

2、axios发起GET请求

  • axios.get('url', { params: { /*参数*/ } }).then(callback)
  • 例如:
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
	console.log(res.data)
})

3、axios发起POST请求

  • axios.post('url', { /*参数*/ }).then(callback)
  • 例如:
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
   console.log(res.data)
})

4、直接使用axios发起请求

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

例如:

var paramsData = { name: '钢铁侠', age: 35 }
axios({
  method: 'GET',
  url: url,
  params: paramsData
}).then(function (res) {
  console.log(res.data)
})
axios({
   method: 'POST',
   url: 'http://www.liulongbin.top:3006/api/post',
   data: {
     name: '娃哈哈',
     age: 18,
     gender: '女'
   }
}).then(function (res) {
   console.log(res.data)
 })

二、跨域与JSONP

1、了解同源策略和跨域

  • 如果两个页面的协议域名端口都相同,则两个页面具有相同的源
  • 例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测:

axios、跨域与JSONP、防抖和节流_第1张图片

  • 同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
  • MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
  • 通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

  • 同源指的是两个 URL 的协议域名端口一致,反之,则是跨域
  • 出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
  • 浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
  • 现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONPCORS
  • JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。
  • CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2、JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题

由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是

你可能感兴趣的:(Ajax,javascript,前端)