JS
三十二、正则表达式
//1.字面量
var reg = /abc/
//2.内置构造函数
var reg2 = new RegExp("abc")
console.log(reg2)
mytext.onblur = function(){
console.log(reg.text(mytext.value))
//检查是否包含"abc"
}
（一）元字符
1、基本元字符
//1. \d 一位数字（0~9）
var reg = /\d\d/ //包含两个
//2. \D 一位非数字
var reg = /\D\D/ //包含两个
//3. \s 一位空白 （空格 缩进 换行）
var reg = /\s/
//4. \S 一位非空白
var reg = /\S/
//true
console.log(reg.text("12 3a"))
//false
console.log(reg .test( " ")//空格
console.log(reg.test( "\n\n\n"))
console.log(reg .test(" ")//TAB
//5. \w 字母 数字 下划线
var reg = /\w/
//6. \W 非字母 数字 下划线
var reg = /\W/
//7. "."任意内容（换行不算）
var rag = /./
//8. "\"转义字符
var reg = /\d\.\d/ //1.2 2.3
2、边界符
// ^ 开头边界
var reg = /^\d/ //开头必须是数字
// $ 结尾边界
var reg = /\d$/
// ^开头结尾$
3、限定符
//1. * 重复0~多次
var reg = /\d*/
//2. + 1~多次
var reg = /\d+/
//3. ? 0~1
var reg = /\d?/
//4. {n} 指定次数
var reg = /\d{3}/ //等于var reg = /\d\d\d/
//5. {n,} 等于>=n
// {n,m} 等于>=n,<=m
{}只能修饰紧挨着它的字符，要用到 ^开头结尾$
4、特殊符号
//1. () 整体
var reg = /(abc){2}/
//2. | 或 ，
var reg = /a|b/
var reg2 = /abc|def/
//3. [] 代表1个
var reg = /[abcdefg]{3,5}/ //限制3到5个
console.log(reg.text("xa")) // xa中只要一个字符与上面相匹配就true
//4. [a-zA-Z0-9_] \w
// [0-9] \d
// [^abc] //取反
var reg = /[^abc]/
console.log(reg.text("a")) //false
console.log(reg.text("xyz")) //true
（二）捕获exec
//text()
//exec() 捕获片段
var datestr = "time is 2029-01-01 12:20:20"
var reg = /\d{4}-\d{1,2}-\d{1,2}/
var newdatestr = reg.exec(datestr)
console.log(newdatestr[0].split("-").join("/"))
//标识符 g i
var datestr = "time is 2029-01-01 12:20:20 to 2029-11-01 12:20:20"
var reg = /\d{4}-\d{1,2}-\d{1,2}/g //从懒惰=>积极(懒惰：一直从头开始识别)
var newdatestr1 = reg.exec(datestr)
console.log(newdatestr1)
var newdatestr2 = reg.exec(datestr)
console.log(newdatestr2)
var newdatestr3 = reg.exec(datestr)
console.log(newdatestr3)
var reg = /(\d{4})-(\d{1,2})-(\d{1,2}) //加括号为单独捕获
var myreg= /[a-z]/i //i忽略大小写
console.log(myreg.test("AA"))
console.log(myreg.exec("AA"))
（三）两大特性
1.懒惰
可以使用全局标识符解决
2.贪婪
var reg = /d{1,4}/
console.log(reg.exec("aa123456bb"))
//得：1234
3.非贪婪
var reg = /d{1,4}/?
console.log(reg.exec("aa123456bb"))
（四）正则与字符串方法
//正则.test(字符串)
//正则.exec(字符串)
//字符串.replace search match
//replace
var str = "adearfa"
var newstr = str.replace(/a/g,"*")
console.log(newstr) //得 *ad*rf*
//search
console.log(str.search("a"))
console.log(str.search(/a/)) //用g也只能查一个
console.log(str. search(/ax/))
//match 捕获内容
（*五）密码强度验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
form {
width: 500px;
padding: 20px;
border: 3px solid #333;
margin: 50px auto;
}
form > label {
width: 100%;
height: 70px;
}
form > label > input {
width: 100%;
box-sizing: border-box;
padding-Left: 30px;
font-size: 20px;
height: 50px;}
form > p {
width: 100%;
margin-top: 10px;
dispLay: flex;
justify-content: space-between;
}
form > p > span {
width: 30%;
background-color:#ccc;
coLor: #fff;
height: 30px;
font-size: 20px;
line-height: 30px;
text-align: center;
}
form > p > span:nth-child(1).active {
background-coLor: red;
}
form > p > span:nth-child(2).active {
background-coLor: orange;
}
form > p > span:nth-child(3).active {
background-color: green;
}
</style>
<body>
<form>
<label>
<input type="text">
</label>
<p>
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</form>
<script>
var oinput = document.querySelector("input")
var ospan = document.querySelectorAll("span")
var reg1 = /\d/
var reg2 = /[a-z]/i
var reg3 =/[!@#$%^&*()]/
oinput.oninput = function(){
// console.log(this.value)
var level = 0
if(reg1.test(this.value)) level++
if(reg2.test(this.value)) level++
if(reg3.test(this.value)) level++
for(var i=0;i<ospan.length;i++){
ospan[i].classList.remove("active")
if(i<level){
ospan[i].classList.add("active")
}
}
}
</script>
</body>
</html>
三十三、this指向
//this关键字
//this谁调用我，this就指向谁(es6箭头函数)
fuyun = this
//全局
//console.log(this)
function test(){
console.log(this)
}
window.test()
//对象
var obj = {
name : "kerwin",
test:function(){
console.log("11111",this.name)
}
}
obj.tes()
// setTimeout
setTimeout(function(){
console.log(11111,this)
},2000)
setInterval(function(){
console.log(11111,this)
},2000)
//事件绑定的this
box.onclick = function(){
console.log(this.innerHTML)
}
三十四、改变this指向
var obj1 = {
name : "obj1",
getName : function(){
console.log("getName1",this.name)
}
}
var obj2 = {
name : "obj2",
getName : function(){
console.log("getName2",this.name)
}
}
//call 执行函数，并改变this执行为函数的第一个参数
// 支持多个参数
obj1.getName.call(obj2,1,2,3)
//apply 执行函数，并改变this执行为函数的第一个参数
// 两个参数，第二个参数是数组
obj1.getName.apply(obj2,[1,2,3])
//bind 改变this执行为函数的第一个参数,不会自动执行第一个函数
//支持多个函数
var fun1 = obj1.getName.bind(obj2,1,2,3)
console.log(fun1)
fun1() //收到执行
三十五、ES6
– 我们所说的ES5和ES6其实就是在js 语法的发展过程中的一个版本而已
– ECMAScript就是js的语法
。以前的版本没有某些功能
。在ES5这个版本的时候增加了一些功能。在ES6这个版本的时候增加了一些功能
– 因为浏览器是浏览器厂商生产的
。ECMAScript 发布了新的功能以后，浏览器厂商需要让自己的浏览器支持这些功能
。这个过程是需要时间的
。所以到现在，基本上大部分浏览器都可以比较完善的支持了
。只不过有些浏览器还是不能全部支持
。这就出现了兼容性问题
。所以我们写代码的时候就要考虑哪些方法是ES5或者ES6的，看看是不是浏览器都支持
（一）定义变量
let(变量)和const(常量)关键字
– 我们以前都是使用var关键字来声明变量的
– 在ES6的时候，多了两个关键字let和const，也是用来声明变量的
– 只不过和var有一些区别
1.必须先定义再使用
2.变量重名
3.块级作用域
（let可以用在选择卡上）
（二）箭头函数
var text = () => {}
/*
1.()里只有一个形参的时候，可以省略
2.{}只有一句代码，只有返回值,和return的时候可以省略
3.没有arguments
4.箭头函数没有this，
箭头函数this是父级作用域的
*/
var test = a => 100*a
console.log(test(10))
var list =[ "aaa" , "bbb" , "ccc"]
var newlist = list.map(item=>`<li>${item}</li>`)
console.log(newlist.join(""))
//函数的默认参数
function test(a=1,b=2){
return a+b
}
console.log(test(10,20))//a=10,b=20
console.log(test())//默认传a=1,b=2
（三）解构赋值
//快速的从对象和数组中获取里面的成员
var arr =[ "xiaoming" ,"teichui" , "shanzhen"]
// arr[arr.length-1]
let [x,y,z]= arr
console.log(x,y,z)
var a = 18
var b = 20
var [b,a]= [a,b]
console.log(a,b)
var arr2 = [1,2,[3,4,[5]]]//多维度数组
//console.log(arr2[2][2][O])
var [q,w,[e,r,[t]]] = arr2
var obj = {
name : "kerwin",
age: 100,
location : "dalian"
}
Let fname,age,location:mylocation} = obj
document.write(name)
document.write(age)
document.write(mylocation)
（四）对象简写
//登录
<input type="text" id="myusername">
<input type="password" id="mypassword">
<button id="mybtn">login</button>
<script>
mybtn.onclick = function () {
Let username = myusername.value
Let password = mypassword.value
console.log(username,password)
var obj = {
username,
password
}
console.log("发给后端的结构" ,obj)
}
</script>
（五）展开运算符
//... 展开数组
var a =[1,2,3]
var b = [4,5,6]
var c=[...a,...b] //得1,2,3,4,5,6
console.log(c)
//... 复制
var a =[1,2,3]
var b = [...a]
b[0] = "fuyun"
//... 参数-实参-形参
var test = function(...arr{
//箭头函数也可以
console.log(arr)
}
test(1,2,3,4,5)
var arr =[1,2,3]
var test = function(a,b,c){
console.log(a,b,c)
}
test(...arr)
var arr =[1,2,3.5,3,6,4,8] //数不清[]里的数时
var res =Math.max(...arr)
console.log(res)
//...伪数组转换
function test(){
var arr = [...arguments]
console.log(arr)
test(1,2,3,4,5)
var oli = document.queryselectorAll("li") console.log(oli.filter)
var oliarr = [...oli]
console.log(oliarr.filter│
//...对象
var obj1 = {
name : "kerwin",
age: 100
}
var obj2 = {
name : "tiechui",
location: "dalian"
}
var obj= {
...obj1,
...obj2
}
console.log(obj)
// 后面的name会覆盖前面的
//重新渲染页面
render(newobj)
（六）模块化语法
webpack
模块化
1.私密不漏
创建文件夹
//JS中：
//导出
export{
A1,A2
}
//html中：
<script type="module"> //文件夹名称
import {A1,A2,test,A_A}from './module/A.js'
2.重名不怕
<script type="module">
import {A1,A2,test as A_test}from './module/A.js '
import {B1,B2,test as B_test}from './module/B.js '
A1()
A2()
A_test()
A_test()
</script>
3.依赖不乱
//html
<script src="./ module/C.js" type="module"></script>
//JS
<script type="module">
import {A_A}from './A.js'
import {B_B}from './B.js'
A_A()
B_B()
function C(){
console.log("CC")
}
</script>
//默认导出
export default C
（七）class*
class CreateObj {
//构造器函数
constructor(name){
this.name =name
}
say(){
console.log (this.name,"hello")
}
}
var obj = new CreateObj("kerwin")
console.log(obj)
（八）ES6继承
<script>
//父类
class Person {
constructor(name,age){
this.name = name
this.age = age
}
say(){
console.log(this.name,"hello")
}
}
//子类
//extends 原型继承
class Student extends Person{
constructor(name,age,grade){
super(name,age) // Person.call(this,name,age)
this.grade = grade
}
say(){
super.say() //语法糖
console.log(this.name,"你好")
}
}
var obj = new Student("zzy",100,100)
console.log(obj)
obj.say()
</script>
三十六、面向对象
– 首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式
– 面向:面(脸)，向(朝着)
– 面向过程:脸朝着过程=》关注着过程的编程模式
– 面向对象:脸朝着对象=》关注着对象的编程模式
– 实现一个效果
。在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。
。在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果
– 我们以前的编程思想是，每一个功能，都按照需求一步一步的逐步完成
（一）创建对象的方式
– 因为面向对象就是一个找到对象的过程
– 所以我们先要了解如何创建一个对象
调用系统内置的构造函数创建对象
– js给我们内置了一个Object构造函数
– 这个构造函数就是用来创造对象的
工厂函数
function createobj(name){
var obj={}
obj.name =“name"
obj.material = []
return obj
}
var obj1 = createobj("阿巴阿巴")
console.log(obj1)
自定义构造函数
function createObj(name){
this.name = name
this.material = []
this.cook = function(){
}
}
var obj1 = new createobj("蒸羊羔")
//new使得函数变为自定义
console.log(obj1)
（二）构造函数注意问题
1、首字母大写
2、构造函数不写return
3、构造函数能当普通函数用
this指向
（*三）面向对象的原型
<div class="box1">
<h1></h1>
<ul></ul>
</div>
<div>
<h1></h1>
</div>
<script>
var data1 = {
title:"体育"，
list:["体育-1","体育-2","体育-3"]
}
var data2 = {
title:"综艺",
list:["综艺-1","综艺-2","综艺3"]
}
function CreateList(select,title,List){
this.ele = document.querySelector(select)
this.title = data.title,
this.list = data.list
this.render = function(){
//渲染页面
var h1 = this.ele.querySelector("h1")
var ul = this.ele.queryselector("ul")
}
}
var obj1 = new CreateList(".box1",data1.title,data1.list)
obj1.render()
</script>
//09:54
（*四）选项卡
//JS:
functipn Tabs(select,type) {
var container = document.queryselector(select)
this.oHeaderitems = container.queryselectorAl1( ".header li")
this.oBoxItems = container.queryselectorAll(".box li")
this.type = type
this.change()
}
Tabs.prototype.change = function(){
for (let i = 0; i < this.oHeaderItems.length; i++) {
//自定义属性
this.oHeaderItems[i].addEventListener(this.type,() =>{
var index = i
for (var m = 0; m< this.oHeaderitems.length; m++){
this.oHeaderItems[m].classList.remove( "active")
this.oBoxItems[m].classList.remove( "active")
}
this.oHeaderItems [ index].classList.add( "active")
this.oBoxItems[index].classList.add( "active")
})
}
}
export default Tabs
//html:
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.header{
display: flex;width: 500px;
}
.header li {
flex:1;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.box {
position: relative;
height: 200px;
}
.box li {
position: absolute;
left:0;
top:0;
width: 500px;
height: 200px;
background-coLor: yellow;
display: none;
}
.header .active{
background-color: red;
}
.box .active{
display: block;
}
</style>
<body>
<div class="container1">
<ul class="header">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="box">
<li class="active">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
<div class="container2">
<ul class="header">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="box">
<li class="active">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</div>
<script type="module">
import MyTabs from './Tabs.js'
new Tabs(".container1","click")
new Tabs(".container2","mouseover")
</script>
</body>
（五）面向对象-继承
<script>
//构造函数继承
function Student(name,age,classroom){
Person.call(this,name,age)
this.classroom = classroom
}
//原型继承
Student.prototype = new Person()
//组合继承
//构造函数继承+原型继承
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.say = function(){
console.log("hello")
}
function Student(name,age,classroom){
Person.call(this,name,age)
this.classroom = classroom
}
Student.prototype = new Person()
var obj = new Student("zyy",100,"2班")
</script>
三十七、前后端交互
利用form表单提交数据
三十八、ajax
利用form表单提交数据会导致每提交一次刷新一次页面，
为了提高交互体验而使用ajax
//1. 创建XHR new XMLHttpRequest()
var xhr = new XMLHttpRequest()
console.log(xhr)
//2.配置open（请求方式，请求地址，是否异步）
//localhost本机域名 127.0.0.1本机ip
//baidu是百度网站的域名
xhr.open("GET","http://127.0.0.1:5500/%E5%AD%A6%E4%B9%A0/ajax/1.text");
//3.send
xhr.send();
//接受数据，注册一个事件
//第一种方式
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && xhr.status===200){// 或者/^2\d{2|$/.test(xhr.status)
}else if(xhr.readyState===4 && xhr.status===404){
console.error("没有这个网站");
location.href="404.html"
}
}
//第二种方式
xhr.onload=function(){
if(xhr.status===200){
document.write(xhr.responseText);//提交获取到的信息
}else if(xhr.status===404){
console.error("没有这个网站");
}
}
（*一）ajax案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
button{
width: 100px;
height: 100px;
}
</style>
<body>
<button id="get">get</button>
<button id="post">post</button>
<button id="put">put</button>
<button id="patch">patch</button>
<button id="delete">delete</button>
<script>
var get=document.getElementById("get");
var post=document.getElementById("post");
var put=document.getElementById("put");
var patch=document.getElementById("patch");
var odelete=document.getElementById("delete");
get.onclick=function(){
var xhr=new XMLHttpRequest();
xhr.open("get","http://localhost:3000/list",true);
//xhr.open("get","http://localhost:3000/user?id=3",true);//获取id为三的信息
xhr.send();
xhr.onload=function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText));
//render(JSON.parse(xhr.responseText))
}else{
console.log("error",xhr.responseText);
}
}
}
post.onclick=function(){//提交数据不会覆盖数据
var xhr=new XMLHttpRequest();
xhr.open("post","http://localhost:3000/user",true);
//form编码 `name=xiaoming&age=18`
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//xhr.send(`name=xiaoming&age=18`);
//JSON{"name":"xiaoming","age"=18}
xhr.setRequestHeader("content-type","application/json");
xhr.send(JSON.stringify({"name":"daming","age":18}));
xhr.onload=function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText));
//render(JSON.parse(xhr.responseText))
}else{
console.log("error",xhr.responseText);
}
}
}
put.onclick=function(){//修改数据，并且覆盖原数据
var xhr=new XMLHttpRequest();
xhr.open("PUT","http://localhost:3000/user/3",true);
//form编码 `name=xiaoming&age=18`
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//xhr.send(`name=xiaoming&age=18`);
//JSON{"name":"xiaoming","age"=18}
xhr.setRequestHeader("content-type","application/json");
xhr.send(JSON.stringify({"age":88}));//把之前的数据覆盖掉了，name没有了，只有age
xhr.onload=function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText));
//render(JSON.parse(xhr.responseText))
}else{
console.log("error",xhr.responseText);
}
}
}
patch.onclick=function(){//必须大写
var xhr=new XMLHttpRequest();
xhr.open("PATCH","http://localhost:3000/user/1",true);
xhr.setRequestHeader("content-type","application/json");
xhr.send(JSON.stringify({"age":88}));//只修改age，属于补丁修改
xhr.onload=function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText));//{id: 1, name: 'js', age: 88}
//render(JSON.parse(xhr.responseText))
}else{
console.log("error",xhr.responseText);
}
}
}
odelete.onclick=function(){
var xhr=new XMLHttpRequest();
xhr.open("delete","http://localhost:3000/user/2",true);//将id为二的对象删除了
xhr.send();
xhr.onload=function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText));
//render(JSON.parse(xhr.responseText))
}else{
console.log("error",xhr.responseText);
}
}
}
function render(){
}
</script>
</body>
</html>
//ctrl+shift+s停止服务器
//ctrl+shift+r恢复服务器+
（二）ajax同步异步
<script>
var xhr = new XMLHttpRequest()
xhr.open("GET", "1.json", true)
//true 表示异步请求
//false表示同步请求
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText)
}
}
xhr.send()
console.log("11111111111111111111")
</script>
（三）请求方式1
<script>
//form get post
//ajax
/*
get 偏向获取数据
post 偏向提交数据
put 偏向更新（全部）{name:"kerwin",age:100}
delete 偏向删除信息
patch 偏向部分修改
header
options
connnect
*/
</script>
（四）请求方式2
<button id="myget">get</button>
<button id="mypost">post1</button>
<button id="myput">put</button>
<button id="mypatch">patch</button>
<button id="mydelete">delete</button>
<script>
myget.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open("GET","http://localhost:3000/users?username=gangdaner&password=123")
xhr.onload = function(){
if(xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
xhr.send()
}
mypost.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open("POST","http://localhost:3000/users")
xhr.onload = function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
//提交 信息
//post name=kerwin&age=100
//post {"name":"kerwin"}
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
// xhr.send(`username=shanzhen&password=456`)
xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
xhr.send(JSON.stringify({
username:"ximen",
password:"789"
}))
}
myput.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open("PUT","http://localhost:3000/users/1")
xhr.onload = function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
//提交 信息
//post name=kerwin&age=100
//post {"name":"kerwin"}
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
// xhr.send(`username=shanzhen&password=456`)
xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
xhr.send(JSON.stringify({
username:"ximen11111111",
password:"123456"
}))
}
mypatch.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open("PATCH","http://localhost:3000/users/2")
xhr.onload = function(){
if(/^2\d{2}$/.test(xhr.status)){
console.log(JSON.parse(xhr.responseText))
}
}
//提交 信息
//post name=kerwin&age=100
//post {"name":"kerwin"}
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
// xhr.send(`username=shanzhen&password=456`)
xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
xhr.send(JSON.stringify({
username:"xiaoming11111111",
}))
}
mydelete.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open("DELETE","http://localhost:3000/users/1")
xhr.onload = function(){
if(xhr.status===200){
console.log(JSON.parse(xhr.responseText))
}
}
xhr.send()
}
</script>
（五）ajax封装
//回调函数来封装
ajax({
url:"http://localhost:300/users",
method:"GET",
async:true
data:{
username:"kerwin",
password:"123"
}
headers:{}
success:function(res){
console.loh(res)
}
error:function(err){
console.log(err)
}
})
//捕获错误
try {
Let result = JSON.parse("111111111&22222222")
success(result)
}catch|(err){
//error（'解析失败！因为后端返回的结果不是 json 格式字符串’）
}
//设置请求头内的信息
for (Let k in headers) xhr.setRequestHeader(k, headers[k])
// if (/get$/i.test(method)) {
// xhr.send()
// } else {
xhr.send(data)
//
//}
xhr.send(data)
（*六）ajax案例
<script src="./js.js" type="module">
import pajax from './js.js';
var obj = new url(location.href);
var id=obj.seacherParams.get("id");
class detail{
constructor(id){
this.id=id;
this.init();
}
async init(){
var info= await this.getlist();
this.renderHTML(info);
}
async getlist(){
var res = await fetch(`http://……`)
var info=await res.json()
return info;
}
renderHTML(info){
var {title,price,feature,desc}=info;
var oh1 =document.querySelector('h1');
var ofeature =document.querySelector('.feature');
var oprice =document.querySelector('.price');
var olist =document.querySelector('.list');
oh1.innerHTML=title;
ofeature.innerHTML=feature;
oprice.innerHTML=`价格：${price}`;
olist.innerHTML=desc.map(item=>{
`<li>
<img src="${item}">
</li>`
})
}
}
new detail(id)
</script>
三十九、回调地狱
//tiechui已经登录
ajax({
url:"http://localhost3000/news",
data:{
author:"tiechui"
},
success:function(res){
console.log(res[0])
ajax({
url:"http://loclhost:3000/comments",
data:{
},
success:function(res){//二层的回调地狱，代码维护性不好
newsId:res[0].id
}
})
}
})
promise
（一）promise基础语法
var q = new Promise(function(resolve，reject){
//放异步
settimeout（（）=>{
//成功兑现承诺
resolve()
//失败拒绝承诺
//reject（）
},2000）
})
//pending 执行中
//fulfilled 兑现承诺
//reject 拒绝承诺
//q是promise对象
q.then(function(){
//兑现承诺，这个函数被执行
}).catch(function(){
//拒绝承诺，这个函数被执行
})
（二）promise封装ajax
<script src="util.js"></script>
<script>
pajax({
url: "http://localhost:3000/news",
data: {
author: "tiechui"
}
}).then(res => {
// console.log(res[0])
return pajax({
url: "http://localhost:3000/comments111",
data: {
newsId: res[0].id
}
})
}).then(res=>{
console.log("success",res)
// return pajax
}).catch(err=>{
console.log("error",err)
})
// console.log(1111)
</script>
四十、async和await语法
四十一、fetch
//取代XMLHTTPrequest
fetch("http://localhost:3000/users").then(res=>{
return res.json()
}).then(res=>{
console.log(res)
})
}
//用json解析，否则会报错
fetch("http://localhost:3000/users",{
method:"POST",
headers:{
"content-type":"application/x-www-form-urlencoded"
}，
body:"username=tiechui&password=123"
})
.then(res=>res.json())
.then(res=>{
conscle.log(res)
})
四十二、cookie
//http协议无状态
//localStorage：用户名密码？
//token钥匙==>Nodejs token认证。
//cookie 本地存储sessionID 钥匙 ==>Nodejscookie+session
savebtn.onclick = function()
//路径设置
document.cookie = "username=xiaoming;path=/155-cookie/aaa"
document.cookie = "age=18"
//过期时间设置
var date = new Date()
date.setMinutes(date.getMinutes()+1)
document.cookie =` username=kerwin;expires=${date}`
//删除原理：将其设置时间提前。让其时间过期
四十三、jsonp
–同源策略：同域名同端口号同协议
–不符合同源策略，浏览器为了安全，会阻止请求
–解决跨域问题：
1.cors 由后端设置 Access-Control-Allow-Origin:
2. jsonp
<button id="mybtn">jsonp</button>
<script>
/*
jsonp原理：动态创建script标签，src属性指向没有跨域限制
指向一个接口，接口返回的格式一定是 ****() 函数表达式。
*/
function test(obj){
console.log(obj)
}
mybtn.onclick = function(){
// var oscript = document.createElement("script")
// oscript.src="01.txt" //未来地址
// document.body.appendChild(oscript)
var oscript = document.createElement("script")
oscript.src=`https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=test` //未来地址
document.body.appendChild(oscript)
oscript.onload = function(){
//删除当前节点
oscript.remove()
}
}
</script>
注意：
1. 后端接口形式必须**（），需要后端配合
2. jsonp 缺点
(1) onload 删除sciprt标签
(2) 只能get请求，不能post put delete
四十四、再谈函数
函数有返回值，而且返回值必须是复杂类型，而且要赋值给外面的变量
四十五、闭包
说明：
函数内部返回一个函数，被外界所引用。
这个内部函数就不会被销毁回收。
内部函数所用到的外部函数的变量也不会被销毁。
优点：让临时变量永驻内存
缺点：内存泄漏 func = null
function FetchContainer(url){
return function(path){
return fetch(url+path)
}
}
var fetcha = FetchContainer("http://www.a.com")
fetcha("/aaa").then(res=>res.json()).then(res=>console.log(res))
fetcha("/bbb").then(res=>res.json()).then(res=>console.log(res))
fetcha("/ccc").then(res=>res.json()).then(res=>console.log(res))
fetcha("/ddd").then(res=>res.json()).then(res=>console.log(res))
fetcha = null
var fetchb = FetchContainer("http://www.b.com")
fetchb("/aaa").then(res=>res.json()).then(res=>console.log(res))
fetchb("/bbb").then(res=>res.json()).then(res=>console.log(res))
fetchb("/ccc").then(res=>res.json()).then(res=>console.log(res))
fetchb("/ddd").then(res=>res.json()).then(res=>console.log(res))
fetchb = null
闭包应用：函数柯里化
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
