Ajax是什么？ 如何创建

         Ajax:

        ajax是2005年2月，第一次正式提出的，它是Asynchronous javascript and xml的缩写，指的是通过 javascript的异步通信，从服务器获取xml文档从中提取数据，再进行更新网页的对应部分，而不用刷新整个网页。

• 创建ajax的原理：

  • Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

• 过程：

  • step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
  • step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
  • step3. 设置响应HTTP状态变化的函数；
  • step4. 发送HTTP请求；
  • step5. 获取异步调用返回的数据；
  • step6. 使用javascript和DOM实现局部刷新；

        一般实现：

const baseUrl = "xxxx"
//创建xhr对象
var xhr = new XMLHttpRequest()
//创建http请求
xhr.open("GET", baseUrl, true)  
//设置状态监听函数
xhr.onreadystatechange = function() {
	if(xhr.readyState !== 4) return
	//当请求成功时
	if(xhr.status >= 200 && xhr.status <300) {
		//处理相应
		handle(xhr.response)
	}else {
        console.error(this.statusText);
	}
}
//监听错误的函数
xhr.onerror = function(){
   console.error(this.statusText);
}
//设置请求头信息
xhr.responseType = "json"
xhr.setRequestHander("Accept", "aplication/json")
//发送http请求
xhr.send(null)

        Promise封装：

function getData(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open("GET", url, true)
        xhr.onreadystatechange = function() {
          if(xhr.readyState !== 4) return
          if(xhr.status >=200 && xhr.status < 300) {
            resolve(xhr.response)
          }else {
            reject(xhr.statusText)
          }
        }
        xhr.onerror = function() {
          reject(xhr.statusText)
        }
        xhr.responseType = "json"
        xhr.setRequestHeader("Accept", "application/json")
        xhr.send()
      })
    }