面试题从 JS 基础知识到 JS Wed API

我会带着你远行 2022-11-11 14:48 97阅读 0赞

## 常说的js(浏览器执行的js)包含两个部分： ##

### 一、js基础知识（ECMA262标准） ###

###### 1、变量类型和计算 ######

###### 1 .1、值类型（存的是值） ######

var a = 100;
    var b = a;
    a = 200;
    console.log(a);  //200
    console.log(b);  //100

###### 1.2、引用类型（存的是地址） ######

var a = { age: 25};
    var b = a;
    b.age = 100;
    console.log(a.age);  //100
    console.log(b.age);  //100

*  引用类型：数组、对象、函数

> `引用类型：数组、对象、函数`

###### 1.3、typeof运算符（6个） ######

typeof undefined    //undefined
    typeof 'abc'    //string
    typeof 123    //number
    typeof true    //boolean
    typeof { }    //object
    typeof []    //object
    typeof null    //object
    typeof console.log    //function

###### 1.4、强制类型转换 ######

// 字符串拼接
    var a = 100 + 10  	//110
    var b = 100 + '10'	//10010
     
    // == 运算符
    100 == '100' 		//true
    0 == ''			//true
    null == undefined	//true
     
    // if语句
    var a = true;
    if (a) { 
        // ...
    }
    var b = 100;
    if (b) { 
        // ...
    }
    var c = '';
    if (c) { 
        // ...
    }
     
    // 逻辑运算
    console.log(10 && 0)  		//0
    console.log('' || 'abc') 	//'abc'
    console.log(!window.abc)       //true
     
    // 判断一个变量会被当做true还是false
    var a = 100;
    console.log(!!a)           //true

###### 1.5、js内置函数 ######

Object  
Array  
Boolean  
Number  
String  
Function  
Date  
RegExp  
Error

###### 1.6、何时使用 === 何时使用 === ######

// 问题：何时使用===，何时使用==
    if(obj.a == null) { 
    	// 相当于abj.a === null || abj.a === undefined的简写形式
    	// 其他情况都用 ===
    }

###### 1.7、JSON ######

// 问题：如何理解JSON
    // JSON 既是一种语法格式，还是JS对象
    JSON.stringify({ a:10, b: 20})
    JSON.parse('{"a":10, "b": 20}')

###### 2、原型和原型链 ######

###### 2.1、构造函数 ######

function Foo(name, age) { 
    	this.name = name;
    	this.age = age;
    	this.class = 'class-1';
    	// return this //默认有这一行
    }
     
    var f1 = new Foo('zhangsan', 18);
    var f2 = new Foo('lisi', 25);  //创建多个对象

###### 2.2、构造函数扩展 ######

> 1、var a = \{\} 其实是 var a = new Object()\{\} 的语法糖  
> 2、var a = \[\] 其实是 var a = new Array()\{\} 的语法糖  
> 3、function Foo()\{…\} 其实是 var Foo = new Function()\{\} 的语法糖

###### 2.3、原型五条规则 ######

> 1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了’null’以外）  
> 2、所有的引用类型（数组、对象、函数），都有一个\_\_proto\_\_属性，属性值是一个普通对象 隐式原型  
> 3、所有的函数，都有一个prototype属性，属性值也是一个普通对象 显式原型  
> 4、所有的引用类型（数组、对象、函数），**proto\_\_属性指向它的构造函数的prototype属性值  
> 5、当试图得到一个对象的某一个属性时，如果这个对象本身没有这个属性，那么会去它的\_\_proto**(即它的构造函数的prototype)中寻找

var obj = { };
    var arr = [];
    function fn () { };
     
    obj.a = 100;
    arr.a = 100;
    fn.a = 100;
     
    console.log(obj.__proto__);
    console.log(arr.__proto__);
    console.log(fn.__proto__);
     
    console.log(fn.prototype);
     
    console.log(obj.__proto__ === Object.prototype);
    console.log(arr.__proto__ === Array.prototype);
    console.log(fn.__proto__ === Function.prototype);

// 构造函数
    function Foo(name) { 
    	this.name =name
    }
    Foo.prototype.alertName = function () { 
    	alert(this.name)
    }
    // 创建实例
    var f = new Foo('zhangsan')
    f.printName = function () { 
    	console.log(this.name)
    }
    // 测试
    f.printName();
    f.alertName();

> this不论是自己属性还是原型属性，都指向f

