归纳整理Ajax / JSON / WEB存储 / iframe

Posted 2020-10-09 化冰之路

 

---

Ajax

---

一、什么是 AJAX ？

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网、百度搜索等等。

 

二、AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式，现在基本上被淘汰了，大多数情况下使用JSON数据格式)

AJAX应用程序与浏览器和平台无关的！

三、AJAX的应用函数：

1、.load() 载入远程 html 文件代码并插入至 DOM 中。

可以只传入一个参数，表示加载一个静态的HTML代码片段。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

eg:

$("#div1").load("load.html",{参数},function () {对参数进行函数处理});

2、$.ajax() 通过 HTTP 请求加载远程数据。jQuery 最底层 AJAX 实现函数。

接受一个大的对象。对象里面的属性和方法，表示ajax请求的相关设置：

① url:被请求的远程文件的路径。

② Ajax请求的类型，可选值get/post.

?success： 请求成功的回调函数。接受一个参数data，表示后台返回的数据。

?dataType：预期服务器返回的数据类型。

"json": 返回 JSON 数据 。

"text": 返回纯文本字符串

?data：对象格式。向后台发送一个对象，表示传递的数据。

常用于type为post的请求方式。

如果type为get,可以使用？直接追加载URL后面。

?error:请求失败时的回调函数

?statusCode:接受一个对象，对象的键值对是status状态码和对应的回调函数，

表示当请求状态码是对应数字时，执行具体的操作函数.

404 - 页面没有找到！

200 - 请求成功！

500 - 内部服务器错误！

3、 $.get(); $.post(); 这两个函数，是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求；

 

接受四个参数：

① 请求的URL路径。 相当于$.ajax()里面的url；

② 向后台传递的数据。 相当于$.ajax()里面的data；

③ 请求成功的回调函数。 相当于$.ajax()里面的success；

④ 预期返回的数据类型。 相当于$.ajax()里面的dataType；

4、 AJax的各种监听事件：

ajaxStart--->ajaxSend--->ajaxSuccess/ajaxError/ajaxComplete--->ajaxStop

 

$(document).ajaxSend(function(){
alert("ajax请求发送")
});
$(document).ajaxStop(function(){
alert("ajax请求停止")
})
$(document).ajaxStart(function(){
alert("ajax请求开始")
})
$(document).ajaxSuccess(function(){
alert("ajax请求成功")
})
$(document).ajaxError(function(){
alert("ajax请求失败")
})
$(document).ajaxComplete(function(){
alert("ajax请求完成(不管成功失败，都会死乞白赖出来)")
})

5、 序列化表单数据的一些操作：

①、 序列化表单数据为一个字符串

$("#btn1").click(function(){
var str = $("#form1").serialize();
console.log(str);
//str = name=jianghao&password=123&email=1234123
var arr = str.split("&");
console.log(arr);
var obj = {};
for (var i=0; i<arr.length; i++) {
var arr1 = arr[i].split("=");
var keys = arr1[0];
var values = arr1[1];
obj[keys] = values;
}
console.log(obj);
$.get("01-JQuery基础.html?"+str,obj,function(){
 
})
})

2、序列化表单数据为一个数组

$("#btn2").click(function(){
var arr = $("#form1").serializeArray();
console.log(arr);
var obj = {};
for (var i=0; i<arr.length; i++) {
var keys = arr[i].name;
var values = arr[i].value;
obj[keys] = values;
}
console.log(obj);
});

3、 $.parseJSON(str) 将JSON字符串转为JSON对象

标准的JSON字符串，键必须用双引号包裹。

var str = ‘{"age":12}‘
var obj = $.parseJSON(str);
console.log(obj);

  4、 .trim() 去除掉字符串两端空格

var str1 = " 123 ";
console.log(str1.trim()); 

5、 用户遍历数组和对象

遍历数组时，函数的第一个参数是下标，第二个参数是值；

遍历对象时，函数的第一个参数是键，第二个参数是值

 
var arr = [1,2,3,4,5,6,7];
var obj = {
name : "zhangsan",
age : 12,
sex : "nan"
}
$.each(obj,function(index,item){
console.log(index);
console.log(item);
});
 

---

JSON

---

 

什么是 JSON ？

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

• JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言 和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（php，JSP，.NET）编程语言都支持JSON。
• JSON 具有自我描述性，更易理解

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 大括号保存对象
• 中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "wq"。

JSON 值

JSON 值可以是：

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在中括号中）
• 对象（在大括号中）
• null

---

JSON 数字

JSON 数字可以是整型或者浮点型：

{ "age":30 }

---

JSON 对象

JSON 对象在大括号（{}）中书写：

