登录  /  注册
首页 > web前端 > js教程 > 正文

原生JS如何实现AJAX、JSONP

php中世界最好的语言
发布: 2017-12-04 13:36:23
原创
1670人浏览过

相信总有一些朋友在写代码的时候不喜欢用插件,喜欢用原生的JS来编写,那么今天给大家带来一份教程,用原生的JavaScript来实现AJAX、JSONP。

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);   
    }
}
登录后复制

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

前端的js框架总结以及用途讲解

javascript开发教程的三大结构详细介绍

H5的多线程如何实现Web Worker

以上就是原生JS如何实现AJAX、JSONP的详细内容,更多请关注php中文网其它相关文章!

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学