JavaScript - AJAX使用与封装

前置知识

HTTP协议基础

* 请求响应概念
* response 状态码概念

Web运作原理：一次HTTP请求对应一个页面。

AJAX

AJAX 是 Asynchronous JavaScript And XML 的缩写, 本意是使用JavaScript来执行异步的网络请求.

使用AJAX

const request = new XMLHttpRequest()

request.onreadystatechange = () => {
    // 接收数据成功且返回200状态码
    if(request.readyState === 4 && request.status === 200){
        // success 逻辑
    }else{
        // fail 逻辑
    }
}

request.open('GET', '/api/page1')
request.send()

目的

通过浏览器提供的HttpRequest API，达到编写JavaScript代码主动请求服务器资源的目的.

在浏览器端通过AJAX可以实现动态加载HTML，XML，CSS，JavaScript, JSON.

封装

封装Ajax

const ajax = (method, url, data, success, fail)=>{
    let request = new XMLHttpRequest()
    request.onreadystatechange = function(){
        if(request.readyState === 4){
            if(request.status >=200 && request.status < 300 || request.states === 304){
                return success(request);
            }else{
                return fail(request)
            }
        }
    };
    request.open(method, url);
    request.send(method === 'POST' ? JSON.stringify(data): null);
}