전단 ajax 해석

최근 에 계속 형 이 저 에 게 크로스 도 메 인 을 말 해 줄 수 있 냐 고 물 었 습 니 다. 앞 뒤 통신 을 말 해 줄 수 있 냐 고 물 었 습 니 다. 사실은 저 는 한 마디 하고 싶 었 습 니 다. 이렇게 큰 문 제 를 어떻게 말 하 라 고 했 습 니까? 잠시 도 다 말 할 수 없 었 습 니 다. 아예 여러 가지 방법 을 뜯 어서 분 석 했 습 니 다. 그들 이 어떻게 통신 을 실현 하 는 지, 자신 이 몇 가지 방법 을 봉 인 했 습 니 다. 비정 기적 으로 업 데 이 트 했 습 니 다.ajax 는 지금까지 도 메 인 을 뛰 어 넘 을 수 없 는 것 을 제외 하고 다른 통신 기능 이 있어 야 할 것 은 모두 있다 고 말 해 야 합 니 다. 그러나 어떤 형 들 은 API 만 사용 할 줄 알 고 어떻게 실현 하 는 것 도 할 줄 모 릅 니 다. 이것 은 좀 말 이 안 됩 니 다.자, 이제 봉 인 된 코드 를 붙 여 볼 게 요.

var opt = {
    //    ajax         
         url: '',
         type: 'get',
         data: {},
         success: function () {},
         error: function () {},
     };
util.extend(opt, options);
     if (opt.url) {
     //  ajax   XMLHttpRequest  ， IE       
     //ActiveXObject，         ，       
     //XMLHttpRequest  ， new  XMLHttpRequest  ，    
     //      ActiveXObject  
         var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP');
         var data = opt.data,
             url = opt.url,
             type = opt.type.toUpperCase(),
             dataArr = [];
         for (var k in data) {
             //         
             dataArr.push(k + '=' + data[k]);
         }
         //  get  post  ，             
         if (type === 'GET') {
             url = url + '?' + dataArr.join('&');
             //  ajax  
             xhr.open(type, url.replace(/\?$/g, ''), true);
             //    
             xhr.send();
         }
         if (type === 'POST') {
             xhr.open(type, url, true);
             //         
             xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.send(dataArr.join('&'));
         }
         //  onload  （       ）
         xhr.onload = function () {
             if (xhr.status === 200 || xhr.status === 304) {
                 var res;
                 if (opt.success && opt.success instanceof Function) {
                     res = xhr.responseText;
                     if (typeof res ==== 'string') {
                     //              ，  jquery 
                     //xml，json 
                         res = JSON.parse(res);
                         opt.success.call(xhr, res);
                     }
                 }
             } else {
             //    
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };

원 리 는 이렇게 간단 하 다. 며칠 이 지나 면 정시 에 jsonp 의 실현 원 리 를 말 해 보 자.