基于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方法封装请求,并且应用到了实例中,并成功发送了请求并获取到响应结果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于ajax和jsonp的原生封装(实例) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript Generator函数使用分析

    JavaScript Generator函数使用分析 什么是Generator函数 Generator函数是ES6引入的一种新的函数类型,与普通的函数不同之处在于它能够被暂停和恢复。在调用Generator函数时,不会立即执行函数内部的代码,而是返回一个迭代器对象,通过调用迭代器对象的next()方法,才会执行函数内部的代码,执行到关键字yield时函数暂停…

    JavaScript 2023年5月28日
    00
  • 编写高质量JavaScript代码的基本要点

    编写高质量JavaScript代码的基本要点有以下几点: 1. 规范代码格式 良好的代码格式不仅可以使代码更容易阅读和理解,还可以提高代码的可维护性和可重用性。为此,我们需要遵循一些规范,如: 使用一致的缩进方式和空格或制表符 使用行末注释而不是行内注释 使用严格模式,避免使用全局变量 具有良好的代码结构,如按功能或逻辑分组功能块 以下是一个示例代码块,展示…

    JavaScript 2023年5月18日
    00
  • Linux下使用jq友好的打印JSON技巧分享

    Linux下使用jq友好的打印JSON技巧分享 什么是jq? jq是一个轻量级的命令行JSON处理工具,它具有过滤、修改和转换JSON数据的功能,并且非常灵活和强大。 安装jq 在大多数Linux发行版上,jq可以通过软件包管理器来安装,例如在Debian/Ubuntu上,可以使用以下命令: sudo apt-get install jq 如果使用的是其他发…

    JavaScript 2023年5月27日
    00
  • js HTML DOM EventListener功能与用法实例分析

    JS HTML DOM EventListener是前端Web开发中常用的功能之一,用于在指定的HTML元素上监听各种不同类型的事件。接下来,本文将为您详细讲解“js HTML DOM EventListener的功能与用法实例分析”。 一、EventListner概念 事件监听器(EventListener)是一种用于监听HTML元素事件的API。 事件是…

    JavaScript 2023年6月10日
    00
  • 微信小程序—setTimeOut定时器的问题及解决

    微信小程序中,setTimeOut是常用的定时器函数,可以在指定的时间后执行某个函数。但是在使用过程中,也容易遇到以下几个问题:延迟时间不精确、在处于非当前页面时仍执行等问题。接下来,我将针对这些问题详细讲解,为大家提供解决方案。 问题一:延迟时间不精确 在使用setTimeOut时,由于小程序的架构限制,实际延迟的时间可能存在一定误差。解决这个问题的方法也…

    JavaScript 2023年6月11日
    00
  • javascript下使用Promise封装FileReader

    下面我将详细讲解如何在JavaScript中使用Promise封装FileReader。 什么是Promise? 在介绍如何使用Promise封装FileReader之前,先来简述一下Promise的概念。 Promise是一种异步编程的解决方案,它可以优雅地处理回调地狱(callback hell)问题,使得异步操作更为简洁、可读性更强。 使用Promis…

    JavaScript 2023年6月11日
    00
  • 原生js仿jquery一些常用方法(必看篇)

    “原生js仿jquery一些常用方法(必看篇)”是一篇文章,介绍了如何使用纯原生的JavaScript实现一些常见的jQuery方法。这些方法包括:选择器、事件绑定、DOM操作、特效等。 以下是这篇文章中介绍的一些内容: 选择器 在jQuery中,我们可以使用美元符号($)来简化选择器的书写。例如: $(“.my-class”) 在原生JavaScript中…

    JavaScript 2023年5月18日
    00
  • 详解Vue-Router源码分析路由实现原理

    详解Vue-Router源码分析路由实现原理 前言 随着前端开发的不断发展,大型应用程序的前端实现也变得越来越复杂。前端路由就是其中非常重要的一部分,它可以帮助开发者构建起一个功能完善的单页面应用程序。而Vue-Router则是目前Vue.js框架中非常流行的前端路由方案。本文将详细讲解Vue-Router源码分析,帮助开发者更好地理解Vue-Router的…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部