사용자 정의 Ajax 도메인 간 구성 요소 패키징

이번에는 Custom Ajax Cross-Domain Component Encapsulation을 소개하겠습니다. Custom Ajax Cross-Domain Component Encapsulation을 사용할 때 주의사항은 무엇인가요?

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

아약스 정의: ZIP_Ajax=Class.create();

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

XMLHttpRequest 자세한 설명:

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

readystatechange 이벤트:

XMLHttpRequest가 http 요청을 보내면 이벤트는 5개의 값을 반환하며, 0, 1, 2는 XMLHttpRequest 초기화 완료, 요청 전송을 나타냅니다. 종료되지 않았습니다(즉, 헤더 데이터만 수신됨). 4는 완전한 응답을 얻는 실제 방법입니다.

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

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

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

오픈 방법:

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

보내기 방법:

요청이 준비되면 전송 메소드가 트리거되고 전송된 콘텐츠는 요청된 데이터입니다(가져오기 요청인 경우 매개변수는 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 파일이 있는 경우입니다. hi.a.com/b.html뿐만 아니라 두 개의 html 파일에 document.domain="a.com"을 추가한 다음 a 파일에 iframe을 생성하여 iframe의 contentDocument를 제어할 수 있습니다. 두 파일을 가지고 대화를 나눌 수 있습니다. 예는 다음과 같습니다:

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의 b.html 파일에서

document.domain="a.com";

질문:

1、安全性，当一个站点（hi.a.com）被攻击后，另一个站点（www.a.com）会引起安全漏洞。2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

2、动态创建script（传说中jsonp方式）

浏览器默认禁止跨域访问，但不禁止在页面中引用其他域名的js文件，并且可以执行引入js文件中的方法等，根据这点我们可以通过创建script节点方法来实现完全跨域的通信。实现步骤为：

a.在请求发起方页面动态加载一个script，script的url指向接收方的后台，该地址返回的javascript方法会被发起方执行，url可以传参并仅支持get提交参数。

b.加载script脚本时候调用跨域的js方法进行回调处理(jsonp)。

举例如下：

发起方

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

接收方：

接收方只需要返回一个执行函数，该执行函数就是请求中的callback并赋参数。

3、使用html5的postMessage：

html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。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){
    ......
  }
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

express搭建查询服务器的方法

Django的cookie使用详解

위 내용은 사용자 정의 Ajax 도메인 간 구성 요소 패키징의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!