###### 2.4、原型链 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 2.5、继承 ######

> 对象冒充实现属性继承；原型链实现方法继承

var objA = new ClassA("blue");
    var objB = new ClassB("red", "John");
    objA.sayColor();	//输出 "blue"
    objB.sayColor();	//输出 "red"
    objB.sayName();	//输出 "John"

instance of 用于判断 引用类型 属于哪个 构造方法

> 使用 instanceof 判断一个函数是否是一个变量(引用类型)的构造函数

2.6、对象循环自身属性

var item;
    for (item in f) { 
    	if (f.hasOwnProperty(item)) { 
    		console.log(item)
    	}
    }

###### 3、作用域和闭包 ######

###### 3.1、函数声明和函数表达式 ######

###### 3.1.1、函数声明 ######

fn()	// ok
    function fn () { 
        console.log("函数声明")
    }

###### 3.1.2、函数表达式 ######

fn1()	// Uncaught TypeError: fn1 is not a function
    var fn1 = function () { 
        console.log("函数表达式")
    }
    // 等价于
    console.log(a)  //a = undifined
    var a = 100;
    // 等价于
    var a;
    console.log(a)  //a = undifined
    a = 100;

###### 3.2、作用域 ######

###### 3.2.1、全局作用域和函数作用域 ######

> js没有块级作用域

3.3、执行上下文  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

###### 3.4、this 要在执行时才能确认值，定义时无法确认 ######

###### 3.4.1、四种应用场景 ######

> 1、作为构造函数执行  
> 2、作为对象属性执行  
> 3、作为普通函数执行  
> 4、call(变量)、apply(数组)、bind

###### 3.4.2、示例 ######

###### 3.5、作用域链 ######

> 当前作用域没有定义的变量，去定义时的父级作用域查找

###### 3.6、闭包 ######

###### 3.6.1、闭包应用场景 ######

函数作为返回值  
函数作为参数传递

###### 3.6.2、示例 ######

function fun(){ 
    	var a = 100;
    	return function (){ 
    		console.log(a)
    	}
    }
    var unf1 = fun;
    var a = 200;
    fun1() // 100

function fun(){ 
    	var a = 100;
    	return function (){ 
    		console.log(a)
    	}
    }
    var fun1= fun;
    function fun2(fn){ 
     	var a = 200;
    	 fu()
    }
    fun2(fun1) // 100

###### 4、异步单线程 ######

###### 4.1、异步和同步区别 ######

> 是否存在阻塞

// 异步
    console.log(100);
    setTimeout(function () { 
    	    console.log(200);
    },1000);
    console.log(300)

// 同步
    console.log(100);
    alert(200)
    console.log(300)

###### 4.2、异步应用场景 ######

定时任务：setTimeout setInterval  
网络请求：ajax请求，动态加载  
事件绑定  
示例

// ajax请求示例
    console.log('start');
    $.get('./data.json', function (data) { 
        console.log(data)
    })
    console.log('end')

// 动态加载img示例
    console.log('start');
    var img = document.creatrElement('img')
    img.onload = function () { 
        console.log('loaded');
    }
    console.log('end')

// 事件绑定示例
    console.log('start');
    document.getElementById('btn').addEventListener('click', function () { 
        console.log('clicked')
    })
    console.log('end')

###### 4.3、异步与单线程 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

###### 5、日期 ######

console.log(Date.now())  // 获取当前时间毫秒数
    var dt = new Date()
    console.log(dt.getTime())  // 获取毫秒数
    console.log(dt.getFullYear())  // 年
    console.log(dt.getMonth())  // 月(0 - 11)
    console.log(dt.getDate())  // 日(0 - 31)
    console.log(dt.getHours())  // 小时(0 - 23)
    console.log(dt.getMinutes())  // 分钟(0 - 59)
    console.log(dt.getSeconds())  // 秒(0 - 59)

###### 6、Math ######

console.log(Math.random())

###### 7、数组API ######

