이 기사는 크로스 도메인 컴포넌트 캡슐화를 위한 사용자 정의 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, 인수) }; 함수 내에서 생성 프로세스를 수행하기 위해 객체 가장을 사용합니다. 이는 생성자 작업을 요청 메서드에 넘겨주는 것과 동일합니다. 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을 솔루션으로 사용할 수 있습니다. 구체적인 아이디어는 두 개의 도메인 이름 아래에 두 개의 서로 다른 ab 파일인 www.a.com/a.html
과 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이 작동할 수 있어야 합니다.
2. 동적으로 스크립트 생성(전설적인 jsonp 방법)
브라우저는 기본적으로 도메인 간 액세스를 금지하지만 페이지에 있는 다른 도메인 이름의 js 파일은 금지하지 않습니다. import js 파일 등을 실행합니다. 이를 기반으로 스크립트 노드 메소드를 생성하여 완전한 도메인 간 통신을 달성할 수 있습니다. 구현 단계는 다음과 같습니다.
a. 스크립트는 수신자를 가리킵니다. 백그라운드에서 이 주소로 반환된 JavaScript 메서드는 개시자에 의해 실행됩니다. URL은 매개변수 가져오기만 지원합니다.
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})
}로그인 후 복사
수신기:
수신자는 요청의 콜백인 실행 함수만 반환하고 매개변수를 할당하면 됩니다.
3. html5 post를 사용하세요. 메시지:
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){
......
}
})로그인 후 복사
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
MUi框架ajax请求WebService接口实例_AJAX相关
Struts2和Ajax数据交互（图文教程）
原生ajax写的上拉加载实例（图文教程）
위 내용은 자세한 답변: 사용자 정의 Ajax는 도메인 간 구성 요소 캡슐화를 지원합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
