Comment implémenter AJAX et JSONP dans JS natif

Je crois qu'il y a toujours des amis qui n'aiment pas utiliser de plug-ins lors de l'écriture de code et préfèrent utiliser du JS natif pour écrire. Aujourd'hui, je vais donc vous proposer un tutoriel pour utiliser JavaScript natif pour implémenter AJAX et 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 = &#39;&#39;; 
 
          // 判断接受数据的内容类型  
                var type = xhr.getResponseHeader(&#39;Content-type&#39;);   
                if(type.indexOf(&#39;xml&#39;) !== -1 && xhr.responseXML) {   
                    response = xhr.responseXML; //Document对象响应   
                } else if(type === &#39;application/json&#39;) {   
                    response = JSON.parse(xhr.responseText); //JSON响应   
                } else {   
                    response = xhr.responseText; //字符串响应   
                };  
            // 成功回调函数 
                params.success && params.success(response);   
            } else {   
                 params.error && params.error(status);   
            }   
        };   
    };  
 
    // 连接和传输数据   
    if(params.type == &#39;GET&#39;) {
      // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
        xhr.open(params.type, params.url + &#39;?&#39; + params.data, true);   
        xhr.send(null);   
    } else {   
        xhr.open(params.type, params.url, true);   
 
      //必须，设置提交时的内容类型   
        xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/x-www-form-urlencoded; charset=UTF-8&#39;); 
 
      // 传输数据  
        xhr.send(params.data);   
        }   
    }  
 
  //格式化参数   
    function formatParams(data) {   
        var arr = [];   
        for(var name in data) { 
      //   encodeURIComponent() ：用于对 URI 中的某一部分进行编码
            arr.push(encodeURIComponent(name) + &#39;=&#39; + encodeURIComponent(data[name]));   
        };   
 
    // 添加一个随机数参数，防止缓存   
        arr.push(&#39;v=&#39; + random());   
        return arr.join(&#39;&&#39;);   
    }
 
  // 获取随机数   
    function random() {   
        return Math.floor(Math.random() * 10000 + 500);   
    }
}

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Résumé du framework front-end js et explication de ses utilisations

Introduction détaillée au trois structures majeures du tutoriel de développement javascript

Comment implémenter Web Worker avec multi-threading en H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!