var arr = [1, 2, 3, 6, 5, 4];
    // forEach遍历所有元素
    arr.forEach(function(item,index){ 
        console.log('item: ' + item)
        console.log('index: ' + index)
    })
    // every判断所有元素是否都符合条件
    var result = arr.every(function(item,index){ 
        if(item < 4) { 
    	return true
        }
    })
    console.log(result)
    // some判断是否有至少一个元素符合条件
    var result = arr.some(function(item,index){ 
        if(item < 4) { 
    	return true
        }
    })
    console.log(result)
    // sort排序
    var arr2 = arr.sort(function(a,b){ 
        return a - b 
    })
    console.log(arr2)
    // map对元素从新组装，生成新数组
    var arr2 = arr.map(function(item,index){ 
        return item + 100
    })
    console.log(arr2)
    // filter过滤符合条件的元素
    var arr2 = arr.filter(function(item,index){ 
        if(item > 4){ 
    	return true
        }
    })
    console.log(arr2)

###### 8、对象API（for…in) ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]

###### 二、js-Web-API（W3C标准） ######

> W3C标准没有规定任何js基础相关的东西（变量、原型、作用域、异步）；定义了用于浏览器中js操作页面的API和全局变量

###### 1、DOM ######

###### 1.1、DOM本质 ######

> DOM可理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型

###### 1.2、DOM节点操作 ######

var div1 = document.getElementById('div1');  // 元素
    var div2 = document.getElementsByTagName('div2');  //集合
    var div3 = document.getElementsByClassName('div3');  //集合
    var div4 = document.querySelectorAll('div4');  //集合

###### 1.3、DOM结构操作 ######

var div1 = document.getElementById('div1');
    // 新增节点
    var p1 = document.creatrElement('p');
    p1.innerHTML = 'this is p1';
    div1.appendChild(p1);  // 增加新创建的元素 
    // 移动已有节点
    var p2 = document.getElementById('p2');
    div1.appendChild(p2);
    // 获取父节点
    var parent = div1.parentElement;
    // 获取子节点
    var childs = div1.childNodes;
    // 删除节点
    div1.removeChild(childs[0])

###### 1.4、DOM属性（待完善） ######

Attribute和property区别？

Attribute 是对html标签属性的修改  
property 是对js对象属性的修改

###### 2、BOM ######

###### 2.1、navigator ######

###### Navigator 对象 ######

###### Navigator 对象包含有关浏览器的信息。 ######

> 注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

###### Navigator 对象集合 ######

<table> 
 <thead> 
  <tr> 
   <th>集合</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>plugins[]</td> 
   <td>返回对文档中所有嵌入式对象的引用。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。</td> 
  </tr> 
 </tbody> 
</table>

###### Navigator 对象属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appCodeName</td> 
   <td>返回浏览器的代码名。</td> 
  </tr> 
  <tr> 
   <td>appCodeName</td> 
   <td>返回浏览器的代码名。</td> 
  </tr> 
  <tr> 
   <td>appMinorVersion</td> 
   <td>返回浏览器的次级版本。</td> 
  </tr> 
  <tr> 
   <td>appName</td> 
   <td>返回浏览器的名称。</td> 
  </tr> 
  <tr> 
   <td>appVersion</td> 
   <td>返回浏览器的平台和版本信息。</td> 
  </tr> 
  <tr> 
   <td>browserLanguage</td> 
   <td>返回当前浏览器的语言。</td> 
  </tr> 
  <tr> 
   <td>cookieEnabled</td> 
   <td>返回指明浏览器中是否启用 cookie 的布尔值。</td> 
  </tr> 
  <tr> 
   <td>cpuClass</td> 
   <td>返回浏览器系统的 CPU 等级。</td> 
  </tr> 
  <tr> 
   <td>onLine</td> 
   <td>返回指明系统是否处于脱机模式的布尔值。</td> 
  </tr> 
  <tr> 
   <td>platform</td> 
   <td>返回运行浏览器的操作系统平台。</td> 
  </tr> 
  <tr> 
   <td>systemLanguage</td> 
   <td>返回 OS 使用的默认语言。</td> 
  </tr> 
  <tr> 
   <td>userAgent</td> 
   <td>返回由客户机发送服务器的 user-agent 头部的值。</td> 
  </tr> 
  <tr> 
   <td>userLanguage</td> 
   <td>返回 OS 的自然语言设置。</td> 
  </tr> 
 </tbody> 
</table>

###### 2.2、screen ######

###### Navigator 对象方法 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>javaEnabled()</td> 
   <td>规定浏览器是否启用 Java。</td> 
  </tr> 
  <tr> 
   <td>taintEnabled()</td> 
   <td>规定浏览器是否启用数据污点 (data tainting)。</td> 
  </tr> 
 </tbody> 
</table>

###### Navigator 对象描述 ######

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

###### 2.3、location ######

###### Location 对象 ######

