- 什么是ajax
async JavaScript and XML，异步的js+XML
js通过异步的方式获取响应，实现局部刷新页面 - 请求是怎么发出来的
1、地址栏打回车
2、<img src =/xxx> accept: image/web image/*
3、<script src =/xxx> accept: test/javascript
4、<link rel=stylesheet href =/xxx> accept: test/css
5、<form action =/xxx method='get'></form>
缺点分析：
①1和5一定会替换当前页面，达不到局部刷新页面的目的
②234只能请求特定类型的资源 - 验证几种方式通过发送请求实现局部更新div
HTML代码如下：
<button id="button">点我</button>
<div id="output">
</div>
①敲回车
<script>
button.onclick =function(){
location.href="/xxx"
}
</script>
结论：点击发现页面跳转，全部刷新页面
②图片
<script>
button.onclick =function(){
var img = new Image()
img.src ='/xxx'
}
</script>
结论：假设响应是“here is xxx”,但无法拿到内容，放不在div里面
③CSS
<script>
var link = document.create('link')
link.rel ='stylesheet'
link.href='/xxx'
document.head.appendChild(link)
</script>
结论：同上
④js
<script>
button.onclick=function(){
var script =document.createElement('script')
script.src='/xxx'
document.body.appendChild(script)
}
script.onerror = function(){
alert('不好意思，我手贱')
}
script.onload = function(){
alert('我发的请求没问题')
}
</script>
假设响应：response.end('output.innerText ="here is xxx" ')(路径里的响应会当做js解析，这样就实现了局部更新div)
稍复杂的js实现局部更新的例子：
响应里定义：
var user ='name:frank,age:18'
response.end(window.callback.call(null,"${user}"))
js里面定义：
window.callback=function(data){
var array = data.split(',') //['name:frank','age:18']//
var dl = document.create.Element('dl')
for(var i =0;i<array.length;i++){
var parts =array[i].split(':')
var dt =document.createElement('dt')
dt.textContent=parts[0]
var dd = document.create.Element('dd')
dd.textContent=parts[1]
dl.appendChild(dt)
dl.appendChild(dd)
}
output.appendChild(dl)
}
div被一个列表替换掉
js方法局限性：不知道具体出了什么错误，有局限性 - ajax如何实现
XMLHttpRequest
XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XMLHttpRequest是一个javascript对象.
标准ajax：
button.onclick = function(){
var req = new XMLHttpRequest();
req.open('GET','/xxx?wd=s')
req.setRequestHeader('x-frank','2222')
req.onreadystatechange=function(){
if(req.ready.State===4){//响应下载完毕
if(req.status>200&&req.status<300){
console.log('成功')
}else{
console.log('失败')}
}
}
}
假设现在是成功，如果要获取响应内容，代码如下：
var data = req.responseText
var array = data.split(',')
代码同上面，循环遍历，插入页面 - 一个ajax的应用
图片发自简书App
图片发自简书App
上述代码释义：
1、json文件
[
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"}
]
2、执行var xhr = new XMLHttpRequest()后，console.log(xhr.responseText)输出的内容：
[
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"},
{"url":"https://i.loli.net/2017/08/18/5996969b15d77.jpg"}
]
3、let array = JSON.parse(xhr.responseText)//字符串变数组，对象组成的数组集合//
console.log(array)
image.png
//JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象//
4、遍历数组后：
array.forEach(function(item,index)，console.log(item,index)的结果
image.png
//forEach() 方法对数组的每个元素执行一次提供的函数。
语法：array.forEach(callback(currentValue, index, array){
//do something
}, this)
array.forEach(callback[, thisArg])
callback
为数组中每个元素执行的函数，该函数接收三个参数：
currentValue(当前值)
数组中正在处理的当前元素。
index(索引)
数组中正在处理的当前元素的索引。
array
forEach()方法正在操作的数组。
thisArg可选
可选参数。当执行回调 函数时用作this的值(参考对象)。
返回值是undefined - promise
$.get(url,function(x,y,z))
$.get(url).then(function(data)){}
.on事件
promise--阮一峰
扫盲：
1、同步异步
2、箭头函数
