重新梳理ajax知识之ajax知识汇总

一.ajax基础知识

1.1 客户端与服务器

1.2 URL地址完整写法

http://www.xxx.com:80/yyy/zzz.html

 协议:http  https
 主机名: www.xxx.com
 端口: 默认80
 路径名: yyy/zzz.html

1.3. http协议常见的请求方式

get: 获取 post: 提交 delete:删除 put: 完整更新 patch: 部分更新

二. axios库的介绍(重点)

axios的用法: *
axios({
    method:请求方式
    url:请求地址
​
    params: get请求传参
    data: post请求传参 
}).then(function({data:res}){
    log(res)  //res才是服务器返回的数据
})
​
result是被axios套了一层壳:服务器返回的真实数据在result.data成员上

三. http协议的请求报文与响应报文

请求报文: 请求行 请求头 空白行 请求体 响应报文: 响应行 响应头 空白行 响应体

响应行的状态码: 
  2xx:成功
  3xx:重定向
  4xx:客户端发生错误
  5xx:服务器发生错误

四. 接口与接口文档

接口: 函数 与 请求地址URL postman软件测试接口是否可用

五. 表单

表单的组成部分: 表单域(form), 文本域(input,selected,textarea) 提交按钮(button) 表单的常见的属性: action提交地址 method提交方式 enctype(post方式提交数据的类型) enctype: application/x-www-form-urlencoded (name=jack&age=18) multipart/form-data 用来实现文件上传

表单提交数据的缺点: 收集数据但是提交数据后会发生页面的跳转
​
表单结合ajax提交数据: 1.表单收集数据  (e.preventDefault())   2.ajax提交数据

六. axios提交数据的其它方法

get,delete 参数是追加到url地址后 post,put参数是放在请求体中的

    1.get请求及传参
    axios.get(地址,[{params:值}]).then(function(){})
​
    2.post请求及传参
    axios.post(地址,[值]).then(function(){})
​
    3.delete请求及传参
    axios.delete(地址,[{params:值}]).then(function(){})
​
    4.put请求及传参
    axios.put(地址,[值]).then(function(){})
​
----------------------------------------------
​
​

axios设置请求的根路径: * (重点)

axios.defaults.baseURL = 根路径

七. axios的拦截器 * (重点)

请求拦截器: 在ajax发送请求时拦截,做一些业务逻辑( 判断是否存在token ) 响应拦截器: 在ajax接收服务器返回的数据时拦截

// 请求拦截器
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)
})

八. FormData的使用** (重点)

FormData:可以帮助我们收集表单的数据 应用场景: 可以实现文件上传

语法:
  let fd = new FormData(form对象)
​
文件上传:
  1.得到文件   e.target.files[0]
  2.将文件装在fd对象中 fd.append(接口文档的属性名,e.target.files[0])
  3.axios 将fd发送到服务器

九. 原生XMLHttpRequest发送ajax

1. 初始化对象
    let xhr = new XMLHttpRequest()
2. 准备数据
    xhr.open(方式,地址)
​
3. 发送数据
    xhr.send()
​
4. 监听onload 服务器端的返回数据
    xhr.onload = function(){
        console.log(xhr.response)
    }
​
    或
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
             console.log(xhr.response)
        }
    }

十. ajax跨域

同源: 两个URL地址有相同的协议,主机名,端口号 同源策略: 浏览器的一个安全策略

ajax请求数据要遵循同源策略. html静态文件 与 接口地址 遵循同源策略,反之就是跨域

跨域请求被拦截过程

跨域请求数据需求是存在的,怎么办? 1.cors 本质: 服务器在响应的时候添加个响应头: Access-Control-Allow-Origin: *

cors工作原理：

2.反向代理 本质: ajax去自己的服务器要数据,让自己的服务器 去 第三方的服务器取数据,自己的服务器再返回数据给浏览器

反向代理原理：

3.jsonp 本质: 动态的创建script标签，给script标签添加src属性，因为动态的创建script标签发送请求是异步 在当前的页面上声明了一个函数，从服务器端返回的是该函数的调用，即使是异步，函数声明中的代码没有执行， 只有当函数调用回来时，函数体中的代码才执行

数据是作为函数调用的实参返回的

ajax总结:

ajax去服务器要数据,要数据的是"异步",实现了页面的局部刷新

现在最流行的ajax第三方的库axios

1.语法 axios({ method:请求方式 url:请求地址

    params: get请求传参
    data: post请求传参 
}).then(function({data:res}){
    log(res)  //res才是服务器返回的数据
})

2.axios的返回值问题 axios把服务器返回的数据套了一层壳

3.axios设置根路径 axios.defaults.baseURL = "根路径"

4.axios的拦截器 axios.interceptors.request.use(function(){},function(){})

axios.interceptors.response.use(function(){},function(){})

5.axios的其它方法 5.1.get请求及传参 axios.get(地址,[{params:值}]).then(function(){})

5.2.post请求及传参
axios.post(地址,[值]).then(function(){})
​
5.3.delete请求及传参
axios.delete(地址,[{params:值}]).then(function(){})
​
5.4.put请求及传参
axios.put(地址,[值]).then(function(){})