JS基础回顾3

时间 2019-11-18

原文原文链接

AJAX

AJAX：（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术

异步：javascript语言是一门“单线程”的语言，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程,不管如何，js作事情的时候都是只有一条流水线（单线程），同步和异步的差异就在于这条流水线上各个流程的执行顺序不一样。

区别：
- 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
- 异步任务指的是，不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

xml可扩展的标记语言,全部的标签都是自定义的,保存数据。(json更好的取代xml)
ajax请求步骤

//1.新建ajax对象
    let ajax = new XMLHttpRequest();
    //2.ajax对象的open()
    //open(请求方式get/post,接口地址,是否异步true异步/false同步)
    ajax.open('get','http://localhost/JS1909/Day%2021/5.phparray.php',true);

    //3.ajax对象的send()
    ajax.send();
    // ajax.readyState:就绪状态--0(初始化) 1(请求创建) 2(发送完成) 3(解析) 4(完成)
    // 0：请求初始化（尚未调用 open()）。
    // 1：请求已经创建，可是尚未发送（尚未调用 send()）。
    // 2：请求已发送，正在处理中（一般如今能够从响应中获取内容头）。
    // 3：请求在处理中；一般响应中已有部分数据可用，可是服务器尚未完成响应的生成。
    // 4：响应已完成；您能够获取并使用服务器的响应了。


    //4.ajax对象的事件--onreadystatechange监听就绪状态是否完成。
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){//请求完成
        //ajax.responseText:ajax请求返回的内容就被存放到这个属性下面,返回获取的内容,string   
            console.log(ajax.responseText);
            console.log(JSON.parse(ajax.responseText));
        }
    }


    //注意：
    //异步：ajax的事件监听，能够放到open或者send上面。
    //同步：无需ajax的事件监听，能够直接在send()以后获取数据。

获取各类数据类型

let ajax=new XMLHttpRequest();
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.xml',true);
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.json',true);
    //ajax.open('get','http://localhost/JS1909/Day%2022/app/data.js',true);
    ajax.open('get','http://localhost/JS1909/Day%2022/app/data.html',true);
    ajax.send();
    ajax.onreadystatechange=function(){
        if(ajax.readyState===4){
            //console.log(ajax.responseXML);//返回xml文档
            //1.xml文档
            // let xmldoc=ajax.responseXML;
            // console.log(xmldoc.querySelector('bookname').innerHTML);

            //2.json文件
            // let jsondata=ajax.responseText;
            // console.log(JSON.parse(jsondata));

            //3.js文件
            // let jsdata=ajax.responseText;
            // console.log(jsdata);

            //4.html文件
            // let htmldata=ajax.responseText;
            // console.log(htmldata);

            //5.经常使用的数据文件--.php .jsp .xml

            


        }
    }

ajax局部更新

//局部更新：经过定时器不断发送请求。
    //刷新：全局更新。
    setInterval(function () {
        let ajax = new XMLHttpRequest();
        ajax.open('get', 'http://localhost/JS1909/Day%2022/php/news.php', true);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                console.log(ajax.responseText);
                let newsdata = JSON.parse(ajax.responseText); //数组
                let strhtml = '<ul>';
                for (let value of newsdata) {
                    strhtml += `
                    <li>
                        <a href="#">${value.title}</a><span>${value.date}</span>
                    </li>
                `;
                }
                strhtml += '</ul>';
                document.querySelector('.news').innerHTML = strhtml;
            }
        }
    }, 1000);


    //network:先后端交互最核心的信息面板。

前端发送数据

form+submit+name将表单的数据给后端--适合表单
- 后端直接经过name值获取表单里面的数据
- 设置action和method
- action:数据提交给的页面地址
- method:数据提交的方式,默认是get方式
ajax方式:表单中的某个值，非表单的数据
- get传输数据:将数据经过?和&符号拼接在地址栏的后面
- post传输数据：直接放到send方法里面

post和get的区别

get:不安全,数据会暴露在地址栏,长度有限制
post:安全性高，经过头文件传输,长度能够自由设置
get和post：发送数据的方式不同，get拼接在地址栏的后面，post经过设置请求头实现,将数据放到send里面

http状态码

ajax.status:获取http的状态码
200 OK 请求已成功，请求所但愿的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
304 Not Modified 文档的内容（自上次访问以来或者根据请求的条件）并无改变，则服务器应当返回这个状态码。
404 Not Found请求失败，请求所但愿获得的资源未被在服务器上发现。
403 Forbidden 服务器已经理解请求，可是拒绝执行它。
301 Moved Permanently 被请求的资源已永久移动到新位置。
302 Move Temporarily请求的资源临时从不一样的 URI响应请求。
501 Not Implemented 服务器不支持当前请求所须要的某个功能。
502 Bad Gateway 做为网关或者代理工做的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable 因为临时的服务器维护或者过载，服务器当前没法处理请求javascript

