专题复习七、ajax及promise

• 什么是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的应用
  专题复习七、ajax及promise
  专题复习七、ajax及promise
  上述代码释义：
  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、箭头函数