JavaScript学习Day20笔记

Day20笔记

一、class类

// 类名规则首字母大写
class 类名{
    // constructor构造器，固定写法
    constructor(){
        // 构造器中定义固定属性
        this.属性1 = 属性值
    }
    // 方法直接书写
    方法名(){
        // 方法函数中定义属性，也会储存在constructor中
        this.属性2 = 属性值
    }
}
// 必须使用new关键字调用class类。
// 此时class对象就有了该class类的所有属性。
let class对象 = new 类名()
// 通过点语句调用class类中的方法
class对象.方法名()

class类与构造函数的区别

• class类的构造函数，不使用new是没法调用的，会报错，这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
• class不存在变量提升。
• class类里面声明方法，可以省掉function关键字。
• class类在语法上更加贴合面向对象的写法，Class实现继承更加易读，更易于后端开发人员的学习，但是本质上还是语法糖，使用的还是prototype原型的继承方式。

语法糖：之所以叫「语法」糖，不只是因为加糖后的代码功能与加糖前保持一致，更重要的是，糖在不改变其所在位置的语法结构的前提下，实现了运行时等价。可以简单理解为，加糖后的代码编译后跟加糖前一毛一样。之所以叫语法「糖」，是因为加糖后的代码写起来很爽，包括但不限于：代码更简洁流畅，代码更语义自然… 写得爽，看着爽，就像吃了糖。效率高，错误少，老公回家早…

语法盐：主要目的是通过反人类的语法，让你更痛苦的写代码。其实它同样能达到避免代码书写错误的效果，但编程效率应该是降低了，毕竟提高了语法学习门槛，让人咸到忧伤…

二、WEB服务器

web服务器的作用

​ 网络服务的本质就是通过网络调用其他网站的资源，用来放置网站文件，供用户浏览。

web服务器都有哪些

• Apache：简单、速度快、性能稳定、开源免费，并可做代理服务器来使用。
• IIS：微软公司主推的服务器（收费），安全性、强大、灵活。
• Nginx：是一个小巧且高效的HTTP服务器，也可以做一个高效的负载均衡反向代理，通过它接受用户的请求并分发到多个Mongrel进程可以极大提高Rails应用的并发能力。（中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等）
• Tomcat：技术先进、性能稳定、免费。
• Lighttpd：基于BSD许可的开源WEB服务器软件，其根本的目的是提供一个专门针对高性能网站，安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销，CPU占用率低，效能好，以及丰富的模块等特点。支持FastCGI, CGI, Auth, 输出压缩(output compress), URL重写, Alias等重要功能。
• Zeus：是一个运行于Unix下的非常的Web 服务器，据说性能超过Apache，是效率的Web 服务器之一。

三、Nginx服务

目录结构

• conf => 配置文件
• html => 页面（在该文件夹下部署网站）
• logs => 日志
• nginx.exe => 启动程序

启动服务

1. 打开命令窗口（win + r => search(cmd)）。

2. 进入nginx安装目录，执行命令

   start nginx
   

3. 打开浏览器输入localhost或者IP地址，出现Welcome to nginx!页面说明启动成功。

4. 将网站部署到安装目录html子目录下。

5. nginx常用命令

   start nginx  =>  启动nginx
   nginx -s stop  =>  停止nginx
   

四、AJAX通讯技术

Ajax是什么

​ 允许浏览器与服务器通信而无需刷新当前页面的技术（是不需要刷新整个页面，只刷新局部页面的一种异步通讯技术）。

XMLHttpRequest对象

​ XMLHttpRequest对象是Ajax的技术核心。

// 创建XMLHttpRequest对象
let xmr = new window.XMLHttpRequest()

open建立与服务器 的连接

xmr.open(method,URL,async)
// method  =>  'GET'/'POST'
// URL  =>  '请求指定的地址'
// async  =>  参数指定是否使用异步请求  true(默认值)/false

setRequestHeader设置请求头

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// content-type  =>  固定写法，明确传输数据类型
// application/x-www-form-urlencoded  =>  键值对类型
// multipart/form-data  =>  文件
// application/json  =>  JSON字符串

send发送请求

xhr.send(content)
// content  =>  指定请求的参数

onreadystatechange指定回调函数

xhr.onreadystatechange = function(event){
	target = event.target
    if(target.readystate == 4){
        if(target.status == 200){
             target.responseText
        }
    }
    
}
// readystatechange  =>  元素加载状态事件
/* readystate（就绪状态码）  =>  0  XMLHttpRequest对象没有完成初始化
                   			   1  开始发送请求
                   			   2  请求发送完成
                   			   3  服务器开始响应数据，还没有结果
                   			   4  服务器响应数据完成  */
/* status（状态码）  =>  200  服务器相应正常
                        400  无法找到请求资源
                        403  没有访问权限
                        404  访问资源不存在
                        500  服务器内部错误  */
// responseText  =>  获取响应的文本内容，表示一个字符串