도메인 간 구성 요소 캡슐화를 위한 사용자 정의 Ajax 지원에 대한 자세한 설명

이 글은 주로 크로스 도메인 컴포넌트 캡슐화를 지원하는 Custom Ajax와 관련된 지식 포인트에 대한 자세한 분석을 제공합니다. 이에 관심이 있는 친구들이 참고하면 도움이 될 것입니다.

Class.create() 분석

프로토타입을 모방하여 클래스 상속 생성

var Class = {
  create: function () {
    var c = function () {
      this.request.apply(this, arguments);
    }
    for (var i = 0, il = arguments.length, it; i < il; i++) {
      it = arguments[i];
      if (it == null) continue;
      Object.extend(c.prototype, it);
    }
    return c;
  }
};
Object.extend = function (tObj, sObj) { 
  for (var o in sObj) {
    tObj[o] = sObj[o];
  }
  return tObj;
};

ajax 정의: ZIP_Ajax=Class.create();

create 메소드는 생성자 요청을 반환하며 이는 var ZIP_Ajax = function(){ this.request.apply(this, 인수) }; 함수 내에서 생성 프로세스를 수행하기 위해 객체 가장을 사용합니다. 이는 생성자 작업을 요청 메서드에 넘겨주는 것과 같습니다. 여기서는 this.request 입니다. ZIP_Ajax 인스턴스의 메서드이며 이는 ZIP_Ajax 인스턴스를 가리킵니다. Apply는 ZIP_Ajax를 가리킵니다. 마지막으로 new 키워드에 따르면 이는 실제로 ZIP_Ajax 클래스를 가리킵니다. ZIP_Ajax 클래스의 정의를 사용하여 다음으로 해당 메서드를 정의할 수 있습니다.

XMLHttpRequest 자세한 설명:

XMLHttpRequest는 기술이 아니라 http 프로토콜에 완전히 액세스할 수 있는 주류 브라우저에 내장된 개체입니다. 대부분의 기존 http 요청은 양식 제출 및 http 요청을 기반으로 한 다음 양식을 반환합니다. XMLHttpRequest는 동기 요청을 지원하지만 가장 큰 장점은 데이터를 수신하기 위한 비동기 전송을 지원한다는 것입니다. 새로운 Ajax 요청을 생성하는 것은 실제로 XMLHttpRequest 객체를 인스턴스화하는 것입니다. 주요 이벤트 및 메소드에 대한 간략한 소개:

Readystatechange 이벤트:

XMLHttpRequest가 http 요청을 보내면 Readystatechange 이벤트가 각각 생성을 나타내는 5개의 값(0, 1, 2)을 반환합니다. XMLHttpRequest 및 초기화가 완료되면 요청이 전송됩니다. 3은 응답이 종료되지 않았음을 의미합니다(즉, 응답 헤더 데이터만 수신됨). 4는 완전한 응답에 대한 실제 응답입니다.

반환된 상태는 서버에서 반환한 상태 코드를 나타냅니다.

일반적으로 사용되는 값은 데이터 반환 성공을 나타내는 200, 영구 리디렉션 301, 임시 리디렉션(안전하지 않음) 304 캐시된 데이터 읽기 400 요청 발생을 나타내는 구문 오류입니다. , 403은 서버가 요청을 거부했음을 의미하고, 404는 요청한 웹 페이지 리소스가 존재하지 않음을 의미하고, 405는 지정된 위치에서 서버를 찾을 수 없음을 의미하고, 408은 요청 시간이 초과되었음을 의미하고, 500 서버 내부 오류, 505는 서버가 지원하지 않음을 의미합니다. 요청된 http 프로토콜 버전.

200-300은 성공을 나타내고, 300-400은 리디렉션을 나타내며, 400-500은 요청 내용이나 형식 또는 요청 본문이 너무 커서 오류가 발생했음을 나타내고, 500+는 내부 서버 오류를 나타냅니다

open 메서드:

