重生之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({
            url:'请求路径',
            method:'请求方式',//get post delete  put  patch
            data: { 'post请求参数'},
            params: { 'get请求参数'}
        }).then(res=>{
            //成功回调
            console.log(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 )

axios.interceptors.request.use(function(config){ 
        
        return  config
    },function(error){ 
        
        return Promise.reject(error)
    })

 响应拦截器: 在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).实例化ajax对象
        let xhr = new XMLHttpRequest();
        //(2).设置请求方法和地址
        //get请求的数据直接添加在url的后面 格式是 url?key=value
        xhr.open('请求方式', '接口url');
        //(3).发送请求
        xhr.send();
        //(4).注册回调函数
        xhr.onload = function() {
            console.log(xhr.responseText)
        };

十. ajax跨域

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

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

跨域请求数据的方法

1.cors     
        本质: 服务器在响应添加一个响应头: Access-Control-Allow-Origin: *
    2.反向代理  
        本质: ajax去自己的服务器要数据,让 自己的服务器 去 第三方的服务器取数据,自己的服务器再返回数据给浏览器
    3.jsonp    
        本质: 动态的创建script标签，给script标签添加src属性，因为动态的创建script标签发送请求是异步
              在当前的页面上声明了一个函数，从服务器端返回的是该函数的调用，即使是异步，函数声明中的代码没有执行，
               只有当函数调用回来时，函数体中的代码才执行

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