Ajax是什么？如何创建

68 阅读 0 评论 45 点赞

我是靠谱客的博主悦耳发卡，最近开发中收集的这篇文章主要介绍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()
      })
    }