Ajax 知识总结【ajax】

刀刀小站
100 阅读5分钟

Ajax

服务器与客户端

服务器

  1. 本质：一台电脑

    上网看到的内容，在网络当中的一台电脑上，我们称这台电脑为 服务器

  2. 作用

    • 存储一个网站的文件
    • 提供网站的文件给用户

  3. 资源

    服务器上的网页、图片、音乐、视频等，即服务器存储的所有内容

客户端

  1. 概念

    开发中客户端特指“ Web 浏览器”

  2. 作用

    将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用

  3. URL

    表示服务器上每个资源的确切位置

  4. 通信方式

    通信.png

请求方式

注意：

这只是规范化语义化操作，后续需要哪种请求方式还要看接口文档给的信息。

请求方式含义
GET从服务器获取数据
POST从服务器新增数据
DELETE删除服务器上的数据
PUT更新服务器上的数据（侧重完整更新）
PATCH更新服务器上的数据（侧重部分更新）

Ajax 基本使用

  1. 引入 axios 库：www.axios-http.cn/

  2. 基本语法

axios({
    url: 'http://www.itcbc.com:3006/api/getbooks',  // url地址
    method: 'get',  // 请求方式
}).then((res) => {
    // 打印服务器传递回来的数据
    console.log(res)
})
  1. GET 请求、DELETE 请求
params: {
    bookname: '我的奋斗'
}

在 params 对象中指定查询参数即可，有多个参数用逗号隔开

  1. POST 请求、 PUT 请求、 PATCH 请求
data:{
	book:'',
	people:''
}

接口相关概念

接口概念

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）

接口文档概念

接口文档就是接口的使用说明书，它是我们调用接口的依据

接口文档格式

  1. 接口名称 接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口
  2. 接口 URL 客户端发起 Ajax 调用此接口时，请求的 URL 地址
  3. 请求方式 接口的请求方式，如：GET、POST、PUT、DELETE 等
  4. 请求参数 请求此接口时，需要发送到服务器的查询参数或请求体
  5. 返回示例 当接口请求成功后，服务器响应回来的数据的基本格式
  6. 返回参数说明 接口响应结果的详细描述

form 表单

采集数据

  1. 找到表单，注册submit事件
  2. 阻止默认行为，防止页面跳转
  3. 收集表单中的数据
    • $('form').serialize()
    • new FormData()

提交数据

以后收集数据的几种方式： 收集数据之后做为参数传递时的格式， key 的名称要参照后台接口。

  1. 自己获取元素，获取数据，生成对象或拼接为字符串 key=value&key=value
  2. 使用 jq.serialize()方法：获取指定表单中拥有 name 属性的表单元素的 value {key:value,,key:value}
  3. 获取文件上传 formdata new FormData()

文件上传

注意

后台并不会将所有业务的参数处理使得 formdata 的方式来进行，只有有文件数据的时候，才会处理 formdata 数据，意味着，之前所使用的普通接口不要传递 formdata 数据

语法格式

  1. 点击按钮全部上传

    axios.defaults.baseURL = 'http://www.itcbc.com:3006'
let form = document.querySelector('form')
let fd = new FormData(form)
axios.post('/api/formdata', fd).then((res) => {
      console.log(res);
})

  2. 选择图片立刻上传

    let myfile = iptFile.files[0]
let fd = new FormData()
fd.append('avatar', myfile)
axios.post('http://www.itcbc.com:3006/api/formdata', fd).then((res) => {
       console.log(res);
})

axios库的扩展

全局配置

  1. 定义

    在 url 地址中，协议://域名:端口 对应的部分叫做“请求根路径”。

  2. 好处

    提高项目的可维护性。全局配置根路径后，后续所有的请求都可以使用全局配置的根路径

  3. 语法格式

    axios.defaults.baseURL = '请求根路径'

拦截器

  1. 定义

    用来全局拦截 axios 的每一次请求与响应

  2. 好处

    可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性

  3. 语法格式

    // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

请求方法的别名

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

本地预览

let myfile = iptFile.files[0]
// 做本地预览
let myurl = URL.createObjectURL(myfile)
document.querySelector('img').src = myurl

XMLHttpRequest

  1. 含义

    是浏览器内置的一个构造函数

  2. 作用

    基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。

  3. 实现步骤

    • 创建 xhr 对象

      let xhr = new XMLHttpRequest()

    • 调用 xhr.open() 函数

      xhr.open(method, url)

    • 调用 xhr.send() 函数

      xhr.send(data)

    • 监听 load 事件

      xhr.addEventListener('load', function() {
 console.log(xhr.response)
})

      如果是post等提交请求体数据，需要设置请求头

      • 数据类型为字符串型 
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
      • 数据类型为对象 
        xhr.setRequestHeader('Content-type', 'application/json')

同源与跨域

同源

  1. 含义

    指的是两个 URL 地址具有相同的协议、主机名、端口号

  2. 同源策略

    浏览器提供的一个安全功能。

  3. 浏览器的同源策略规定

    不允许非同源的 URL 之间进行资源的交互。

跨域

  1. 含义

    同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。

  2. 出现跨域的根本原因

    浏览器的同源策略不允许非同源的 URL 之间进行资源的交互

  3. 突破浏览器跨域限制的两种方案

    • JSONP

      非官方、兼容性较好、仅支持GET请求

    • CORS

      官方标准；支持 GET、POST、PUT、DELETE、PATCH 等常见请求方式；不支持低版本浏览器

总结

Ajax.png

avatar
文章
阅读
粉丝