容错处理
try...catch...finally
先执行 try { ... }的代码,若是try里面的代码出错，转而执行 catch (e) { ... }代码，最后执行 finally { ... }代码

// try{
    //     alert(a);
    // }catch(e){//e:try里面的报错信息。
    //     alert('catch');
    //     alert(e);//ReferenceError: a is not defined
    // }finally{
    //     alert('个人代码必定会触发，无论try仍是catch有错');
    // }

JSON.parse和eval的区别

JSON.parse():将json格式的字符串转换成对象(数组for...of和对象for...in),具备json格式检测功能
eval:方法不会去检查数据是否符合json的格式，同时若是给的字符串中存在js代码eval也会一并执行，比较而言，eval方法是很危险的

跨域

跨域的报错信息

Access to XMLHttpRequest at 'http://api.k780.com/?app=weather.future&weaid=hangzhou&&appkey=43633&sign=3050bb4c62ee490c994d41b450b65ba1&format=json' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

为何产生跨域：浏览器的同源策略
同源策略：同源策略是浏览器最核心也最基本的安全功能.

同源策略阻止从一个域上加载的脚本获取或操做另外一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前Web页面的域相同。同源策略是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，则浏览器的正常功能可能都会受到影响。能够说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

哪些状况会出现跨域

端口不一样。
协议不一样http/https
域名和域名对应的ip地址 127.0.0.1本地ip localhost本地域名
一级域名和二级域名。
域名彻底不一样。

解决跨域

