好玩又可恨的ajax

@文章来源：拉钩大前端就业训练营-念念

ajax

• 传统网站的问题
  • 网速慢的下，页面加载时间长 用户只能等待
  • 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
  • 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

ajax概述

• 浏览器提供的一套方法，实现在不刷新页面的情况下，更新页面数据，提高用户浏览网站应用的体验

• 应用场景

  • 页面上拉加载数据
  • 列表数据无刷新分页
  • 表单项离开焦点数据验证
  • 搜索框提示文字下拉列表

• ajax是运行在网站才能生效

• 实现步骤

  • 1. 创建ajax对象

      var xhr = new XMLHttpRequest();
    

  • 2.告诉ajax请求地址以及请求方式

      xhr.open('get','http://www.baidu.com');
    

  • 3.发送请求

      xhr.send();
    

  • 4.获取服务器与客户端的响应数据 不兼容ie低版本 调用一次

      xhr.onload = function(){
        console.log(xhr.responseText);
      };
    

• 服务端响应数据的格式：json对象作为响应数据的格式

  • 在http请求与响应的过程，进行传输的是字符串类型
  • JSON.parse() 将JSON字符串，转换为JSON对象

• 参数传递

  • get请求方式

    • 直接拼接在请求地址的后面

      http://localhost:3000/get?' + params
    

  • post请求方式

    • 传递一般格式

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
      // 服务端
      const bodyParser = require('body-parser');
      // 解析urlencoded
      app.use(bodyParser.urlencoded({ extended: true }));
      

    • 传递json格式

      // 设置请求参数格式的类型
      xhr.setRequestHeader('Content-Type', 'application/json');
      // JSON.stringify() 转成json字符串
      xhr.send(JSON.stringify({
        name: 'muhan',
        age: 18
      }));
      // 服务器端
      const bodyParser = require('body-parser');
      // 解析json
      app.use(bodyParser.json({ extended: true }));
      

  • 获取服务端的响应 兼容ie低版本 调用多次

     xhr.onreadystatechange = function () {
       // 2.请求已经发送了
       // 3.已经接收到服务器的部分数据了
       // 4.服务器端的响应数据已经接收完成
       console.log(xhr.readyState);
       // 如果状态 = 4 数据接收完成
       if (xhr.readyState === 4) {
         console.log(xhr.responseText);
       }
     }
    

  • 错误处理

    • 网络畅通，服务器能接收到请求，服务器返回结果不是预期结果

      可以判断服务器返回的状态码，分别进行处理 xhr.status获取http状态码

    • 网络畅通，服务端没有接收到请求，返回404状态码

      检查请求地址是否错误

    • 网络畅通，服务端能接收到请求，服务器端返回500状态码

    ​ 服务端错误，告诉后端程序员去调试服务器端

    • 网络中断，请求无法发送到服务器端

      触发xhr对象下onerror事件，在onerror事件处理函数中对错误进行处理

  • ajax状态码 与 http状态码

    • ajax状态码： 表示ajax请求的过程状态 ajax对象返回的
    • http状态码： 表示请求的处理结果，是服务器端返回的

ajax异步编程

• 同步 ： 上一行代码执行完才能执行下一行代码，代码逐行执行
• 异步：程序不会等待异步代码执行完成后再去执行后面的代码。等待后续代码执行完毕后再看异步代码是否返回结果
• ajax封装

请求数据的格式

• XML格式 不常用

• JSON格式

  /*
    json数据不需要存在变量中
    结束时不需要写分号
    json数据中的属性名必须加引号
  */
  var str = '{"name":"tom","age":18}';
  // 转json
  JSON.stringify(obj);
  // json转对象
  JSON.parse(str);
  

• json-server部署

// json-server --watch db.json

aixos

• axios(config) config对象格式的配置

  • URL
  • method
  • baseURL 传递相对前缀，后续就可以省略
  • headers 即将被发送的自定义请求头
  • params 请求参数
  • data 发送的数据
  • timeout 请求超时时间
  • responseType 从服务器响应的数据类型 默认是json

• 全局默认配置

  • axios.defaults.baseURL = 'http://api.exaple.com'
  • axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 拦截器

  // 请求拦截
  axios.interceptors.request.use(function(config){
    config.params = {
      id:2
    };
    config.baseURL = 'http://localhost:3000';
    return config;
  });
  // 响应拦截
  axios.interceptors.response.use(function(response){
    return reponse.data;
  })
  axios('/posts')
  .then(function(res){
    console.log(res);
  })
  .catch(function(error){
    console.log(error);
  });
  

XMLHttpRequest2.0

• xhr.onload事件 -- 只在请求完成时触发
• xhr.onprogress事件 -- 只在请求进行中触发
• response属性 以对象形式描述响应体 在调用open()初始化请求之后，在调用send()发送请求到服务器之前设置方可生效

跨域与同源

• 同源： 浏览器的一种安全协议，所谓同源就是域名，协议，端口完全相同

• jsonp原理跨域解决：

  • jqeury中的jsonp

  $.ajax({
    dataType:'jsonp'
  })
  

  • cors跨域 服务端设置的

    "Access-Control-Allow-Origin:*" // 所有的源都可以被访问
    

模板引擎

• 减少字符串的拼接

• 在模板里面解析json 然后跟html内容拼接，性能会更好

• artTemplate

  // 参数1： 模板的id
  // 参数2： 接收一个对象型的数据，数据会传给模板，对象中每个属性名可以直接当变量使用
  $('#box').html(template('tem'),{
    name:'tom'
  });