jQuery Ajax、本地存储

Ajax

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

ajax的概念理解

• ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息
• ajax技术的原理是实例化xmlhttp对象与后台通信，调用了异步HTTP请求线程
• ajax通信的过程不会影响后续javascript的执行，从而实现异步

同步和异步?
同步: 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。做完一件事后再做另外一件事
异步: 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作，同时做几件事情

为什么要使用ajax？
因为ajax是局部刷新，从而不会影响页面加载抖动

什么是同源策略？
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源 这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

$.ajax使用方法

常用参数

1、url         请求地址
2、type        请求方式，默认是'GET'，常用的还有'POST'
3、dataType    设置返回的数据格式，常用的是'json'格式，也可以设置为'html',或者jsonp
4、data        设置发送给服务器的数据
5、contentType 指明向后端发送的数据格式,通常为contentType:"application/json" 
8、async       设置是否异步，默认值是'true'，表示异步
6、success     设置请求成功后的回调函数
7、error       设置请求失败后的回调函数

完整的写法

$.ajaxSettings.async = false  //设置同步
$.ajax({
  url: "/delete_book",                   // 请求的后端url
  type: "post",                          // 请求方式 get|post|put|delete
  dataType: "json",                      // 指明后端返回的数据格式
  data: JSON.stringify({ name: "张三" }), // 向后端发送的请求体数据
  contentType: "application/json",       // 指明向后端发送的数据格式
  headers: {                             //请求头
    "X-CSRFToken": getCookie("csrf_token")
  },
  success: function (res) {
    if (res.code == 0) {
      location.href = "/";
      location.reload()
    }
  }
})
$.ajaxSettings.async = true  //设置异步

Promise 写法

//类似Promise写法
$.ajax({
  url: '/api/v1/users',
  type: 'post',
  data: JSON.stringify({ name: "张三" }), //转json数据
  dataType: 'json',
  contentType: 'application/json',
  headers: {
    "X-CSRFToken": getCookie("csrf_token") // 请求头，将csrf_token值放到请求中，方便后端csrf进行验证
  }
})
.then(function (res) { })

$.ajaxSettings.async = false  //设置同步

$.post('/cart/update', params).then(function (data) {
  if (data.res == 5) {
    total_count = data.total_count
    sussess_update = true
  }
  else {
    alert(data.errmsg)
    sussess_update = false
  }
  $.ajaxSettings.async = true  //设置异步
})

get请求简写

$.get(url, [data], [callback], [type])

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型

$.ajaxSettings.async = false  //设置同步

$.get("/api/v1.0/users/auth", function (res) {
  if (res.data == "0") { } else { }
}, "json");

$.ajaxSettings.async = true  //设置异步

post请求简写

$.post(url, [data], [callback], [type])

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型

$.post('/user/update', params).then(function (data) {
})

jsonp

用来跨域

<input type="text" name="" id="input">
<ul class="list"></ul>

<script>
  $(function () {
    $('#input').keyup(function () {
      var sVal = $(this).val();
      $.ajax({
        url: 'https://sug.so.360.cn/suggest?',
        type: 'get',
        dataType: 'jsonp',
        data: { word: sVal }
      })
        .done(function (data) {
          var aData = data.s;
          $('.list').empty();
          for (var i = 0; i < aData.length; i++) {
            var $li = $('<li>' + aData[i] + '</li>');
            $li.appendTo($('.list'));
          }
        })
    })
  })
</script>

本地存储

cookie

cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，要在服务器的环境可设置访问路径 只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
  // jquery 设置cookie
  $.cookie('mycookie', '123', { expires: 7, path: '/' });

  // jquery 获取cookie
  $.cookie('mycookie');

  //免广告
  var d = new Date();
  document.cookie = 'app-installed=1;expires=' + d.toGMTString(d.setYear(2028));
</script>

⚠️注意: 要在服务器的环境

JS操作cookies方法

设置cookies

function setCookie(name, value) {
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

//程序代码 
function setCookie(name, value, time) {
  var strsec = getsec(time);
  var date = new Date();
  date.setTime(date.getTime() + strsec * 1);
  document.cookie = name + "=" + escape(value) + ";expires=" + date.toGMTString();
}

function getsec(str) {
  alert(str);
  var str1 = str.substring(1, str.length) * 1;
  var str2 = str.substring(0, 1);
  if (str2 == "s") {
    return str1 * 1000;
  }
  else if (str2 == "h") {
    return str1 * 60 * 60 * 1000;
  }
  else if (str2 == "d") {
    return str1 * 24 * 60 * 60 * 1000;
  }
}
//这是有设定过期时间的使用示例： 
//s20是代表20秒 
//h是指小时，如12小时则是：h12 
//d是天数，30天则：d30 
setCookie("name", "hayden", "s20");

读取cookies

function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg)) return unescape(arr[2]);
  else return null;
} 

删除cookies

function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
} 

使用示例

setCookie("name","hayden"); 
alert(getCookie("name")); 

localStorage 和 sessionStorage

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

 //添加监听事件storage
 window.addEventListener("storage",()=>{},true);

iPhone的无痕浏览不支持Web Storage，只能用cookie

localStorage

localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递 在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据

// 设置
localStorage.name = '张三';
localStorage.setItem("name", "张三");

// 获取
localStorage.name
localStorage.getItem("name");

// 删除
localStorage.removeItem("name");

// 清除全部
localStorage.clear()

sessionStorage

sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。

// 设置
sessionStorage.name = '张三';
sessionStorage.setItem("name", "张三");

// 获取
sessionStorage.name
sessionStorage.getItem("name");

// 删除
sessionStorage.removeItem("name");

// 清除全部
sessionStorage.clear()