1.了解原生Ajax语法
1.1原生Ajax语法 ？
原理是借助 window提供的XMLHttpRequest构造函数
作用 基于new 出来的的XMLHttpRequest实例对象，可以发起Ajax请求
实现步骤？
主要通过四个步骤实现！
①创建xhr 对象
②调用xhr.open()函数配置
③调用xhr.send()函数发出
④监听load时间等待结果
let xhr = nw XMLHttRequest()
xhr.open('GET','请求地址')
xhr.send()
//监听load时间 等待结果
xhr.addEvenListener('load',function(){
console.log(xhr.response) //响应体数据 服务器返回的
let result = JSON.parse(xhr.response)//返回的 是字符串 所以转义成对象
console.log(result)
})Ajax原理是什么？
window提供的XMLHttpRequset构造函数
load事件页面DOM加载完成后即可触发的事件
原生Ajax如何传递查询参数？
在URL 后面拼接查询参数
let xhr = new XMLHttpRequest()
xhr.open('GET','请求地址?参数名称=参数值')
xhr.send()
xhr.addEvenListener('load',function(){
let res = JOSN.parse(xhr.response)
console.log(res)
})请求体如何携带参数？
①在xhr.open() 之后，调用xhr.setRequestHeader()函数，指定请求体的数据格式（设置请求头）
②在xhr.send()中，指定要提交的请求体数据
xhr.setRequesHeader('Content-Type','application/json')
xhr.send(JSON.stringify(
{
bookname:'黑马',
author:'老李',
publisherw:'黑马出版社'
}))请求体内容类型有哪三种？
键值对字符串
JSON字符串
表单数据FromData
2 JSON字符串
2.1前后端数据交互格式
指的是服务器与客户端之间的数据传输格式！ JSON（主流）
JSON 是一钟数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据
对象格式的JSON 数据，最外层使用{} 进行包裹，内部数据为key:value的键值对
①key 必须使用英文的双引号进行包裹
②value的值 只能是 字符串 数字 布尔值 数组 对象类型（可选的的类型只有这9钟）
数组格式的JSON 数据，最外层使用[] 进行包裹，内部的每一项数据之间使用英文的，分隔。其中每一项的值类型只能是字符串、数字、布尔值、null 、数组、对象 这6种类型之一。
调用浏览器内置的JSON.stringify()函数 可以把JS数据转换为JSON 格式的字符串
调用浏览器内置的JSON.parse()函数，可以把JSON格式化字符串转换为JS数据
JSON 是什么？
以字符串的形式来表现对象/数组的数据格式
JSON 字符串和JS数据类型如何互传？
JS数据类型转换JSON字符串使用JSON.stringify
JOSN字符串转换JS数据类型用JSON.parse.
注意事项！
什么是序列化 和 反序列化？
3.回调地狱
3.1异步同步 
JS中都有哪些异步代码？
定时器、Ajax、事件。
什么是回调函数？
把一个函数当成参数来传递，将来特定的时机调用，这个函数就叫回调函数。
一般异步操作都会用到回调函数！
回调地狱?
在回调函数内，再嵌套回调函数，一直嵌套下去就形成了回调地狱！
4.Promise？
Promise设计之初，就是为了解决回调地狱的问题
①创建Promise对象
②使用Promise对象
let p = new Promise((resolve,reject)=>{
// resolve('成功了') 写两个调用时 只会执行一个 执行最前面的 这种状态被称为状态凝固
reject('失败了')
})
p.then(res=>{//接受resolve 函数的 返回成功的结果
console.log(res)
}).catch(err=>{接受reject函数的 返回成功的结果
console.error(err)
})Promise对象内resolve和reject函数作用？
回调外部then/catch, 传递成功/失败的动作和结果
Pronmise 配合异步使用？是必须配合异步代码使用？不一定看需求
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('成功结果')
})
},1000)
p.then(res =>{
console.log(res) //1秒后 返回成功结果
})Promise 的三种状态？
Promise对象的状态如何切换？
触发resolve/reject方法
什么是Promise的状态凝固？
一旦Promise对象状态发生改变后，无法再次改变。
Promise链式调用？
了解Promise的链式调用特性 在then的回调函数中如果return的是 一个Promise对象, 则此对象结果交给 下一个then函数
then里return的Promise对象结果，交到哪里执行？
下一个then接收成功结果
Promise解决回调地狱？
根据.then 链式调用把Promise对象串联起来
Promise的静态方法 ？
Promise.all() 等待机制
语法：Promise.all([ promise1, promise2, ... ]).then( ... )
合并和并发多个Promise对象，等待所有人成功，按顺序接收结果 f返回的结果是数组
Promise.race() 赛跑机制
语法：Promise.race([ promise1, promise2, ... ]).then( ... )
特征：发起并行的promise异步操作，只要任何一个异步操作成功，就会走 .then
Promise的静态方法resolve和reject
案例封装AJax数？
function myAxios({url,method,params}){
console.log(url,method,params)
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
//判断是否有params 参数 如果有 就拼接
if(params) {
// 方法1
// xhr.open(method,url+'?'+'pname='+params.pname+'&'+'cname='+params.cname)
//方法2
// let arr=[];
// for(k in params){
// arr.push(`${k}=${params[k]}`)
// // console.log(`${k}`)
// // console.log(`${params[k]}`)
// // console.log(`${k}=${params[k]}`)
// }
// url= url+`?${arr.join('&')}`
// 方法3
url +='?'+Object.keys(params).map(item=> `${item}=${params[item]}`).join('&')
console.log(url)
}
xhr.open(method,url)
xhr.send()
xhr.addEventListener('load',function(){
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
})
}
myAxios({
method:'GET',
url: 'http://hmajax.itheima.net/api/area',
params:{
pname:'山东省',
cname:'济南市'
}
})
.then(res=>{
console.log(res)
})
综合案例 请求体参数！
function myAxios({url,method:method='GET',params:params,data:data}){
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
//判断是否有params 参数 如果有 就拼接
if(params) {
// 方法1
// xhr.open(method,url+'?'+'pname='+params.pname+'&'+'cname='+params.cname)
//方法2
// let arr=[];
// for(k in params){
// arr.push(`${k}=${params[k]}`)
// // console.log(`${k}`)
// // console.log(`${params[k]}`)
// // console.log(`${k}=${params[k]}`)
// }
// url= url+`?${arr.join('&')}`
// 方法3
url +='?'+Object.keys(params).map(item=> `${item}=${params[item]}`).join('&')
console.log(url)
}
xhr.open(method,url)
// 判断是否data 参数
if(data){
if(data instanceof FormData){
//如果是formdata 数据 可以直接发送
xhr.send(data)
}else if(data instanceof Object){
xhr.setRequestHeader('Content-Type','application/json')
data=JSON.stringify(data)
xhr.send(data)
}else if(typeof data ==='string'){
//根据不同的 类型 更换请求头协议
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data)
}else{
//如果上面的三个请求类型都不对 那么就直接发送过去
xhr.send(data)
}
}
xhr.addEventListener('loadend',function(){
if(xhr.status>=200&&xhr.status<=300){
const jsonData =xhr.responseText? JSON.parse(xhr.responseText):null
resolve(jsonData)
}else{
reject(new Error('请求失败'))
}
})
})
}
// xhr.addEventListener('load',function(){
// const jsonData =xhr.responseText?
JSON.parse(xhr.responseText):null
// // const jsonData =JSON.parse(xhr.response)
// resolve(jsonData)
// })
// })
// xhr.addEventListener('error',function(){
// reject(new Error('数据请求失败，请检查参数或网络~'))
// })
// }
//LOaden 等xhr 请求已经完毕了 load可能在接受中
myAxios({
method:'POST',
url: 'http://hmajax.itheima.net/api/books',
data:{
bookname:'济南黑马',
author:'23',
publisher:'11'
}
})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
</script>综合案例 导航分类
<script>
//
axios.defaults.baseURL='http://hmajax.itheima.net'
axios({
url: '/api/category/top',
}).then(res=>{
const {data}=res.data;
console.log(data)
const pArr= data.map(item=>{
return axios({
url:'/api/category/sub',
params:{
id:item.id
}
})
})
Promise.all(pArr).then(res=>{
console.log(res)
document.querySelector('.top').innerHTML= res.map(item=>{
const{children,name}=item.data.data
return`
<li>
<a href="javascript:;">${name }</a>
<ul class="sub">
${children.map(item=>{
const{name,picture}=item
return `
<li>
<a href="javascript:;">
<span>${name}</span>
<img src="${picture}" alt="">
</a>
</li>
`
}).join('')
}
</ul>
</li>`
}).join('')
})
})
</script>
1662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
