基于ajax和jsonp的原生封装(实例)

我来详细讲解“基于ajax和jsonp的原生封装(实例)”的完整攻略。

什么是AJAX和JSONP？

AJAX是Asynchronous JavaScript and XML（异步的JavaScript和XML）的缩写，指的是一种在不重新加载整个页面的情况下，通过JavaScript进行局部刷新的技术。AJAX可以实现异步请求后端数据，在不影响页面正常操作的情况下，动态刷新页面内容，提升用户的交互体验。

JSONP是JavaScript Object Notation with Padding（使用填充的JavaScript对象表示法），是一种使用JSON格式的数据交换方式。由于浏览器的同源策略限制，我们不能跨域请求非本站的后端数据，而JSONP利用的是动态创建script标签，不受同源策略限制，可以跨域请求数据。JSONP的原理是通过动态创建script标签，将请求的接口及参数作为src的查询字符串传入，后端返回的数据是一段可执行的JavaScript代码，该代码会被自动执行，从而实现了跨域获取数据。

封装AJAX方法

下面，我们来封装一下基于AJAX的GET和POST请求方法。这里的代码示例是基于ES6的语法编写的。

// 封装GET方法
function ajaxGet(url, callback){
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        callback(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();
}

// 封装POST方法
function ajaxPost(url, data, callback){
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        callback(JSON.parse(xhr.responseText));
    }
  };
  xhr.send(JSON.stringify(data));
}

代码解析：
- ajaxGet函数接收两个参数：url为请求的接口地址，callback为请求成功后的回调函数。
- ajaxPost函数接收三个参数：url为请求的接口地址，data为请求参数，callback为请求成功后的回调函数。其中data是一个对象，需要用JSON.stringify方法将其转换成字符串。
- 通过XMLHttpRequest对象发送请求。
- readyState为4时表示请求已成功处理。
- status为200时表示请求已成功响应。

封装JSONP方法

接下来，我们来封装一个基于JSONP的方法。

function jsonp(url, options) {
    //创建script标签
    let script = document.createElement('script');
    let callback;
    //格式化options，将其转换成queryString
    options = options || {};
    options.callback = options.callback || ('jsonp_' + Date.now() + '_' + Math.random().toString().substr(2));
    let params = [];
    for(let key in options) {
        params.push(encodeURIComponent(key) + '=' + encodeURIComponent(options[key]));
    }
    //将params数组用&连接成queryString
    let queryString = params.join('&');
    url = url + '?' + queryString;
    script.setAttribute('src', url);
    document.head.appendChild(script);

    return new Promise((resolve) => {
        //定义callback函数，并将数据resolve出去
        window[options.callback] = function (data) {
            resolve(data);
        };
        //当script标签加载完成时，移除script标签并删除callback函数
        script.onload = () => {
            document.head.removeChild(script);
            delete window[options.callback];
        };
    });
}

代码解析：
- jsonp函数接收2个参数：url为请求的接口地址，options是一个对象，可以指定回调函数、请求的参数等。
- 通过动态创建script标签，并指定接口地址和回调函数名称。
- 将options对象转换成queryString，并拼接到接口地址后面。
- 定义了一个Promise用于处理返回的响应结果。
- 在window对象下定义callback函数，并将响应数据resolve出去。
- 在script标签加载完成后，移除script标签并删除callback函数。

AJAX和JSONP的使用示例

现在我们来使用刚才封装好的方法，发送AJAX和JSONP请求，并在回调函数中输出请求结果。

// 发送AJAX请求并输出响应结果
ajaxGet('https://api.apiopen.top/getJoke?page=1&count=2', function(data){
    console.log(data);
});

// 发送JSONP请求并输出响应结果
jsonp('https://api.apiopen.top/getJoke', {
    page: 1,
    count: 2
}).then(data => {
    console.log(data);
});

代码解析：
- ajaxGet函数中调用了封装好的ajaxGet方法，发送AJAX请求并在回调函数中输出响应结果。
- jsonp函数中调用了封装好的jsonp方法，发送JSONP请求并在Promise中处理响应结果。

本文总结

通过阅读本文，我们了解了AJAX和JSONP的基本原理，同时，我们也学会了如何使用原生的AJAX和JSONP方法封装请求，并且应用到了实例中，并成功发送了请求并获取到响应结果。