1.1art-template模板引擎

1、什么是HTML模板

   HTML模板就是一段特定格式的HTML、CSS、JS代码，程序根据这段代码可以重复生成相同风格的页面元素。

2、什么是模板引擎（特指web开发）

   模板引擎是解析模板与数据最终生成标准的HTML文档的一种机制

3、前端模板引擎art-template

   art-template 是一个简约、超快的模板引擎。浏览器版本仅 6KB 大小

1.2 art-template模板语法

标准语法：

{{if user}}

  <h2>{{user.name}}</h2>

{{/if}}

模板配套数据：

{

   user:{name:'my name is art'}

}

1.3 art-template模板配套的数据格式

模板表达的意义：判断如果 user对象存在，则输出user对象中的name属性值

{{if user}}

  <h2>{{user.name}}</h2>

{{/if}}

模板配套数据：

{

   user:{name:'my name is art'}

}

1.4 art-template 解析模板与数据代码

1.5 art-template常见语法

1.输出标准语法

{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

2、条件判断标准语法

{{if value}} ... {{/if}}

{{if value}} ... {{else}}...{{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

{{if v1}} ... {{else if v2}} ...{{else}}... {{/if}}

1.6 art-template常见语法

1、循环输出

{{each target}}

    {{$index}}   <!-- 输出每次遍历的 数组是下标，对象是属性名称  -->

    {{$value}}    <!-- 输出每次遍历的 数组是下标对应的值，对象是属性对应的值 -->

{{/each}}

说明！！：1、target 支持 array 与 object 的迭代

        2、$value 与 $index 可以自定义：{{each target val key}}

1.7 art-template常见语法

1.原文输出：

{{@ value }}

2、配套的数据通常是html字符串

{ value : '<h2>这是art的值</h2>' }

额外：

contentType: false,// 告诉服务器 这个数据是文件 不是 普通的文本

processData: false,// 告诉jq 这个是文件 不是普通的文本

day4

1.1 jQuery文件上传进度功能

1、核心思路：

  1、自定义带有upload.onprogress 进度处理逻辑的XMLHttpRequest对象

  2、改变$.ajax方法内部本身的XMLHttpRequest为带有upload.onprogress 进度处理逻辑的XMLHttpRequest对象

2、核心代码

$.ajax({

     xhr: function () {

     let new_xhr = new XMLHttpRequest();

     new_xhr.upload.onprogress = function (e) {

             if(e.lengthComputable){ // 是否可计算长度

                    e.loaded  //已经上传的长度

                    e.total  // 要上传的总长度

               }                       

      }

        return new_xhr;

      }})

2.1 xhr.timeout设置Ajax请求超时

1、什么是Ajax请求超时

   在指定时间内服务器没有响应Ajax请求，那么这次请求即为超时，默认是0，即没有超时

2、异步对象请求超时处理

let xhr = new XMLHttpRequest();

xhr.open();

xhr.timeout = 500; // 表示服务器在500毫秒之内没有响应则自动终止当前ajax请求

xhr.send();

xhr.onload = function () {}

3.1 HTTP协议

目标：了解Http协议的作用

HTTP：超文本传输协议（Hyper Text Transfer Protocol）

作用：规范了浏览器和服务器的数据交互格式

3.2 HTTP协议的请求报文

目标：了解请求报文的格式

  请求报文：客户端向服务器发送请求时会携带一些基本信息过去，这些信息称为请求报文

  请求报文格式：请求报文需要遵守Http协议的特定格式，这个特定格式叫做请求报文格式

3.2 HTTP协议的请求报文格式

3.3 Http响应状态码

HTTP状态码：由三个十进制数字组成，第一个十进制数字定义了状态码类型，后面两个数字对状态码进行了二级分类

3.4 常见响应状态码说明

2**的状态码表示服务器已经成功处理了请求，常见的状态码为200

3**的状态码，表示服务器要求客户端进行新的URL重定向，需要客户端进一步请求新URL才能完成资源的请求

4**的状态码，表示客户端的请求有非法内容导致本次请求失败，常见的状态码有：

5**的状态码，表示服务器在处理客户端请求时出现了错误，常见的状态码有：

4.1 IP地址

IP地址（Internet Protocol Address）是指互联网协议地址，又译为网际协议地址

格式：xxx.xxx.xxx.xxx 由4组数字组成

每一组数字取值范围0-255包含0和255

每一组数字中间用点分割

IP地址作用：IP地址被用来给链接到网络中的终端设备进行编号，具有唯一性，多个设备之间通讯都是基于IP地址

通俗理解：IP地址好比电话号码，每个电话都需要有一个号码才能打电话，同样的，一台电脑或网络设备需要一个IP地址才能进行通信

IP地址的分类

公有地址（Public address）：通过它直接访问因特网，例如：通过www.ip138.com查出来的地址

私有地址（局域网地址）：专门为组织机构内部使用，例如：192.168开头的IP地址

代表本机地址： 127.0.0.1

4.2 端口

端口：英文是Port表示设备与外界通讯的出口，例如电脑QQ，微信，内网通等软件之间要进行网络通讯都需要用到端口

电脑会为这些软件都分配一个端口。

通俗理解：电脑比作房子的话，那么端口就相当于是出入这个房子的门

端口特点：

端口是通过端口号来标记的，端口号是一个整数，取值范围：0-65535

端口只能被一个软件占用，如果其他软件要使用相同的端口就会冲突

端口通常是配合IP或域名一起使用，例如：http://127.0.0.1:3001  ,www.baidu.com:80

常用端口：

www服务的默认端口是80，一个url地址上如果不带端口，那么默认就是80，例如www.baidu.com 默认就是80

FTP服务的默认端口是21

5.1 同源

什么是同源？

在编程中所谓同源是指：同时满足协议相同、域名(IP)相同、端口相同的两个URL我们就认为它们同源

举例：我们有一个url： http://www.test.com:8080/pages/index.html

与之同源的url：

    http://www.test.com:8080/api/getlist

与之不同源的url：

    file:///C:/pages/index.html 不同源 (协议不同)

    https://www.test.com:8080/pages/index.html (协议不同)

    http://www.abc.com:8080/pages/index.html (域名不同)

    http://www.test.com/pages/index.html (端口不同，不填写端口默认是80)

5.2 同源策略

什么是同源策略？

  浏览器中为了安全，在非同源的两个地址中，浏览器会利用它的同源策略机制限制它们访问一些数据

    同源策略是浏览器本身的一种机制

限制访问数据类型

Cookie、LocalStorage 等无法读取

DOM 无法获得

AJAX 请求在浏览器端有跨域限制

5.3 Ajax跨域错误

用ajax请求http://127.0.0.1:3001/getStudentsJSONP.js就会产生跨域错误提示

$.ajax({

                type: 'GET',

                url: 'http://127.0.0.1:3001/getStudentsJSONP.js'

       })

5.4 Ajax跨域解决方案-JSONP

JSONP跨域：

JSONP所有浏览器均可以使用包括IE6

它只支持GET跨域请求，不支持POST跨域请求

JSOPN需要服务器的支持

JSONP不属于Ajax请求

jQuery实现JSNOP跨域核心代码:

$.ajax({

         type: 'GET',

         url: 'http://127.0.0.1:3001/getStudentsJSONP.js',                     

         dataType: 'jsonp', // 指定dataType类型为jsonp

})

JSONP实现的本质：

通过在网页上添加一个<script>元素去请求服务器地址

服务器将数据用函数+参数格式响应回来

浏览器执行函数，获取参数即为数据

5.5 Ajax跨域解决方案-CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）

特点：

1.新式浏览器都支持该功能，IE浏览器不能低于IE10

2.CORS需要服务器支持

3.由后台程序员在服务器做CORS设置即可

4.整个通信过程都是浏览器自动完成的，不需要前端工程师做任何介入

检验一个Api接口地址是否支持CORS跨域

1.打开浏览器调试工具进入NetWork

2.查看响应报文头中如果有以下必选项的头信息，则表示服务器开启了CORS跨域

   1.Access-Control-Allow-Origin（必选）

   2.Access-Control-Allow-Credentials（可选）

   3.Access-Control-Expose-Headers（可选）

6.1 XML可扩展标记语言

XML：指可扩展标记语言，XML 被设计用来传输和存储数据

XML格式举例：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>

<root>

    <items>

        <item>

            <id>4</id>

            <name>jodan</name>

            <age>21</age>

            <gender>男</gender>

            <zhuanye>ruby</zhuanye>

            <address>白云区</address>

        </item>

    </items>

</root>

6.2 jQuery请求接口获取XML数据并解析

目标：重点掌握通过jquery获取响应回来的数据方式

接口：http://127.0.0.1:3001/getUserNameXML 返回的数据是XML格式的

7.1 jQuery Ajax请求loading效果

loading效果的作用：

   如果网速较慢或者服务器响应较慢的情况下，我们需要提示用户正在请求数据，让用户感觉网页是在工作的，提高使用体验

$.ajax({

    beforeSend:function(XHR){}  // ajax发出请求前 弹出正在加载中

    complete:function(XHR){} // ajax请求完成后，关闭正在加载中提示

})

8.2 防抖-应用

防抖在验证用户名是否可用案例上的应用

案例：

// 1.0 防抖写法步骤1：定义一个变量用来存储setTimeout返回的句柄

            let time = null;

            $('#name').keydown(function () {

                // 3.0 判断前一次的time如果有值，则清除本次settimeout的执行

                if(time !=null){  clearTimeout(time); }

                // 2.0 给句柄赋值

                time = setTimeout(() => {

                    $.ajax({ });

                },500)

            })

什么是节流？

在一定时间内不管触发多少次相同的事件，都只执行第一次的事件

节流的核心代码

// 1.0 定义变量

let timer = null;

// 2.0 如果timer不为空，则表示当前有一个setTimeout的回调函数等待执行，就不再设置新的setTimeout

if (timer) return;

timer = setTimeout(() => {

    // 4.0 执行完毕以后，timer置空，表示下个时间段可以设置新的setTimeout处理逻辑

    timer = null;

}, 时间);