open은 세 가지 매개변수를 받습니다. 매개변수는 요청 유형(get, post, head 등), url, 동기 또는 비동기입니다.

send 방법:

요청이 준비되면 send 방법이 트리거되고, 전송된 콘텐츠는 요청된 데이터입니다(가져오기 요청인 경우 매개변수는 null입니다.

요청이 성공한 후 성공 사용자 지정 메서드가 실행되고 해당 매개변수는 반환 데이터입니다.

ajax 크로스- 도메인:

크로스 도메인이란 무엇인가요?

www.a.com이 두 사이트에서 www.b.com에 데이터를 요청하려는 경우 도메인 이름이 일치하지 않더라도 도메인 간 문제가 발생합니다. 도메인 이름은 동일하지만 포트가 다르면 도메인 간 문제가 발생합니다(이러한 이유로 js는 대기하고 판단할 수만 있습니다). 크로스 도메인인지 여부는 window.location.protocol+window에 의해서만 결정됩니다. .location.host.예: http://www.baidu.com.

js 도메인 간 문제에 대한 몇 가지 솔루션은 무엇입니까?

1. document.domain +iframe

도메인이 있지만 하위 도메인이 다른 경우 도메인 이름 +iframe을 솔루션으로 사용할 수 있습니다. 구체적인 아이디어는 www.a.com/a.html

두 개의 도메인 이름 아래에 두 개의 다른 ab 파일이 있는 경우입니다. com/b.html에서 두 개의 html 파일에 document.domain="a.com"을 추가한 다음 a 파일에 iframe을 생성하여 iframe의 contentDocument를 제어함으로써 두 파일이 Dialogue For를 수행할 수 있습니다. 예:

www.a.com의 a.html 파일

document.domain="a.com";
  var selfFrame=document.createElement("iframe");
  selfFrame.src="http://hi.a.com/b.html";
  selfFrame.style.display="none";
  document.body.appendChild(selfFrame);
  selfFrame.onload=function(){
    var doc=selfFrame.contentDocument||selfFrame.contentWindow.document;//得到操作b.html权限
    alert(doc.getElementById("ok_b").innerHTML());//具体操作b文件中元素
  }

hi.a.com

document.domain="a.com"의 b.html 파일;

문제:

1. 보안. 한 사이트(hi.a.com)가 공격을 받으면 다른 사이트(www.a.com)가 보안 허점을 유발합니다. 2. 한 페이지에 여러 개의 iframe이 도입되는 경우. 모든 iframe을 작동하려면 동일한 도메인을 설정해야 합니다.

2. 동적으로 스크립트 생성(전설적인 jsonp 방법)

브라우저는 기본적으로 도메인 간 액세스를 금지하지만 다른 도메인 이름의 js는 금지하지 않습니다. page.js 파일 등으로 가져온 메소드를 실행할 수 있습니다. 이를 기반으로 스크립트 노드 메소드를 생성하여 완전한 도메인 간 통신을 달성할 수 있습니다.

a. 요청 개시자 페이지. 스크립트의 URL은 수신자의 백엔드를 가리킵니다. 이 주소에서 반환된 JavaScript 메소드는 개시자에 의해 실행될 수 있으며 get 제출 매개변수만 지원합니다.

b. 스크립트를 로드할 때 콜백 처리를 위한 도메인 간 js 메서드(jsonp)를 호출하세요.

예:

Initiator

function uploadScript(options){
  var head=document.getElementsByTagName("head")[0];
  var script=document.createElement("script");
  script.type="text/javasctipt";
  options.src += '?callback=' + options.callback;
  script.src=options.src;
  head.insertBefore(script,head.firstChild);
}
function callback(data){}
window.onload=function(){//调用
  uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
}

Receiver:

수신자는 요청의 콜백인 실행 함수만 반환하고 매개변수를 할당하면 됩니다.

3. html5를 사용한 PostMessage:

html5의 새로운 기능 중 하나는 요즘 대부분의 브라우저에서 이를 지원하고 사용하고 있습니다(ie8+ 포함). 도메인 간 문제가 없습니다. postMessage는 일반적으로 iframe과 함께 사용됩니다.

举例如下：

父页面：

<iframe id="myPost" src="http//www.a.com/main.html"></iframe>
window.onload=function(){
  document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
  //第二个参数表示确保数据发送给适合域名的文档
}
a.com/main.html页面：
window.addEventListener("message",function(event){
  if(event.origin.indexOf("a.com")>-1){
    document.getElementById("textArea").innerHTML=event.data;
  }
},false)
<body>
  <p>
    <span id="textArea"></span>
  </p>
</body>

这样在父页面加载完成后main.html页面的textArea部分就会显示"显示我"三个字

ajax方法封装code：

ZIP_Ajax.prototype={
  request:function(url options){
    this.options=options;
    if(options.method=="jsonp"){//跨域请求
      return this.jsonp();
    }
    var httpRequest=this.http();
    options=Object.extend({method: 'get',
      async: true},options||{});
    
    if(options.method=="get"){
      url+=(url.indexOf('?')==-1?'?':'&')+options.data;
      options.data=null;
    }
    httpRequest.open(options.method,url,options.async);
    if (options.method == 'post') {
      httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
    httpRequest.send(options.data || null);//get请求情况下data为null
    return httpRequest;
  },
  jsonp:function(){
    jsonp_str = 'jsonp_' + new Date().getTime();
    eval(jsonp_str + ' = ' + this.options.callback + ';');    
    this.options.url += '?callback=' + jsonp_str;
    for(var i in this.options.data) {
      this.options.url += '&' + i + '=' + this.options.data[i];
    } 
    var doc_head = document.getElementsByTagName("head")[0],
      doc_js = document.createElement("script"),
      doc_js.src = this.options.url;
    doc_js.onload = doc_js.onreadystatechange = function(){
       if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
         //清除JS
         doc_head.removeChild(doc_js);      
        }
      }   
      doc_head.appendChild(doc_js);
  },
  http:function(){//判断是否支持xmlHttp
    if(window.XMLHttpRequest){
      return new XMLHttpRequest();
    }
    else{
      try{
        return new ActiveXObject('Msxml2.XMLHTTP')
      }
      catch(e){
        try {
          return new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {
          return false;
        }
      }
    }
  },
  _onStateChange:function(http,url,options){
    if(http.readyState==4){
      http.onreadystatechange=function(){};//重置事件为空
      var s=http.status;
      if(typeof(s)=='number'&&s>200&&s<300){
        if(typeof(options.success)!='function')return;
        var format=http;
        if(typeof(options.format)=='string'){//判断请求数据格式
          switch(options.format){
            case 'text':
              format=http.responseText;
              break;
            case 'json':
              try{
                format=eval('('+http.responseText+')');
              }
              catch (e) {
                if (window.console && console.error) console.error(e);
              }
              break;
            case 'xml':
              format=http.responseXML;
              break;
          }
        }
      options.success(format);//成功回调
      }
      else {//请求出问题后处理
        if (window.closed) return;
        if (typeof (options.failure) == 'function') {
          var error = {
            status: http.status,
            statusText: http.statusText
          }
          //  判断是否是网络断线或者根本就请求不到服务器
          if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
            //  是
            error.status = -1;
          }
          options.failure(error);
        }
      }
    } 
  }
};

使用方法：

ajax调用举例：

var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"get",
  data:"key=123456&name=yuchao",
  format:"json",
  success:function(data){
    ......
  }
})
跨域请求调用举例：
var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
  method:"jsonp",
  data:{key:"123456",name:"yuchao"},
  callback:function(data){
    ......
  }
})

相关推荐：

JS组件系列--组件封装深入：使用jquery data()和html 5 data-*属性初始化组件_html/css_WEB-ITnose

Ajax跨域的完美解决方案实例分享

最全ajax跨域解决方案

위 내용은 도메인 간 구성 요소 캡슐화를 위한 사용자 정의 Ajax 지원에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!