네이티브 JS에서 AJAX 및 JSONP를 구현하는 방법

코드를 작성할 때 플러그인을 사용하는 것을 좋아하지 않고 네이티브 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 = &#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);   
    }
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

프론트엔드 js 프레임워크 요약 및 사용법 설명

자바스크립트 개발 튜토리얼의 세 가지 주요 구조에 대한 자세한 소개

H5에서 멀티스레딩으로 Web Worker를 구현하는 방법

위 내용은 네이티브 JS에서 AJAX 및 JSONP를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!