对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = "菜鸟教程" url = "www.runoob.com"

 

---

JSON 数组

JSON 数组在中括号中书写：

数组可包含多个对象：

{ "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }

在上面的例子中，对象 "sites" 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

---

JSON 布尔值

JSON 布尔值可以是 true 或者 false：

{ "flag":true }

---

JSON null

JSON 可以设置 null 值：

{ "runoob":null }

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse(text[, reviver])

参数说明：

• text:必需， 一个有效的 JSON 字符串。
• reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

• value:

必需， 一个有效的 JSON 字符串。

• replacer:

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

• space:

可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如：\t。

 

注意：

JSON是数据交互中，最常用的一种数据格式。

*

* 由于各种语言的语法都不相同，在传递数据时，可以将自己语言中数组、对象等转化为JSON字符串。传递之后，可以将JSON

* 字符串，再解析为JSON对象；

*

* JSON对象的用户与JS中的对象基本相同，唯一区别的是：JSON中的键必须是字符串；

 

---

WEB存储

---

HTML5新增web存储方式，主要有两种：

 

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

两个对象在使用方式没有任何区别，唯一的区别是存储的数据的有效时间；

 

①localStorage ：除非手动删除，否则数据将一直保存在本地文件；

 

②sessionStorage：当浏览器关闭时，sessionStorage就被清空；

 

[Storage的数据存储]

1、Storage 可以像普通对象一样，使用.追加或者读取最新的数据。

eg：localStorage.username = "zhangsan";

 

2、常用的函数：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

这里我们以localStorage来分析

三、localStorage的使用

localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下

if(！window.localStorage){ alert("浏览器支持localstorage"); 

return false; 
}else{ 
var storage=window.localStorage; 
//写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); 
}

运行后的结果如下：

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是:

刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

localStorage的读取

if(!window.localStorage){
 alert("浏览器支持localstorage");
 }else{ var storage=window.localStorage;
 //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log
(typeof storage["a"]);
 console.log(typeof storage["b"]);
 console.log(typeof storage["c"]);
 //第一种方法读取var a=storage.a; console.log(a); 
//第二种方法读取 var b=storage["b"]; console.log(b);
 //第三种方法读取 var c=storage.getItem("c"); console.log(c); }

 

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道

我之前说过localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下

if(!window.localStorage){
 alert("浏览器支持localstorage");
 }else{
 var storage=window.localStorage; 
//写入a字段 storage["a"]=1; 
//写入b字段 storage.b=1;
 //写入c字段
 storage.setItem("c",3); console.log(storage.a); 
// console.log(typeof storage["a"]); 
// console.log(typeof storage["b"]);
 // console.log(typeof storage["c"]);
 storage.a=4; console.log(storage.a); }

这个在控制台上面我们就可以看到已经a键已经被更改为4了

localStorage的删除

1、将localStorage的所有内容清除

 

var storage=window.localStorage; storage.a=1; 
storage.setItem("c",3);
 console.log(storage);
 storage.clear();
 console.log(storage);

 

2、 将localStorage中的某个键值对删除

 

var storage=window.localStorage; 
storage.a=1;
storage.setItem("c",3);
console.log(storage); 
storage.removeItem("a"); 
console.log(storage.a);

控制台查看结果

localStorage的键获取

 

var storage=window.localStorage;
 storage.a=1;
 storage.setItem("c",3);
 for(var i=0;i<storage.length;i++){
 var key=storage.key(i);
 console.log(key); 
 }

使用key()方法，向其中出入索引即可获取对应的键localStorage其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

if(!window.localStorage){
 alert("浏览器支持localstorage");
 }else{ 
   var storage=window.localStorage; 
   var data={ name:‘xiecanyong‘, sex:‘man‘, hobby:‘program‘ }; 
   var d=JSON.stringify(data); 
   storage.setItem("data",d);
   console.log(storage.data); 
}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
var data={ name:‘xiecanyong‘, sex:‘man‘, hobby:‘program‘ }; 
var d=JSON.stringify(data); storage.setItem("data",d); 

//将JSON字符串转换成为JSON对象输出 var json=storage.getItem("data"); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);

 

打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换

---

iframe

---

 

iframe是什么

 

iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。

 

iframe用法详解

 

首先需要了解iframe标签的写法，和大多HTML标签写法相同，iframe标签输入形式为：<iframe>和</iframe>。以<iframe>开头，以</iframe>结尾，将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

 

<!--

高度充满父容器的方式：

① 给div设置100%的同时，要使用绝对定位；

② 使用单位100vh，可以设置高度充满父容器；

使用单位100vw，可以设置宽度充满父容器；

-->