jQuery Ajax、本地存储

最新推荐文章于 2024-07-25 18:00:46 发布

肯古巴

最新推荐文章于 2024-07-25 18:00:46 发布

阅读量14

点赞数

文章标签： jquery ajax okhttp 前端 javascript

本文链接：https://blog.csdn.net/weixin_52439099/article/details/132975051

版权

Ajax

ajax的概念理解

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

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

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

什么是同源策略？
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源这是在设计ajax时基于安全的考虑。特征报错提示： js 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使用方法

常用参数

js 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 设置请求失败后的回调函数

完整的写法

js $.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 写法

js //类似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) { }) ```js $.ajaxSettings.async = false //设置同步

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

get请求简写

$.get(url, [data], [callback], [type]) - url：请求路径 - data：请求参数 - callback：回调函数 - type：响应结果的类型 ```js $.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：响应结果的类型 js $.post('/user/update', params).then(function (data) { })

jsonp

用来跨域 ```js

```

本地存储

cookie

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

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

JS操作cookies方法

设置cookies

js 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(); } ```js //程序代码 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(); }

读取cookies

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

删除cookies

js 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(); }

使用示例

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

localStorage 和 sessionStorage

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。 js //添加监听事件storage window.addEventListener("storage",()=>{},true);

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

localStorage

localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据 ```js // 设置 localStorage.name = '张三'; localStorage.setItem("name", "张三");

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

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

// 清除全部 localStorage.clear() ```

sessionStorage

sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。 ```js // 设置 sessionStorage.name = '张三'; sessionStorage.setItem("name", "张三");

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

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

// 清除全部 sessionStorage.clear() ```

肯古巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax、本地存储

AjaxjQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。| 函数 | 描述 || :--- | :--- || jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 || .ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 || .ajaxEr...
复制链接

扫一扫