Ajax的认识

不可爱仙女

于 2021-07-22 17:41:27 发布

阅读量120

点赞数

文章标签： ajax js

本文链接：https://blog.csdn.net/rraxx/article/details/119002936

版权

2005年2月，Ajax这个词被第一次正式提出，它是 Asynchronous JavaScript and XML的缩写，指的是通过JavaScript的异步通信，从服务器获取XML文档，并从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
具体的来说，Ajax分为以下几个步骤：

创建XMLHttpRequest对象，也就是创建一个异步调用对象。
创建一个新的HTTP请求，并指定该HTTP请求的方法，URL以及验证信息。
设置响应HTTP请求状态变化的函数。
发送HTTP请求。
获取异步调用返回的数据。
使用JavaScript和DOM实现局部刷新。

实现步骤：

方法1：

const SERVER_URL = "/server";

//1.创建XMLHttpRequest对象。
let xhr = new XMLHttpRequest();
//2.创建新的HTTP请求,true代表异步
xhr.open("GET",SERVER_URL,true)

//3.设置状态监听函数
xhr.onreadystatechange = function(){
    //通信成功时，状态为4
    if(this.readyState !== 4) return 
    //当请求成功或失败时，改变promise的状态。
    if(this.status === 200){
        handle(this.response);
    }else{
        console.log(this.statusText)
    }
}
//4.设置请求失败时监听函数
xhr.onerror = function(){
    console.log(this.statusText)
}
//5.设置响应的数据类型
xhr.responseType = 'json';
//6.设置请求头信息
xhr.setRequestHeader("Accept","application/json");
//7.发送HTTP请求
xhr.send(null)

方法2：

//用promise封装实现ajax

function getJson(url){
    //1.创建一个promise对象
    let promise = new Promise(function(resolve,reject){
        //2.创建一个异步调用对象
        let xhr = new XMLHttpRequest();
        //3.创建一个HTTP请求
        xhr.open("GET",url,true);
        //4.设置状态监听函数
        xhr.onreadystatechange = function(){
            if(this.readyState !== 4) return 
            //5.当请求成功或者失败时，改变promise的状态
            if(this.status === 200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        };
        //6.设置错误监听函数
        xhr.onerror = function(){
            reject(new Error(this.statusText));
        }
        //7.设置响应的数据类型
        xhr.responseType = 'json';
        //8.设置请求头信息
        xhr.setRequestHeader("Accept","application/json");
        //9.发送HTT请求
        xhr.send(null);
    })
    return promise;
}

我的理解：

Ajax是一种异步通信的方法，通过直接由js脚本向服务器发起HTTP通信，然后服务器根据返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。
创建一个ajax有这样几个步骤：
首先是创建一个XMLHttpRequest对象。
然后在这个对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方式，请求的地址，是否异步，和用户的认证信息。
在发起请求前，我们可以为这个对象添加一些信息和监听函数，比如说我们可以通过setRequestHeader方法来为请求添加头部信息。我们还可以为这个对象添加一个状态监听函数。一个XMLHttpRequest对象一共有五个状态，当它的状态变化时会触发onreadystatechange事件。我们可以通过设置监听函数，来处理请求成功后的结果。当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候我们可以通过判断请求的状态，如果状态是2XX或者是304的化则代表返回正常。这个时候我们就可以通过response中的数据来对页面进行更新了。
当对象的属性和监听函数都设置完成后，最后我们调用sent方法来向服务器发起请求，可以传入参数作为发送的数据体。