How to implement AJAX and JSONP in native JS

I believe there are always some friends who don’t like to use plug-ins when writing code and prefer to use native JS to write. So today I will bring you a tutorial to use native JavaScript to implement AJAX and 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);   
    }
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Summary of the front-end js framework and explanation of its uses

Detailed introduction to the three major structures of the javascript development tutorial

How to implement Web Worker with multi-threading in H5

The above is the detailed content of How to implement AJAX and JSONP in native JS. For more information, please follow other related articles on the PHP Chinese website!