后端代理
- 后端不存在跨域，由于后端脱离浏览器。后端先获取接口的数据，传给前端
```
// let ajax1 = new XMLHttpRequest();
// ajax1.open('get','http://localhost/JS1909/Day%2023/joke.php',true);
// ajax1.send();
// ajax1.onreadystatechange = function () {
// if (ajax1.readyState === 4) {
// console.log(JSON.parse(ajax1.responseText));
// document.body.innerHTML=JSON.parse(ajax1.responseText).content;
// }
// }

- cors(xhr2：xhr升级版):跨域资源共享

let ajax2 = new XMLHttpRequest();
ajax2.open('get', 'http://127.0.0.1/JS1909/Day%2022/php/taobaodata.php', true);//ip和域名跨域
ajax2.send();
ajax2.onreadystatechange = function () {
    if (ajax2.readyState === 4) {
       console.log(ajax2.responseText);
    }
}

- jsonp
  - 原理：script里面src属性 不存在跨域
  - jsonp:json with padding  json数据填充到一个函数里面
    - script里面src属性 不存在跨域。
    - jsonp请求方式采用的是get方式,回调函数。
    - jsonp:适合第三方接口的数据格式就是jsonp格式的。
#### 回调函数
1. 回调函数(高阶函数):函数作参数，传递给另一个函数。callback
2. 为何使用回调函数
- js代码正常状况下按照顺序执行的。回调函数解决顺序问题。(同步顺序，异步顺序)
- 函数是对象，函数能够当作参数被传递
#### promise
- Promise:是异步编程的一种解决方案，比传统的回调函数和事件要更合理，更强大
1. 三种状态：pending（进行中）/resolved（完成）/rejected（失败）
2. promise的api
- Promise.resolve()的做用将现有对象转为Promise对象resolvedl
- Promise.reject()也是返回一个Promise对象,状态为rejected
- then()成功的回调
- catch()发生错误的回调函数
- Promise.all()适合用于全部的结果都完成了才去执行then（）成功的操做
- Promise.race()的做用也是同时执行多个实例，只要有一个实例改变状态，Promise就改成那个实例所改变的状态
#### cookie
- Cookie又叫会话跟踪技术是由Web服务器保存在用户浏览器上的小文本文件，它能够包含相关用户的信息
- cookie的特色
  - 禁用Cookie后，没法正常注册登录
  - cookie是与浏览器相关的，不一样浏览器之间所保存的cookie也是不能互相访问的
  - Cookie能够被删除。由于每一个cookie都是硬盘上的一个文件
  - cookie安全性不够高-xss攻击
- localStorage sessionStorage cookie的区别
  - 首先总的来讲，三者都是用于持久化数据存储的手段，都是存储在浏览器端，且同源（协议，端口号，都域名相同）
  - localStorage和sessionStorage都是Web存储，大小5M左右，彻底存储在客户端，它们是由于本地存储数据而存在
  - cookies也是存储在浏览器端的，大小不超过4k，由Web服务器保存在用户浏览器上的小文本文件
  - localStorage属于永久性存储，而sessionStorage属于当会话结束(关闭浏览器)的时候，存储的值会被清空，而cookie是经过设置过时时间来存储的

- 添加cookie

// document.cookie=‘key = value ; expires=过时时间’;
// document.cookie='name=zhangsan';
// document.cookie='age=100';

- 获取cookie

addcookie('name','zhangsan',10);
addcookie('age','100',10);
addcookie('sex','男',10);
//获取cookie
// document.cookie
//alert(document.cookie);//name=zhangsan; age=100; sex=男

- 删除cookie

// 将cookie的过时时间设为一个过去的时间。
function delcookie(key){
    addcookie(key,'',-1);
}

delcookie('age');
delcookie('sex');

#### 闭包

- 浏览器垃圾回收机制的原理：变量使用完成，变量被销毁，函数一旦执行完成，函数内部的变量就不存在了，被销毁了
- 闭包的概念：函数嵌套函数(定义在一个函数内部的函数)。对于函数内部的变量造成闭合的做用域

// (function(){//闭包的写法：对于函数内部的变量造成闭合的做用域。
//     var a=1;
// })();

- 闭包的造成：与变量的做用域以及变量的生存周期密切相关，变量的做用域，就是指变量的有效范围
- js对变量生命周期的规则
  - 生存周期对于全局变量是永久的，除非咱们主动销毁这个全局变量。(垃圾回收机制)
  - 而对于在函数内用 var 关键字声明的局部变量来讲，当退出函数时，它们都会随着函数调用的结束而被销毁
- 闭包就是可以读取其余函数内部变量的函数。(函数嵌套函数,定义在一个函数内部的函数)
- 闭包的特色
  - 在一个函数内部定义另一个函数，而且返回内部函数或者当即执行内部函数
  - 内部函数能够读取外部函数定义的局部变量
  - 让局部变量始终保存在内存中。也就是说，闭包可使得它诞生环境一直存在
- 闭包的弊端：函数内部的变量始终保存在内存中，形成浏览器的垃圾回收机制失败。常驻在内存中，影响性能。手动销毁进而会引发IE浏览器的内存泄漏
- 内存泄漏：每个变量都会绑定一个使用次数的计数器，当这个变量的使用次数为0，垃圾回收机制将其回收，若是说垃圾回收机制又没法回收，称之为内存泄漏。

#### 原型链
- 原型链:实例对象和原型之间的链接
- prototype属性：每个函数都有一个prototype原型属性
- __proto__属性：每个对象都有一个__proto__原型属性,指向构造函数的原型
- instanceof:判断一个对象是不是一个构造函数（类）的实例,返回布尔值
- constructor:构造函数，js的属性，获取实例对象的构造函数
- hasOwnProperty():看是否是对象自身下面的属性， 只在属性存在于实例中时才返回 true。 (不是经过原型链继承的)
- in操做符，和hasOwnProperty同样的意义，包括继承的
- typeof instanceof constructor toString 都能进行类型检查，最好的是toString

Object.prototype.toString.call(3) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"php

```html

模式

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点

实现的方法通常是先判断实例存在与否，若是存在直接返回，若是不存在就建立了再返回，这就确保了一个类只有一个实例对象

惰性单例：指的是在须要的时候才建立对象实例。惰性单例是单例模式的重点，这种技术在实际开发中很是有用
组合模式：将对象组合成树形结构以表示“部分-总体”的层次结构

组合模式就是用小的子对象来构建更大的对象，而这些小的子对象自己也许是由更小的“孙对象”构成的
组合模式使得用户对单个对象和组合对象的使用或者操做具备一致性

发布/订阅模式

又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，全部依赖于它的对象都将获得通知。

工厂模式

是为了解决多个相似对象声明的问题;也就是为了解决实列化对象产生重复的问题
优势：能解决多个类似的问题
缺点：不能知道对象识别的问题(对象的类型不知道)
弊端：没法解决识别问题。对象来自于Object。(代码中可见的)

代理模式：是为一个对象提供一个代用品或占位符，以便控制对它的访问
适配器模式：做用是解决两个软件实体间的接口不兼容的问题。使用适配器模式以后，本来因为接口不兼容而不能工做的两个软件实体能够一块儿工做

适配器模式是一种“亡羊补牢”的模式，没有人会在程序的设计之初就使用它。由于没有人能够彻底预料到将来的事情

JS基础回顾3

AJAX

容错处理

JSON.parse和eval的区别

跨域

模式