So implementieren Sie AJAX und JSONP in nativem JS

Ich glaube, es gibt immer einige Freunde, die beim Schreiben von Code keine Plug-Ins verwenden und lieber natives JS zum Schreiben verwenden. Deshalb werde ich Ihnen heute ein Tutorial zur Verwendung von nativem JavaScript zur Implementierung von AJAX und JSONP vorstellen.

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);   
    }
}

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Zusammenfassung des Front-End-JS-Frameworks und Erläuterung seiner Verwendung

Detaillierte Einführung in das drei Hauptstrukturen des Javascript-Entwicklungs-Tutorials

So implementieren Sie Web Worker mit Multithreading in H5

Das obige ist der detaillierte Inhalt vonSo implementieren Sie AJAX und JSONP in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!