一.JavaScript的基础语法
1.Demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript基础语法</title>
<script>
function firstMethod(){
var d=new Date()
d.setDate(d.getDate()-3)
alert(d.toString())
}
</script>
<script src="javascript.js"></script>
</head>
<body>
<input type="button" value="按钮1" onclick="alert('Hello World')">
<br>
<input type="button" value="按钮2" onclick="firstMethod()">
<br>
<input type="button" value="按钮3" onclick="method1()">
<br>
基础
<br>
常量和变量
<br>
声明变量的语法结构:var 变量名=初始值;
变量名(标识符):由字母，数字，下划线，$符号组成，不能以数字开头，不能是系统的关键字，常量名大写
<br>
注释：//和/**/
<br>
Javascript大小写敏感
数据类型
<br>
<pre>
数据类型:
基本类型:string number boolean
特殊类型:null undefined
复杂类型:Date Math Array Object
</pre>
<br>
数组的操作
<input type="text" id="txtArray" value="123,2,5,96,8,56">
<input type="button" value="翻转" onclick="method2(1)">
<input type="button" value="排序(按字母排序)" onclick="method2(2)">
<input type="button" value="翻转(按数字排序)" onclick="method2(3)">
<br>
随机数1-30
<input type="button" value="1-30随机数" onclick="randomNumber()">
<br>
数据类型转换:隐式转换--转换函数
<br>
<input type="button" value="隐式转换" onclick="converDate()">
<br>
显示转换:parseInt\parseFloat\toString\isNaN(是否是数字)
<br>
<input type="text" id="txtDate">
<input type="button" value="计算平方" onclick="getSquare()">
<br>
运算符
<br>
== ===严格相等(包括类型)
三元运算符 表达式?value1:value2
<br>
<input type="text" id="txtNumber" onblur="guess()">
<br>
流程控制语句:条件(if/else--switch/case) 循环(for while)
<br>
<input type="button" value="累加1到50的和" onclick="getSum()">
<br>
用户名(3-5位字母和数字的组合)
<input type="text" id="txtName" onblur="judgeName()">
<br>
<input type="button" value="方法重载" onclick="tryArguments(10,10)">
<br>
<input type="button" value="函数的定义方式" onclick="testFunction()">
<br>
<input type="button" value="1" onclick="cal(this.value)">
<input type="button" value="2" onclick="cal(this.value)">
<input type="button" value="3" onclick="cal(this.value)">
<input type="button" value="4" onclick="cal(this.value)">
<input type="button" value="+" onclick="cal(this.value)">
<input type="button" value="-" onclick="cal(this.value)">
<input type="button" value="=" onclick="cal(this.value)">
<input type="text" id="txtData1">
</body>
</html>二.BOM对象:浏览器对象模型
2.Demo2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM对象</title>
<script>
//删除提示框
function deleteDate(){
var r=window.confirm("你是否真的要删除")
alert(r)
}
//打开窗口
function openWin(){
window.open("http://www.baidu.com","baidu","width=200,height=300,toolbar=yes")
}
//显示时间
function showTime(){
var now=new Date()
document.getElementById("txtTime").value=now.toLocaleTimeString()
}
//启动时间
var timer;
function startTime(){
timer=window.setInterval("showTime()",1000)
}
//停止函数
function stopTime(){
window.clearInterval(timer)
}
//定时操作
function wait(){
window.setTimeout("alert('hello')",3000)
}
</script>
</head>
<body>
删除提示框
<input type="button" value="删除文本" onclick="deleteDate()">
<br>
打开窗口
<input type="button" value="打开窗口" onclick="openWin()">
<br>
有关时间的操作
<input type="text" id="txtTime">
<input type="button" value="显示时间"onclick="showTime()">
<input type="button" value="启动时间"onclick="startTime()">
<input type="button" value="停止时间"onclick="stopTime()">
<input type="button" value="定时操作"onclick="wait()">
</body>
</html>三.DOM对象:文档对象模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM对象操作</title>
<script>
function testDOM(){
//页面中由多少个input元素
var n=document.getElementsByTagName("input").length
//修改图形
var imgObj=document.getElementById("img1")
imgObj.src="2.png"
//修改链接
var linkObj=document.getElementById("link1")
linkObj.innerHTML="AAAAA"
linkObj.href="http://www.baidu.com"
//修改段落
var pObj=document.getElementById("p1")
pObj.innerHTML="后天也休息"
pObj.style.color="red"
pObj.style.backgroundColor="green"
pObj.style.fontSize="30px"
//修改标题样式
var h3Obj=document.getElementById("h31")
h3Obj.className="mystyle"
//列表个数
var ulObj=document.getElementById("ul1")
var count=0
for(var i=0;i<ulObj.childNodes.length;i++){
if(ulObj.childNodes[i].nodeName=="LI"){
count++
}
}
alert(count)
}
</script>
<style rel="stylesheet">
.mystyle{
border:1px solid #000;
}
</style>
</head>
<body>
<input type="button" value="开始" onclick="testDOM()"><br>
<img src="1.png" id="img1">
<a href="#" id="link1">click me</a>
<p id="p1">明天休息了</p>
<h3 id="h31">可以利用休息的时间来武装自己</h3>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>四.综合练习---购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript5综合练习</title>
<script>
//增加的函数
function add(btnObj){
//得到传入对象的父对象的所有子对象
var nodes=btnObj.parentNode.childNodes;
//循环所有的子节点找到文本框对象
for(var i=0;i<nodes.length;i++){
var child=nodes[i]
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value)
n++
child.value=n
}
}
//计算小计及总计
calSum()
}
//减少函数
function sub(btnObj){
//得到传入对象的父对象的所有子对象
var nodes=btnObj.parentNode.childNodes;
//循环所有的子节点找到文本框对象
for(var i=0;i<nodes.length;i++){
var child=nodes[i]
if(child.nodeName=="INPUT"&&child.type=="text"){
var n=parseInt(child.value)
n--
child.value=n
}
}
//计算小计及总计
calSum()
}
//对表格进行操作
function calSum(){
//找到表格中所有的tr
var tableObj=document.getElementById("table1")
//获得表格中的所有行
var rows=tableObj.getElementsByTagName("tr")
//循环获得每一行
var total=0//存放总计的值
for(var i=1;i<rows.length;i++){
//得到当前行
var row=rows[i]
//找到价格
var price=parseFloat(row.getElementsByTagName("td")[1].innerHTML)
//找到数量
var num= parseInt(row.getElementsByTagName("td")[2].getElementsByTagName("INPUT")[1].value)
//计算小计
var sum=price*num
//将计算的小计结果给到小计单元格中
row.getElementsByTagName("td")[3].innerHTML=sum.toFixed(2)
//累加总计
total+=sum
}
//将总计的值赋值给总计元素
document.getElementById("totalPrice").innerHTML=total.toFixed(2)
}
</script>
</head>
<body onload="calSum()">
<table border="1" id="table1">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>红烧肉</td>
<td>35</td>
<td>
<input type="button" value="-" onclick="sub(this)">
<input type="text" value="1" readonly>
<input type="button" value="+" onclick="add(this)">
</td>
<td></td>
</tr>
<tr>
<td>锅包肉</td>
<td>45</td>
<td>
<input type="button" value="-" onclick="sub(this)">
<input type="text" value="2" readonly>
<input type="button" value="+" onclick="add(this)">
</td>
<td></td>
</tr>
<tr>
<td>回锅肉</td>
<td>25</td>
<td>
<input type="button" value="-" onclick="sub(this)">
<input type="text" value="1" readonly>
<input type="button" value="+" onclick="add(this)">
</td>
<td></td>
</tr>
</table>
总计:<span id="totalPrice"></span>
</body>
</html>五.级联操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript5综合练习</title>
</head>
<body>
级联操作:通过一个元素控制另外一个元素中的内容，如省市的选择
<br>
省:
<select id="sel1" onchange="createCities()">
<option>---请选择---</option>
<option>北京</option>
<option>河南</option>
<option>辽宁</option>
<option>河北</option>
</select>
城市:
<select id="selCity">
<option>---请选择---</option>
</select>
<script>
//创建数组用于存放城市信息
var array=new Array()
array[0]=["请选择"]
array[1]=["海淀","朝阳"]
array[2]=["郑州","开封"]
array[3]=["沈阳","大连","鞍山"]
array[4]=["石家庄","邯郸"]
//创建用于选择城市的函数
function createCities(){
//获得省份下拉列表中对应的下标值
var index=document.getElementById("sel1").selectedIndex
//获得对应省份的城市
var data=array[index]
//清除城市中所包含的原选项
var selCity=document.getElementById("selCity")
//设置城市子选项的长度为0
selCity.options.length=0
//加入新选项
for(var i=0;i<data.length;i++){
var obj=new Option(data[i])
selCity.add(obj)
}
}
</script>
</body>
</html>六.节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点的操作</title>
</head>
<body>
<form id="form1">
<input type="button" value="添加节点" onclick="addNewNode()">
</form>
<script>
function addNewNode(){
//找到表单元素
var formObj=document.getElementById("form1")
//添加文本框
var inputTextObj=document.createElement("input")
inputTextObj.type="text"
inputTextObj.value="doudou"
formObj.appendChild(inputTextObj)
//添加段落
var pObj=document.createElement("p")
pObj.innerHTML="孙桂月"
formObj.insertBefore(pObj,formObj.firstChild)
//添加按钮
var btnObj=document.createElement("input")
btnObj.type="button"
btnObj.value="提交"
//为按钮定义事件
btnObj.onclick=function(){alert("click me")}
formObj.appendChild(btnObj)
}
</script>
</body>
</html>七.表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格操作</title>
</head>
<body>
ID:<input type="text" id="txtID">
Name:<input type="text" id="txtName">
<input type="button" value="添加" onclick="addRow()">
<table id="t1" border="1">
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>doudou</td>
</tr>
</table>
<script>
function addRow(){
//获得表格对象
var t=document.getElementById("t1")
//获得表格的行数
var v=t.rows.length
//在表格中新增一行
var row=t.insertRow(v)
//为新增行添加单元格
var cell1=row.insertCell(0)
cell1.innerHTML=document.getElementById("txtID").value
var cell2=row.insertCell(1)
cell2.innerHTML=document.getElementById("txtName").value
}
</script>
</body>
</html>八.练习----随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<script>
var interFunc;
//存放姓名的数组
var arr=new Array()
arr[0]="张三"
arr[1]="李四"
arr[2]="王五"
arr[3]="赵六"
arr[4]="马七"
arr[5]="侯八"
//根据下标数获取姓名的函数
function displayName(index){
//将获取的姓名赋值给文本框
document.getElementById("name").value=arr[index]
}
//获得随机数的函数
function getRandom(small,big){
return small+Math.floor(Math.random()*(big-small+1))
}
//整合随机数获取姓名
function dealFunc(){
displayName(getRandom(0,(arr.length-1)))
}
//运行
function run(val){
if(val=="开始"){
document.getElementById("btn").value="停止"
//文本框中滚动出现姓名,回调函数，每隔30毫秒调用一次整合函数
interFunc=setInterval("dealFunc()",30)
}else{
document.getElementById("btn").value="开始"
clearInterval(interFunc)
}
}
</script>
</head>
<body>
<div align="center">
<input type="text" id="name" style="width:4em; height:1.2em; font-size: 72px; vertical-align: middle; text-align: center;" readonly>
<input type="button" id="btn" value="开始" style="width:5em; height:1.2em; font-size: 42px;" onclick="run(this.value)">
</div>
</body>
</html>九.变量的声明及特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量的声明及特性</title>
<style>
.item{
width:100px;
height:50px;
border:1px solid #000;
margin-left:20px;
float:left;
}
</style>
</head>
<body>
<script>
//声明变量
let a;
let d,b,c;
let e=100
let f=120,g='ilovescript',h=[]
//注意
//1.变量不能重复声明
let star='刘德华'
//let star='华仔'
//2.块级作用域 if else while for {}
{
let name='周杰伦'
}
console.log(name)
//3.不能在声明前使用
//console.log(age)
//let age=20
// console.log(age)
// var age=20
//4.不影响作用域链
// {
// let goods='显示器'
// function fn(){
// console.log(goods)
// }
// fn()
// }
</script>
<div>
<h2>点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
//获得div元素
let items=document.getElementsByClassName('item')
//遍历item数组,获得每一个元素，并为元素添加单击事件
for(let i=0;i<items.length;i++){
items[i].onclick =function(){
//设置背景颜色
items[i].style.backgroundColor='pink'
}
}
</script>
</body>
</html>十.常量声明及特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常量声明及特点</title>
</head>
<body>
<script>
//常量:在程序执行的过程中不会发生改变的值称为常量
//1.声明常量
const SCHOOL='东北大学'
//2.常量的特点
//2.1.一定要付初始值
const CORDID=1;
//2.2常量的名字要大写(潜规则)
const A=1
//2.3常量值不能修改
//A=2
//2.4可以对数组和对象的元素进行修改
const team=['A','B','C']
team.push('D')//向数组中追加数据
</script>
</body>
</html>十一.解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解构赋值</title>
</head>
<body>
<script>
//解构赋值:将复杂结构数据拆解开，与简单结构进行数据交互
//数组:
const F4=['小沈阳','赵四','刘能','宋小宝']
let[f1,f2,f3,f4]=F4
console.log(f1)
console.log(f2)
console.log(f3)
console.log(f4)
const zhaobenshan={
name:'赵本山',
age:76,
sex:'男',
sayHi:function(){
console.log("我的特长是演小品")
}
}
let {name,age,sex,sayHi}=zhaobenshan
console.log(name)
console.log(age)
console.log(sex)
sayHi()
</script>
</body>
</html>十二.模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板字符串</title>
</head>
<body>
<script>
//模板字符串:ES6引入新的字符串的方式"",'',``
//1.声明
let str=`我是ES6中增加的定义字符串的方式`
console.log(str,typeof str)
//2.特点
//2.1在字符串中可以出现换行
let str1=`<ul>
</ul>`
//2.2.变量拼接
let name1='鹊刀门2'
let out =`${name1}是一部具备东北特色喜剧`
console.log(out)
</script>
</body>
</html>十三.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
</head>
<body>
<script>
//函数：JavaScript函数用于执行特定任务或计算功能的代码块。可以重复使用的代码块
//语法结构:function 函数名(参数列表){执行过程}
//特点:函数可以接收输入的参数,并可以通过return关键字返回数据
//优势:函数的优势在于提高代码的可重用性和模块化编程
//声明一个函数
let fn=function(a,b){
console.log(a,b,a+b)
return a+b
}
let sum=fn(1,2)
console.log(sum)
//ES6允许使用箭头函数
let fn1 =(a,b)=>{
return a+b
}
let sum1=fn1(1,2)
console.log(sum1)
/*
注意:关于this的使用
在箭头函数中，this是在定义函数的时候绑定的，而不是在执行函数的时候绑定的。
this指向的固定化，是因为箭头函数根本没有自己的this，所以不能用作构造函数
*/
// var x=1;
// var obj={
// x:2,
// sayHi:()=>{
// console.log(this.x)
// }
// }
// obj.sayHi()
// //对比普通函数
// var obj={
// x:2,
// sayHi:function(){
// console.log(this.x)
// }
// }
// obj.sayHi()
//注意：箭头函数不能构造实例化对象
// let Person=(name,age)=>{
// this.name=name;
// this.age=age;
// }
// let me=new Person('小沈阳',30)
// console.log(me)
// let Person=function(name,age){
// this.name=name;
// this.age=age;
// }
// let me=new Person('小沈阳',30)
// console.log(me)
//注意:箭头函数不能使用arguments
//arguments解释:不用形参(函数的参数列表)，通过arguments可以记录传入的实参。
// function showArguments(){
// console.log(arguments[0],arguments[1])
// }
// showArguments(1,2)
// //注意：箭头函数可以简写
// let pow=(n)=>n*n
// console.log(pow(9))
</script>
<div id="box" style="width: 200px;height: 200px;background-color: aquamarine;"></div>
<script>
//箭头函数的应用案例
//需求1：单击div 2s后颜色变换
//获得页面中id值为div的元素
let box =document.getElementById("box")
//为box元素添加单击事件
// box.addEventListener("click",function(){
// let _this=this
// //定时函数
// setTimeout(function(){
// _this.style.background='pink'
// },2000)
// })
//ES6箭头函数实现，箭头函数可以找到事件源
box.addEventListener("click",function(){
//定时函数
setTimeout(()=>{
this.style.background='pink'
},2000)
})
//需求2：从数组中获取偶数的元素
const arr=[1,6,9,10,100,21]
//filter()过滤器，用于遍历数组的每一个元素
// const result=arr.filter(function(item){
// if(item%2==0){
// return true;
// }else{
// return false;
// }
// })
// console.log(result)
//使用箭头函数完成需求
// const result=arr.filter((item)=>{
// if(item%2==0){
// return true;
// }else{
// return false;
// }
// })
//简易写法
const result=arr.filter(item=>item%2==0)
console.log(result)
</script>
</body>
</html>十四.函数参数的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数参数的设置</title>
</head>
<body>
<script>
//在ES6中允许参数赋初值
function add(a,b,c=3){
}
add(1,2)
//ES6中支持参数解构
function connection({host='127.0.0.1',username,password,prot}){
// let host=options.host
// let username=options.username
}
connection({
host:'192.168.1.1',
username:'root',
password:'123123',
port:3306
})
//ES6引入了rest参数,用于替换arguments,注意...args写在最后
function date(a,b,...args){
console.log(a)
console.log(b)
console.log(args)
}
date('小沈阳','赵四','刘能','宋小宝')
</script>
</body>
</html>十五.数组的相关操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组的相关操作</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
//数组的合并
const fenghuang = ['曾毅','玲花']
const kaixin = ['沈腾','马丽','艾伦']
const kuajie = fenghuang.concat(kaixin)
const kuajie1 = [...fenghuang,...kaixin]
console.log(kuajie1)
//数组的克隆
const fh = [...fenghuang]
//将伪数组转换成真正的数组数据
const divs = document.querySelectorAll('div')//页面中所有的div元素
const divArr = [...divs]
console.log(divArr)
</script>
</body>
</html>十六.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型</title>
</head>
<body>
<script>
//数据类型：在程序执行的过程中可以操作哪些数据种类
//在JavaScript中共提供了7种基本数据类型
/*
USONB
u---undefined 空(什么都没有)
s---string 字符串 symbol 唯一(ES6中新增的)
o---object 对象
n---number 数字 null 空值
b---boolean 布尔
Symbol特点:
1.值是唯一的
2.不能与其他的数据进行运算
3.定义的对象属性不能使用for......in循环遍历
*/
//创建
let a=Symbol()
console.log(a,typeof a)
let b=Symbol('wahaha')
let b1=Symbol('wahaha')
console.log(b===b1)
let c=Symbol.for('wahaha')
let c1=Symbol.for('wahaha')
console.log(c===c1)
//let result=a+100
//let result1=b>'gaga'
//使用场景
var age=Symbol()
var person={
[Symbol('name')]:'zs',
[age]:12
}
console.log(person.name)
console.log(person.age)
//symbol内部提供了哪些内置函数
</script>
</body>
</html>十七.Promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise</title>
</head>
<body>
<script>
//Promise是ES6引入的异步编程工具。
// 语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果
//Promise构造函数:Promise(excutor){}
//Promise的常用函数:then,catch
//实例化Promise对象(创建Promise工具)
// let data="请求数据"//该数据为服务器的数据
// reject(data)
// })
// //调用Promise的then方法
// p.then(function(value){
// //编写响应值
// })
</script>
</body>
</html>十八.ECMA的相关操作
#一·ECMA的相关介绍
##1.什么是ECMA，欧洲计算机制造商协会(谷歌，微软，IBM)，这个组织的目标是评价，开发和认可电信和计算机的相关标准。1994年更名为ECMA
##2.官网
https://ecma-international.org/
#二.ECMAScript相关介绍
##1.什么是ECMAScript
由ECMA国际通过ECMA-262标准化的脚本程序设计语言,ECMA国际制定了许多标准,而ECMA-262是其中之一
#三.ECMAScript262的发展历史
##1.官网
1.https://ecma-international.org/publications-and-standards/standards/ecma-262/
##2.各版本特点
-第1版本 1997年 制定了语言的基本语法
-第2版本 1998年 略
-第3版本 1999年 引入了正则表达式，异常处理，格式化输出，IE开始支持。
-第4版本 2007年 略
-第5版本 2009年 引入严格模式，JSON，扩展对象，数组，原型，字符串，日期等函数
-第6版本 2015年 模块化，面向对象语法，Promise,箭头函数，let,const,数组解构赋值等
-第7版本 2016年 幂运算符，数组拓展，async/await关键字
-第8版本 2017年 async/await关键字，字符串扩展
-第9版本 2018年 对象解构赋值，正则扩展
-第10版本 2019年 扩展对象，数组方法
十九.使用Promise封装Ajax
//创建可以读取外部文件的工具
const fs=require('fs')
// fs.readFile('为学.md',(err,data)=>{
// if(err) throw err;//如果读取文件失败则输出错误信息
// console.log(data.toString())
// })
//将读取文件的过程封装到Promise中
const p=new Promise(function(resolve,reject){
fs.readFile('为学.md',(err,data)=>{
//判断是否读取失败
if(err) reject(err);
//如果读取成功
resolve(data)
})
})
//配合promise展示数据
p.then(function(value){
console.log(value.toString())
},function(reason){
console.log("读取失败!!")
})
//使用Promise封装Ajax
//Ajax是ES5中提供的用于异步提交的工具，可以通过该工具实现客户端与服务器端进行数据交互
//Ajax也称为局部提交或局部刷新
//1.创建Ajax对象
const xhr=new XMLHttpRequest()
//2.配置访问地址及访问方式
xhr.open("GET","http://www.baidu.com")
//3.发送数据
xhr.send('向服务端发送的数据')
//4.处理响应结果
xhr.onreadystatechange=function(){
//判断响应协议值
if(xhr.readyState===4){//4有返回值
if(xhr.status >=200 &&xhr.status<300){
//表示成功
console.log(xhr.response)//打印数据
}else{
//表示失败
console.error(xhr.status)
}
}
}
//使用Promise封装Ajax
const p1=new Promise((resolve,reject)=>{
//1.创建Ajax对象
const xhr=new XMLHttpRequest()
//2.配置访问地址及访问方式
xhr.open("GET","http://www.baidu.com")
//3.发送数据
xhr.send('向服务端发送的数据')
//4.处理响应结果
xhr.onreadystatechange=function(){
//判断响应协议值
if(xhr.readyState===4){//4有返回值
if(xhr.status >=200 &&xhr.status<300){
//表示成功
resolve(xhr.response)//打印数据
}else{
//表示失败
reject(xhr.status)
}
}
}
})
//指定回调
p1.then(function(value){
console.log(value)
},function(reason){
console.log(reason)
})