Location 对象包含有关当前 URL 的信息。  
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。  
\#\#\#\#\#\#Location 对象属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>设置或返回从井号 (#) 开始的 URL（锚）。</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>设置或返回主机名和当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或返回当前 URL 的主机名。</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或返回完整的 URL。</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>设置或返回当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

##### Location 对象方法 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td>加载新的文档。</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新加载当前文档。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用新的文档替换当前文档。</td> 
  </tr> 
 </tbody> 
</table>

> Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

> 不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。

> 除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。

> 除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。

###### 2.4、history ######

###### History 对象 ######

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

###### History 对象属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回浏览器历史列表中的 URL 数量。</td> 
  </tr> 
 </tbody> 
</table>

###### History 对象方法 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td>加载 history 列表中的前一个 URL。</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>加载 history 列表中的下一个 URL。</td> 
  </tr> 
  <tr> 
   <td>go()</td> 
   <td>加载 history 列表中的某个具体页面。</td> 
  </tr> 
 </tbody> 
</table>

###### History 对象描述 ######

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

例子

> 下面一行代码执行的操作与单击后退按钮执行的操作一样：

history.back()

> 下面一行代码执行的操作与单击两次后退按钮执行的操作一样：

history.go(-2)

###### 3、事件 ######

###### 3.1、通用事件绑定 ######

Array.prototype.indexOf = function( obj ){ 
        var result = -1 , length = this.length , i=length - 1;
        for ( ; i>=0 ; i-- ) { 
            if ( this[i] == obj ) { 
                result = i;
                break;
            }
        }
        return result;
    }
    Array.prototype.contains = function( obj ) { 
        return ( this.indexOf( obj ) >=0 )
    }
    Array.prototype.append = function( obj , nodup ) { 
        if ( !(nodup && this.contains( obj )) ) { 
            this[this.length] = obj;
        }
    }
    Array.prototype.remove = function( obj ) { 
        var index = this.indexOf( obj );
        if ( !index ) return ;
        return this.splice( index , 1);
    };
    function addEvent(element , type , fun){ 
        if (!element.events) element.events = { };
        var handlers = element.events[type];
        if (!handlers) { 
            handlers = element.events[type] = [];
            if(element['on' + type]) { 
                handlers[0] = element['on' + type];
            }
        }
        handlers.append( fun , true)
        element['on' + type] = handleEvent;
    }
    function removeEvent(element , type , fun) { 
        if (element.events && element.events[type]) { 
            element.events[type].remove(fun);
        }
    }
    function handleEvent(event) { 
        var returnValue = true , i=0;
        event = event || fixEvent(window.event);
        var handlers = this.events[event.type] , length = handlers.length;
        for ( ; i < length ; i++) { 
            if ( handlers[i].call( this , event) === false ){ 
                returnValue = false;
            }
        }
        return returnValue;
    }
    function fixEvent(event) { 
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    }
    fixEvent.preventDefault = function() { 
        this.returnValue = false;
    };
    fixEvent.stopPropagation = function() { 
        this.cancelBubble = true;
    };

###### 3.2、事件冒泡 ######

###### 什么是冒泡与捕获 ######

> 以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的全过程是1-2-3-4-4-3-2-1。

> 前半部分，事件从最外面的父div依次传递到最里面的后代div，1-2-3-4这部分我们叫捕获过程。  
> 之后事件又从最里层的后代div逐层传出，4-3-2-1这部分我们叫冒泡过程。

如果我把捕获监听器和冒泡监听器都加上，如下图这样。  
![在这里插入图片描述][20210321101219724.png]  
![在这里插入图片描述][20210321101226153.png]  
![在这里插入图片描述][2021032110123424.png]  
![在这里插入图片描述][20210321101239570.png]

###### 添加两种监听的方法 ######

> 在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

> 使用框架时可使用对应的框架提供的方法。如上面我使用了Vue框架，通过事件装饰来区分捕获与冒泡。

###### 阻止传递 ######

> 在不使用任何框架的情况下，我们在js中通过stopPropagation方法阻止事件继续传递。  
> 使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。

我们可以在传递过程中阻止事件继续传递，防止触发不需要的事件。  
![在这里插入图片描述][20210321101404174.png]  
如图我在第三层捕获后阻止事件继续传递，那么后面的log方法不会继续执行。最终只输出1-2-3。

![在这里插入图片描述][20210321101421211.png]

