사용자 정의 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 <p style="text-align: left;">
아약스 정의: ZIP_Ajax=Class.create();</p><p style="text-align: left;">
create 메소드는 var ZIP_Ajax= function(){과 동일한 <a href="http://www.php.cn/wiki/176.html" target="_blank">constructor</a> 요청을 반환합니다.
this.request.apply(this, 인수) };
함수 내에서 생성 프로세스를 수행하기 위해 객체 가장을 사용하는 것은 생성자 작업을 요청 메서드에 넘겨주는 것과 같습니다. 여기서 this.request는 ZIP_Ajax 인스턴스의 메서드이며, 이는 ZIP_Ajax 인스턴스를 가리킵니다. 적용 후 This는 ZIP_Ajax를 가리킵니다. , 마지막으로 이는 실제로 new 키워드를 기반으로 ZIP_Ajax 클래스를 가리킵니다. ZIP_Ajax 클래스 정의를 사용하여 다음으로 해당 메서드를 정의할 수 있습니다. </p><p style="text-align: left;">
<strong>XMLHttpRequest 자세한 설명: </strong></p><p style="text-align: left;">
XMLHttpRequest는 기술이 아니라 http 프로토콜에 완전히 액세스할 수 있는 주류 브라우저에 내장된 개체입니다. 대부분의 기존 http 요청은 양식 제출 및 http 요청을 기반으로 한 다음 양식을 반환합니다. XMLHttpRequest는 동기 요청을 지원하지만 가장 큰 장점은 데이터를 수신하기 위한 비동기 전송을 지원한다는 것입니다. 새로운 Ajax 요청을 생성하는 것은 실제로 XMLHttpRequest 객체를 인스턴스화하는 것입니다. 주요 이벤트와 방식을 간략하게 소개해주세요: </p><p style="text-align: left;">
<strong>readystatechange 이벤트: </strong></p><p style="text-align: left;">
XMLHttpRequest가 http 요청을 보내면 이벤트는 5개의 값을 반환하며, 0, 1, 2는 XMLHttpRequest 초기화 완료, 요청 전송을 나타냅니다. 종료되지 않았습니다(즉, 헤더 데이터만 수신됨). 4는 완전한 응답을 얻는 실제 방법입니다. </p><p style="text-align: left;">
반환된 상태는 서버에서 반환한 상태 코드를 나타냅니다: </p><p style="text-align: left;">
일반적으로 사용되는 값으로는 성공적인 데이터 반환을 나타내는 200, 영구 리디렉션 302, 임시 리디렉션(안전하지 않음)을 나타내는 304, <a href="http://www.php.cn/code/9477.html" target="_blank">캐시된 데이터 읽기</a> 400, 요청의 <a href="http://www.php.cn/wiki/96.html" target="_blank">구문 오류</a>를 나타내는 403, 서버가 요청을 거부했음을 나타내는 404 등이 있습니다. 웹 페이지 요청을 나타냅니다. 리소스가 존재하지 않습니다. 405는 지정된 위치 서버를 찾을 수 없습니다. 408은 요청 시간이 초과되었음을 의미하고, 500은 서버 내부 오류를 의미하며, 505는 서버가 요청한 http 프로토콜 버전을 지원하지 않음을 의미합니다. </p><p style="text-align: left;">
200-300은 성공을 나타내고, 300-400은 리디렉션을 나타내고, 400-500은 요청 내용이나 형식 또는 요청 본문이 너무 커서 오류가 발생함을 나타내고, 500+는 내부 서버 오류를 나타냅니다</p><p style="text-align: left;">
<strong>오픈 방법: </strong></p><p style="text-align: left;">
open은 세 가지 매개변수를 받습니다: <a href="http://www.php.cn/php/php-tp-requesttype.html" target="_blank">요청 유형</a>(get, post, head 등), URL, 동기 또는 비동기</p><p style="text-align: left;">
<strong>보내기 방법: </strong></p><p style="text-align: left;">
요청이 준비되면 전송 메소드가 트리거되고 전송된 콘텐츠는 요청된 데이터입니다(가져오기 요청인 경우 매개변수는 null입니다. </p><p style="text-align: left;">
요청이 성공하면 성공 사용자 정의 메소드가 실행되며 해당 매개변수는 반환 데이터입니다.
</p>ajax 크로스 도메인: <p style="text-align: left;"><strong></strong>
크로스 도메인이란 무엇입니까? </p><p style="text-align: left;">
www.a.com 두 사이트가 www.b.com에서 데이터를 요청하려는 경우 도메인 이름 불일치로 인해 도메인 간 문제가 발생하게 됩니다. 도메인 이름이 동일하더라도 포트가 다르면 도메인 간 문제가 발생합니다(이 때문에 js는 앉아서 지켜볼 수만 있습니다). 크로스 도메인인지 확인하려면 window.location.protocol+window.location.host를 사용하여 크로스 도메인인지 확인하세요. 예: http://www.baidu.com.</p><p style="text-align: left;">
js의 도메인 간 문제를 해결하는 몇 가지 방법은 무엇입니까? </p><p style="text-align: left;">
</p>1.document.domain+iframe<p style="text-align: left;"><strong></strong>
기본 도메인은 동일하지만 하위 도메인이 다른 요청의 경우 도메인 이름 + iframe을 솔루션으로 사용할 수 있습니다. 구체적인 아이디어는 두 개의 도메인 이름 www.a.com/a.html</p><p style="text-align: left;"> 아래에 두 개의 다른 ab 파일이 있는 경우입니다.
hi.a.com/b.html뿐만 아니라 두 개의 html 파일에 document.domain="a.com"을 추가한 다음 a 파일에 iframe을 생성하여 iframe의 contentDocument를 제어할 수 있습니다. 두 파일을 가지고 대화를 나눌 수 있습니다. 예는 다음과 같습니다: </p><p style="text-align: left;">
www.a.com의 a.html 파일 </p><pre class="brush:php;toolbar:false">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></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)

  <p>
    <span></span>
  </p>

这样在父页面加载完成后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<p style="text-align: left;">
	<span style="color:#ff0000;">使用方法：</span></p><p style="text-align: left;">
	ajax调用举例：</p><pre class="brush:php;toolbar:false">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 중국어 웹사이트의 기타 관련 기사를 참조하세요!