【JavaScript】原生JS实现AJAX、JSONP

心已赠人 2022-06-04 02:27 192阅读 0赞

function ajax(params) { 
    
        params = params || {};   
        params.data = params.data || {};   
    
       // 判断是ajax请求还是jsonp请求
        var json = params.jsonp ? jsonp(params) : json(params);   
    
       // ajax请求 
        function json(params) { 
        params.type = (params.type || 'GET').toUpperCase(); // 请求方式，默认是GET
        params.data = formatParams(params.data); // 避免有特殊字符，必须格式化传输数据 
        var xhr = null;    
    
       // 实例化XMLHttpRequest对象 
        if(window.XMLHttpRequest) {   
            xhr = new XMLHttpRequest();   
        } else {   
         // IE6及其以下版本 
            xhr = new ActiveXObjcet('Microsoft.XMLHTTP');   
        }; 
    
       // 监听事件，只要 readyState 的值变化，就会调用 readystatechange 事件 
        xhr.onreadystatechange = function() { 
         // readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
            if(xhr.readyState == 4) {   
                var status = xhr.status;  
           // status：响应的HTTP状态码，以2开头的都是成功
                if(status >= 200 && status < 300) {   
                    var response = ''; 
    
             // 判断接受数据的内容类型 
                    var type = xhr.getResponseHeader('Content-type');   
                    if(type.indexOf('xml') !== -1 && xhr.responseXML) {   
                        response = xhr.responseXML; //Document对象响应 
                    } else if(type === 'application/json') {   
                        response = JSON.parse(xhr.responseText); //JSON响应 
                    } else {   
                        response = xhr.responseText; //字符串响应 
                    };  
               // 成功回调函数 
                    params.success && params.success(response);   
                } else {   
                     params.error && params.error(status);   
                }   
            };   
        };  
    
       // 连接和传输数据 
        if(params.type == 'GET') {
         // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
            xhr.open(params.type, params.url + '?' + params.data, true);   
            xhr.send(null);   
        } else {   
            xhr.open(params.type, params.url, true);   
    
         //必须，设置提交时的内容类型 
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
    
         // 传输数据 
            xhr.send(params.data);   
            }   
        }  
    
     //格式化参数 
        function formatParams(data) { 
            var arr = [];   
            for(var name in data) { 
         // encodeURIComponent() ：用于对 URI 中的某一部分进行编码
                arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));   
            };   
    
       // 添加一个随机数参数，防止缓存 
            arr.push('v=' + random());   
            return arr.join('&');   
        }
    
     // 获取随机数 
        function random() { 
            return Math.floor(Math.random() * 10000 + 500);   
        }
    }

转载自：[http://ghmagical.com/article/page/id/AASiankfBJWp][http_ghmagical.com_article_page_id_AASiankfBJWp]

[http_ghmagical.com_article_page_id_AASiankfBJWp]: http://ghmagical.com/article/page/id/AASiankfBJWp

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现播放器

播放器 > 目的：可快退、快进、静音、调节声音、全屏、改变当前视频所在位置（以拖动形式和点击进度条的形式）遇到的问题： ① 谷歌浏览器上若用本地视频无法对`...

朴灿烈づ我的快乐病毒、/ 2024年04月20日 09:43/ 0 赞/ 36 阅读

相关原生js实现Ajax

一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法： $.ajax({

╰+哭是因爲堅強的太久メ/ 2023年10月18日 10:17/ 0 赞/ 87 阅读

相关原生javascript实现getUrlParam

页面t.html <body onload="onLoad()"> <p name="message">p=</p> </body>

待我称王封你为后i/ 2022年07月14日 09:47/ 0 赞/ 163 阅读

相关【JavaScript】原生JS实现AJAX、JSONP

function ajax(params) { params = params || {}; params.data

心已赠人/ 2022年06月04日 02:27/ 0 赞/ 193 阅读

相关原生js(JavaScript)实现手动切换图片效果

手动切换图片只是实现了功能，并没有对页面样式做很好的优化。因为现在只是讲解这个图片切换的功能，没有必要花太多的时间和精力在界面优化上面。下面先把代码和样式图奉上再进行讲解。

曾经终败给现在/ 2022年05月20日 10:26/ 0 赞/ 228 阅读

相关原生js(JavaScript)实现图片轮播功能

先将目录结构图送上，然后再讲几个注意的地方。 ![70][] 其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数

╰+攻爆jí腚メ/ 2022年05月20日 09:29/ 0 赞/ 218 阅读

相关原生JS实现Ajax

> 前言 > > 这篇文章将给大家详细介绍一下，与JQuery对照用原生的js怎么去实现Ajax。 <table style="border:0px so

迷南。/ 2021年09月29日 08:02/ 0 赞/ 376 阅读

相关 JavaScript 原生js实现动画弹窗消息

效果图 ![动画弹窗效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

本是古典何须时尚/ 2021年09月21日 13:08/ 0 赞/ 422 阅读

相关 JavaScript 原生js实现自定义消息提示框

效果图 ![js自定义消息弹框][js] 上代码 <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2021年09月21日 13:08/ 0 赞/ 374 阅读

相关原生js实现ajax

Ajax的原理：简单来说就是通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。一般来

短命女/ 2021年08月13日 20:32/ 0 赞/ 432 阅读