Web前端补充----json ajax cookie webStorage jqueryUI

Web前端笔记

第十部分：json ajax

1. json

• json
  json是 JavaScript Object Notation 的首字母缩写，
  单词的意思是javascript对象表示法，
  这里说的json指的是类似于javascript对象的一种数据格式，
  目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
• javascript自定义对象：

•  var oMan = {
 name:‘tom’,
 age:16,
 talk:function(s){
 alert(‘我会说’+s);
 }
 }

• json格式的数据：

•  {
 “name”:“tom”,
 “age”:18
 }

• 与json对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，
  用单引号或者不用引号会导致读取数据错误。
• json的另外一个数据格式是数组，和javascript中的数组字面量相同。
  [“tom”,18,“programmer”]

如果是字典形式，load读取出来就是python字典类型

如果是数组形式，load读取出来就是python列表类型

读取出来以后直接当做字典或者列表操作即可

• json文件读取与写入，python中字典与json格式之间转换

• 参考Python_development_skills_summary项目中004文件中相关实例

2. ajax

• ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。
  ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。
  ajax通信的过程不会影响后续javascript的执行，从而实现异步。
• 同步和异步
  现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，
  程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，
  程序中的同步指的是现实生活中的异步。
• 局部刷新和无刷新
  ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，
  只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，
  所以页面整体不会刷新，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’
  4、data 设置发送给服务器的数据
  5、success 设置请求成功后的回调函数
  6、error 设置请求失败后的回调函数
  7、async 设置是否异步，默认值是’true’，表示异步
• 写法： 新的写法(推荐)：

•  $.ajax({
 url: ‘js/data.json’,
 type: ‘GET’,
 dataType: ‘json’,
 data:{‘aa’:1}
 })
 .done(function(data) {
 alert(data.name);
 })
 .fail(function() {
 alert(‘服务器超时，请重试！’);
 });
// data.json里面的数据是： {“name”:“tom”,“age”:18}

• jsonp
  ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，
  就需要用到jsonp技术，jsonp可以跨域请求数据，
  它的原理主要是利用了
  jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

• 写法：(与ajax请求数据和返回的数据都不同)
  $.ajax({
  url:‘js/data.js’,
  type:‘get’,
  dataType:‘jsonp’,
  jsonpCallback:‘fnBack’
  })
  .done(function(data){
  alert(data.name);
  })
  .fail(function() {
  alert(‘服务器超时，请重试！’);
  });
  // data.js里面的数据： fnBack({“name”:“tom”,“age”:18});

• jsonp读取的数据和ajax不一样，jsonp数据是json中的数据放在一个fnBack()函数里面

3. 本地存储：Cookie LocalStorage SessionStorage

• 本地存储分为cookie，以及新增的localStorage和sessionStorage
• 1、cookie
  存储在本地，容量最大4k，
  缺点：在同源的http请求时携带传递，损耗带宽，
  可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，
  在设置的过期时间之前有效。
• cookie的使用(设置和读取)
• jquery.cookie.js插件应用
  cookie在jquery中有个插件，jquery.cookie.js
  先引入jQuery库，然后再引入jquery.cookie.js
  然后启动js的服务器环境（参考09文件夹），就可以操作使用cookie了

• 需要依赖jQuery库,使用服务器环境访问查看

// 第一个参数是cookie键的名称，第二个是值，
// 第三个字典是：expires:7 过期时间7天，存储路径，/代表该文件的根目录下

设置cookie
$.cookie(‘mycookie’,‘ok123!’,{expires:7,path:’/’});
读取cookie信息,需要知道cookie的名称
$.cookie(‘mycookie’);

具体参考：004案例和004图片

1. Web Storage
   localStorage 和 sessionStorage 合称为Web Storage ,
   Web Storage支持事件通知机制，可以将数据更新的通知监听者，
   Web Storage的api接口使用更方便。
   iPhone的无痕浏览不支持Web Storage，只能用cookie。

• 他们不需要Jquery库，直接在script里面写即可，然后使用服务器环境访问查看

• 2.1 localStorage(本地存储)
  存储在本地，容量为5M或者更大，不会在请求时候携带传递，
  在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
  //设置：
  localStorage.setItem(“dat”, “456”);
  localStorage.dat = ‘456’;
  //获取：
  localStorage.getItem(“dat”);
  localStorage.dat
  //删除
  localStorage.removeItem(“dat”);
• 2.2 sessionStorage(会话存储)
  存储在本地，容量为5M或者更大，不会在请求时候携带传递，
  在同源的当前窗口关闭前有效（出于安全的考虑）

• 参考005案例和005图片

4. jQuery UI插件

• jQuery UI是以 jQuery 为基础的代码库。
  包含底层用户交互、动画、特效和可更换主题的可视控件。
  我们可以直接用它来构建具有很好交互性的web应用程序。
• jqueryUI 网址
  ​​​ http://jqueryui.com/​​
• 常用功能：
  1.拖拽--------最常用
  2.自定义滑动条
  3.自定义滚动条