###### 应用场景举例 ######

> 我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。

###### 4、ajax ######

###### AJAX是创建交互式网页应用的网页开发技术的一种。 ######

》Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。可以用于创建快速动态网页的技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]

###### 扩展资料 ######

> Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML，浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。

> 综合各种变化的技术和强耦合的客户服务端环境，Ajax 提出了一种新的开发方式。Ajax 开发人员必须理解传统的 MVC 架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑 B/S 环境的外部和使用 Ajax 技术来重定型 MVC 边界。

> 最重要的是，Ajax 开发人员必须禁止以页面集合的方式来考虑 Web 应用而需要将其认为是单个页面。一旦 UI 设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

###### 5、存储 ######

###### 5.1、cookie ######

###### 1. 前言 ######

> 朋友问我cookie是什么，用来干什么的，可是我居然无法清楚明白简短地向其阐述cookie，这不禁让我陷入了沉思：为什么我无法解释清楚，我对学习的方法产生了怀疑！在知乎上看到有人推荐使用费尔曼学习技巧，于是在重新学习cookie的过程中使用了该技巧来试验，效果有待验证！

在学习一个新的知识点前，我们应该明白自己的学习目标，要带着疑问去学习，该小节须要了解：

> 1.什么是cookie，cookie的作用  
> 2.cookie的工作机制，即cookie是运作流程  
> 3.cookie的基本属性（4个）以及我们如何使用cookie

###### 2. 什么是cookie ######

> HTTP协议本身是无状态的。什么是无状态呢，即服务器无法判断用户身份。Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

> 打个比方，我们去银行办理储蓄业务，第一次给你办了张银行卡，里面存放了身份证、密码、手机等个人信息。当你下次再来这个银行时，银行机器能识别你的卡，从而能够直接办理业务。

###### 3. cookie机制 ######

> 当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：

> 客户端发送一个请求到服务器 --》 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --》 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 --》服务器返回响应数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]  
为了探究这个过程，写了代码进行测试，如下：  
我在doGet方法中，new了一个Cookie对象并将其加入到了HttpResponse对象中

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
          Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");
          // 设置生命周期为MAX_VALUE
          cookie.setMaxAge(Integer.MAX_VALUE);
          resp.addCookie(cookie);
    }

浏览器输入地址进行访问，结果如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 6]  
可见Response Headers中包含Set-Cookie头部，而Request Headers中包含了Cookie头部。name和value正是上述设置的。

###### 4. cookie属性项 ######

<table> 
 <thead> 
  <tr> 
   <th>属性项</th> 
   <th>属性项介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>NAME=VALUE</td> 
   <td>键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样</td> 
  </tr> 
  <tr> 
   <td>Expires</td> 
   <td>过期时间，在设置的某个时间点后该 Cookie 就会失效</td> 
  </tr> 
  <tr> 
   <td>Domain</td> 
   <td>生成该 Cookie 的域名，如 domain=“www.baidu.com”</td> 
  </tr> 
  <tr> 
   <td>Path</td> 
   <td>该 Cookie 是在当前的哪个路径下生成的，如 path=/wp-admin/</td> 
  </tr> 
  <tr> 
   <td>Secure</td> 
   <td>如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie</td> 
  </tr> 
 </tbody> 
</table>

###### Expires ######

> 该属性用来设置Cookie的有效期。Cookie中的maxAge用来表示该属性，单位为秒。Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值，分别为正数，负数和0。

> 如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化，即写到对应的Cookie文件中（每个浏览器存储的位置不一致）。无论客户关闭了浏览器还是电脑，只要还在maxAge秒之前，登录网站时该Cookie仍然有效。下面代码中的Cookie信息将永远有效。

Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");
     // 设置生命周期为MAX_VALUE，永久有效
     cookie.setMaxAge(Integer.MAX_VALUE);
     resp.addCookie(cookie);

当maxAge属性为负数，则表示该Cookie只是一个临时Cookie，不会被持久化，仅在本浏览器窗口或者本窗口打开的子窗口中有效，关闭浏览器后该Cookie立即失效。

Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");
    // MaxAge为负数，是一个临时Cookie，不会持久化
    cookie.setMaxAge(-1);
    resp.addCookie(cookie);

可以看到，当MaxAge为-1时，时间已经过期  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 7]  
当maxAge为0时，表示立即删除Cookie

