>### A.今天学什么？
#### 1.正则补充
- ##### 1.1 正则的一些属性
- global -g 是否全文搜索，默认false
- ignore -i 是否忽略大小写，默认false
- test() --> 字符串中是否存在匹配正则表达式的字符串，用来做局部匹配，所以不要加全局搜索
- lastIndex --> 当前表达式匹配内容的最后一个字符的下一个位置
- 如果加了g，全局匹配。会有一个lastIndex属性，用于获取下一个要匹配的下标
```
// body
<body>
<script>
// global -g 是否全文搜索，默认false
// ignore -i 是否忽略大小写，默认false
var str = "hello chunjue LL";
var RE = /l/ig;
console.log(str.replace(RE,"*"));
// test() --> 字符串中是否存在匹配正则表达式的字符串，用来做局部匹配，所以不要加全局搜索
// lastIndex --> 当前表达式匹配内容的最后一个字符的下一个位置
var str2 ="ab";
var RE2 = /[a-z]/;
// 如果加了g，全局匹配。会有一个lastIndex属性，用于获取下一个要匹配的下标
// 匹配a的时候，得到的lastIndex=1，匹配b的时候，得到的lastIndex=2，然而下标为2的地方并没有值，所以返回false
while (RE2.test(str2)){
console.log(RE2.lastIndex); // 1 2
}
</script>
</body>
```
- ##### 1.2 贪婪模式
- 贪婪模式 --> 默认会取量词中最大的值
- 懒惰模式 --> ? 取消贪婪模式 --> 只要符合正则就停下来
```
// body
<body>
<script>
var a = "123456abc";
var RE = /\d{3,6}/;
// 贪婪模式 --> 默认会取量词中最大的值
console.log(a.replace(RE,"*")); // *abc 可以看到，123456一起被替换为*
// 懒惰模式 --> ? 取消贪婪模式 --> 只要符合正则就停下来
var noRE = /\d{3,6}?/;
console.log(a.replace(noRE,"*")); // *456abc
</script>
</body>
```
#### 2.js内置对象--日期
- ##### 2.1方法介绍
- 获得日期对象 --> var oDate = new Date();
- 获得年 --> var year = oDate.getFullYear();
- 获得月 --> var month = oDate.getMonth()+1; 月 getMonth() 月份从0开始，所以要加1
- 获得日 --> var date = oDate.getDate();
- 获得星期 --> var day = oDate.getDay();
- 获得小时、分钟、秒
- var hour = oDate.getHours();
- var minute = oDate.getMinutes();
- var second = oDate.getSeconds();
```
// body
<body>
<script>
var oDate = new Date();
console.log(oDate);
// 年
var year = oDate.getFullYear();
console.log(year);
// 月 getMonth() 月份从0开始，所以要加1
var month = oDate.getMonth()+1;
console.log(month);
// 日
var date = oDate.getDate();
console.log(date);
// 周几
var day = oDate.getDay();
console.log(day);
// 小时 分钟 秒
var hour = oDate.getHours();
var minute = oDate.getMinutes();
var second = oDate.getSeconds();
console.log(hour+":"+minute+":"+second);
</script>
</body>
```
- ##### 2.2 日期对象搭配定时器制作页面时间
```
// body
<body>
<div>
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
<img src="images/0.png" alt="">
</div>
<script>
function showTime() {
var clocks = document.getElementsByTagName("img");
var oDate = new Date();
var hour = oDate.getHours();
var minute = oDate.getMinutes();
var second = oDate.getSeconds();
// 1.将时间变为字符串，拼接起来
// 2.将它们分割成数组
// 3.让allTime中对应的值显示对应的图片
// 如果时、分、秒 < 10，则在数字之前补一个0 --> 比如 09
function add(time) {
if (time < 10){
// 拼接为字符串
return "0"+time;
}
else{
return time+"";
}
}
var allTime = add(hour)+add(minute)+add(second);
console.log(allTime);
for (var i = 0;i < allTime.length;i++){
clocks[i].src = "images/"+allTime[i]+".png";
}
}
// 将显示时间整个封装为一个方法，利用定时器，每秒调用一次方法
// 在一开始就先调用一次showTime()方法
showTime();
setInterval(showTime,1000);
</script>
</body>
```
#### 3.Ajax --> 异步局部刷新页面技术
- ##### 3.1 json数据
- JavaScript Object Notation(JavaScript 对象表示法)
- JSON 是存储和交换文本信息的语法。类似 XML。
- JSON 比 XML 更小、更快，更易解析。
- 例如：{ "data": { "content": "getTest"} }
- json就是一种键值对，key必须双引号引起来
- json对象可以通过 json.key 获得 value值，和obj获得属性一样
- JSON.parse(str) --> 将json格式的字符串转换为json对象
- JSON.stringify(jsonObj) --> 将JSON对象转为字符串。
- ##### 3.2 原生js的Ajax如何使用
- 1.创建ajax的核心对象 --> var xhr = new XMLHttpRequest();
- 2.建立与服务器的连接 --> xhr.open(method,url,true) --> 第一个参数为请求方式，第三个参数是是否异步，默认为异步 true
- 3.向服务器发送请求 --> xhr.send()
- 4.服务器端响应 xhr.onreadystatechange = function (){}
- 状态码要求：xhr.readyState === 4 && xhr.status === 200
- 接收服务器端返回数据 --> var response = xhr.responseText; 得到的是一个字符串
- ##### 3.3 AJAX 状态值(readyState)与状态码(status)详解
- AJAX运行步骤与状态值(readyState)说明
- 在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
- 0 - (未初始化)还没有调用send()方法
- 1 - (载入)已调用send()方法，正在发送请求
- 2 - (载入完成)send()方法执行完成
- 3 - (交互)正在解析响应内容
- 4 - (完成)响应内容解析完成，可以在客户端调用了
- 对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。
- AJAX状态码(status)说明
- 1**：请求收到，继续处理
- 2**：操作成功收到，分析、接受
- 3**：完成此请求必须进一步处理
- 4**：请求包含一个错误语法或不能完成
- 5**：服务器执行一个完全有效请求失败
- 100——客户必须继续发出请求
- 101——客户要求服务器根据请求转换HTTP协议版本
- 200——交易成功
- 201——提示知道新文件的URL
- 202——接受和处理、但处理未完成
- 203——返回信息不确定或不完整
- 204——请求收到，但返回信息为空
- 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
- 206——服务器已经完成了部分用户的GET请求
- 300——请求的资源可在多处得到
- 301——删除请求数据
- 302——在其他地址发现了请求数据
- 303——建议客户访问其他URL或访问方式
- 304——客户端已经执行了GET，但文件未变化
- 305——请求的资源必须从服务器指定的地址得到
- 306——前一版本HTTP中使用的代码，现行版本中不再使用
- 307——申明请求的资源临时性删除
- 400——错误请求，如语法错误
- 401——请求授权失败
- 402——保留有效ChargeTo头响应
- 403——请求不允许
- 404——没有发现文件、查询或URl
- 405——用户在Request-Line字段定义的方法不允许
- 406——根据用户发送的Accept拖，请求资源不可访问
- 407——类似401，用户必须首先在代理服务器上得到授权
- 408——客户端没有在用户指定的饿时间内完成请求
- 409——对当前资源状态，请求不能完成
- 410——服务器上不再有此资源且无进一步的参考地址
- 411——服务器拒绝用户定义的Content-Length属性请求
- 412——一个或多个请求头字段在当前请求中错误
- 413——请求的资源大于服务器允许的大小
- 414——请求的资源URL长于服务器允许的长度
- 415——请求资源不支持请求项目格式
- 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不- 包含If-Range请求头字段
- 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
- 500——服务器产生内部错误
- 501——服务器不支持请求的函数
- 502——服务器暂时不可用，有时是为了防止发生系统过载
- 503——服务器过载或暂停维修
- 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
- 505——服务器不支持或拒绝支请求头中指定的HTTP版本
```
// body
<body>
<div id="text"></div>
<script>
// ajax --> 就是向服务器端取数据的一种技术，能做到页面的局部刷新，是异步的
// json数据，就是一种键值对的数据格式，key必须双引号引起来
var json = {
"name" : "hello world",
"arr" : [1,2,3],
"age" : 19
};
// 如何使用ajax
// 1.创建ajax的核心对象
var xhr = new XMLHttpRequest();
var text = document.getElementById("text");
// 2.建立与服务器的连接
// xhr.open(method,url,true) --> 第一个参数为请求方式，第三个参数是是否异步，默认为异步 true
var url = "https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/getTest";
xhr.open("get",url,true); // true为默认值
// 3.向服务器发送请求 --> xhr.send()
xhr.send();
// 4.服务器端响应 xhr.onreadystatechange = function (){}
// xhr.readyState和xhr.status为其状态码
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
// JSON.parse();将json格式的字符串转为json对象
var response = JSON.parse(xhr.responseText);
console.log(typeof response);
// 获得key为data的value，然后再从value中获得key为content的value
// json可以这样用 --> json.key = value
text.innerHTML = response.data.content;
}
}
</script>
</body>
```
- ##### 3.4 jquery -- ajax
- url --> 请求地址
- type --> 请求方式，默认是'GET'，常用的还有'POST'
- dataType --> 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'等
- async --> 设置是否异步，默认值是'true'，表示异步
- .done(function(data){}) --> 设置请求成功后的回调函数
- .fail(function(){}) --> 设置请求失败后的回调函数
- ##### 3.5 jquery的ajax的get请求
```
// 先要使用script标签引入jquery，可以在百度CDN上查找jquery静态资源引入
地址为：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// body
<body>
<script>
// jquery -- ajax
// url --> 请求地址
// type --> 请求方式，默认是'GET'，常用的还有'POST'
// dataType --> 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'等
// async --> 设置是否异步，默认值是'true'，表示异步
// .done(function(data){}) --> 设置请求成功后的回调函数
// .fail(function(){}) --> 设置请求失败后的回调函数
$.ajax({
url: 'https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/getTest',
type: 'GET',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(JSON.stringify(data));
})
.fail(function() {
alert('服务器超时，请重试！');
});
setTimeout(1000);
// 更加简单的简写方式
var url = "https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/getTest";
$.get(url,function (data) {
console.log(JSON.stringify(data));
}).fail(function () {
alert("服务器超时，请重试！");
})
</script>
</body>
```
- ##### 3.6 jquery的ajax的post请求
```
// body
<body>
<script>
// post 请求方式，更改type即可
$.ajax({
url: 'https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/postTest',
type: 'POST',
dataType: 'json',
data:{'aa':1}
})
.done(function(data) {
alert(JSON.stringify(data));
})
.fail(function() {
alert('服务器超时，请重试！');
});
setTimeout(1000);
// 更加简单的简写方式
var url = "https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/postTest";
// post请求简写时就写 $.post
$.post(url,function (data) {
console.log(JSON.stringify(data));
}).fail(function () {
alert("服务器超时，请重试！");
})
</script>
</body>
```
- ##### 3.7 axios的ajax请求
```
// body
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// post方法同理
var url = "https://www.easy-mock.com/mock/5b3ae0bfd294426e05198b5a/AjaxTest/getTest";
axios.get(url).then(function (succuss) {
console.log(succuss.request.responseText);
}).catch(function (err) {
console.log(err);
})
</script>
</body>
```
#### 4.跨域
- ##### 4.1 script标签实现跨域
- 要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。
- 协议： http or https
- 域名： www.baidu.com or www.hao123.com
- 端口号： https://www.a.com:8080 or https://www.a.com:9090
- img标签的src（获取图片），link 的href（获取css），script 的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。
- 这里要介绍的JSONP就是利用 script 的src来实现跨域获取数据的。
- JSONP实现跨域请求的原理简单的说，就是动态创建 script 标签，然后利用 script 的src 不受同源策略约束来跨域获取数据。
- JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
- script标签，可以跨域请求静态资源等，所以用script实现跨域就是钻这个漏洞
```
<body>
<input type="text" id="song" name="">
<input type="button" id="song_search" value="歌曲搜索" name="">
<br />
<div style="width:300px;height:300px;background:pink" id="song_list">
<ul class="list"></ul>
</div>
<script type="text/javascript" src="../../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// <img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。
// 这里要介绍的JSONP就是利用<script>的src来实现跨域获取数据的。
// JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
// JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
// script标签，可以跨域请求静态资源等，所以用script实现跨域就是钻这个漏洞
// handleResponse 用于处理服务器返回数据，回调函数
function handleResponse(response){
console.log(response.s);
for (var i = 0;i < response.s.length;i++){
var $li = $('<li>' + response.s[i] + '</li>');
$li.insertAfter(".list");
}
}
$("#song_search").on("click",function(){
var keyword=$("#song").val();
if(keyword === undefined || keyword === ""){
alert("歌曲搜索不能为空");
return false;
}else{
// 动态创建<script>标签，设置其src，回调函数在src中设置
// claaback=handleResponse --> 自动调用定义的handleResponse方法对返回的data进行操作
// handleResponse即为回调函数
var url = "https://sug.so.360.cn/suggest?word="+keyword+"&callback=handleResponse";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
}
});
</script>
</body>
```
- ##### 4.2 jquery实现跨域及jquery的几个参数
- dataType(string)
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
- "script": 返回纯文本 JavaScript 代码。
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。开启跨域
- "text": 返回纯文本字符串
- jsonp(string) --> 一般不用，只定义一个jsonpCallback即可
- 回掉函数名的参数名，默认callback，服务端通过它来获取到回掉函数名
- jsonpCallback(string) --> 回掉函数名，默认jquery自动生成
- 指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作，不指定时不能这样做，只能在success里做操作
- 定义jsonp和jsonpCallback后，后端返回数据，需要使用 jsonpCallback的值+"{return json 返回的json }"这样包起来
- 一般使用 String callback = Request.QueryString["callback"].ToString(); 获取，callback即为jsonp的值
- jquery实现跨域，将dataType属性改为jsonp即可
```
// body
<body>
<script>
// jquery跨域，将dataType的属性改为jsonp即可
/**
*@dataType (String)
*"xml": 返回 XML 文档，可用 jQuery 处理。
*"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
*"script": 返回纯文本 JavaScript 代码。"json": 返回 JSON 数据 。
*"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
*"text": 返回纯文本字符串
*/
/**
*@jsonp (String)在一个jsonp请求中重写回调函数的名字。
*这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，
*比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
*/
/**
*@jsonpCallback (String)
*为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
*这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。
*你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
*/
$.ajax({
url:"https://api.douban.com/v2/book/search?q=javascript&count=1",
type:"get",
dataType:"jsonp",
jsonpCallback:"a"
})
.done(function(data){
console.log(JSON.stringify(data));
})
.fail(function(){
console.log('error');
})
</script>
</body>
```