Cookie[] cookies = req.getCookies();
    Cookie cookie = null;
    // get Cookie
    for (Cookie ck : cookies) { 
        if ("mcrwayfun".equals(ck.getName())) { 
            cookie = ck;
            break;
         }
    }
    
     if (null != cookie) { 
         // 删除一个cookie
         cookie.setMaxAge(0);
         resp.addCookie(cookie);
    }

那么maxAge设置为负值和0到底有什么区别呢？

maxAge设置为0表示立即删除该Cookie，如果在debug的模式下，执行上述方法，可以看见cookie立即被删除了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 8]  
maxAge设置为负数，能看到Expires属性改变了，但Cookie仍然会存在一段时间直到关闭浏览器或者重新打开浏览器。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 9]

###### 修改或者删除Cookie ######

> HttpServletResponse提供的Cookie操作只有一个addCookie(Cookie cookie)，所以想要修改Cookie只能使用一个同名的Cookie来覆盖原先的Cookie。如果要删除某个Cookie，则只需要新建一个同名的Cookie，并将maxAge设置为0，并覆盖原来的Cookie即可。

> 新建的Cookie，除了value、maxAge之外的属性，比如name、path、domain都必须与原来的一致才能达到修改或者删除的效果。否则，浏览器将视为两个不同的Cookie不予覆盖。

> 值得注意的是，从客户端读取Cookie时，包括maxAge在内的其他属性都是不可读的，也不会被提交。浏览器提交Cookie时只会提交name和value属性，maxAge属性只被浏览器用来判断Cookie是否过期，而不能用服务端来判断。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 10]

> 我们无法在服务端通过cookie.getMaxAge()来判断该cookie是否过期，maxAge只是一个只读属性，值永远为-1。当cookie过期时，浏览器在与后台交互时会自动筛选过期cookie，过期了的cookie就不会被携带了。

###### Cookie的域名 ######

Cookie是不可以跨域名的，隐私安全机制禁止网站非法获取其他网站的Cookie。

> 正常情况下，同一个一级域名下的两个二级域名也不能交互使用Cookie，比如test1.mcrwayfun.com和test2.mcrwayfun.com，因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数为.mcrwayfun.com，这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie

> 一级域名又称为顶级域名，一般由字符串+后缀组成。熟悉的一级域名有baidu.com，qq.com。com，cn，net等均是常见的后缀。  
> 二级域名是在一级域名下衍生的，比如有个一级域名为mcrfun.com，则blog.mcrfun.com和www.mcrfun.com均是其衍生出来的二级域名。

###### 5.1.1、使用 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 11]

###### 5.1.2、缺点 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 12]

###### 5.2、localStorage（手动清除） ######

// 增加一条localStorage
    localStorage.setItem('myCat', 'Tom');
    // 获取localStorage的一条数据
    var cat = localStorage.getItem("myCat");
    // 移除localStorage的一条数据
    localStorage.removeItem("myCat");

> 建议使用try catch封装

###### 5.3、sessionStorage（浏览器关闭自动清除） ######

// 增加一条sessionStorage
    sessionStorage.setItem('myCat', 'Tom');
    // 获取sessionStorage的一条数据
    var cat = sessionStorage.getItem("myCat");
    // 移除sessionStorage的一条数据
    sessionStorage.removeItem("myCat");

> 建议使用try catch封装

###### 5.4、区别 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221022/5f10ec774ca54c4795264263d89d3d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221022/3c35cf273d2648d88aa5c8df668fe458.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: /images/20221022/d1b981a14f924346bec98a4fab12660f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: /images/20221022/8b7ef54c033e48d09870e9f04974ff15.png
[20210321101219724.png]: /images/20221022/b8366a674d824e949abf00ae9ad9f809.png
[20210321101226153.png]: /images/20221022/4961f9a41b2849ed8b8c448f1def49b0.png
[2021032110123424.png]: /images/20221022/113085d37cdf4bea8101ed33efc6e444.png
[20210321101239570.png]: /images/20221022/4dff46e322ed4652a953fbacbf245c1b.png
[20210321101404174.png]: /images/20221022/85f98f8d7bac4ca5b789149b5ebcba6d.png
[20210321101421211.png]: /images/20221022/24b311ee17914a51acdb83bebddffbf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]: /images/20221022/d09f549946e64989b91b28ae9bf47dca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210321102329353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210321102514333.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210321102831675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210321102953244.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210321103011231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210321103040772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2021032109452193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210321094544491.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210321094643752.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70