JS는 동일한 도메인인 jsonp 크로스 도메인(코드 포함)을 캡슐화합니다.-JS 튜토리얼-php.cn

이번에는 동일 도메인 내 JS 캡슐화, jsonp 크로스 도메인(코드 포함), 동일 도메인 내 JS 캡슐화, jsonp 크로스 도메인 notes에 대해 소개하겠습니다.

Ajax 플러그인을 네이티브 J로 캡슐화하고, 일반 프로젝트를 소개하고, 데이터를 전송하는 것이 가능하다고 느껴집니다. . . 아이디어에 대해 간단히 얘기해보겠습니다. 틀린 부분이 있으면 정정해주세요^_^

1. Ajax 코어, XHR 객체 생성

Ajax 기술의 핵심은 XMLHttpRequest 객체(XHR이라고 함)입니다. IE5는 XHR 개체 브라우저를 최초로 도입한 것이며 IE5의 XHR 개체는 MSXML 라이브러리의 ActiveX 개체를 통해 구현되므로 IE에는 MSXML2.XMLHttp, MSXML2.XMLHttp.3.0 및 MSXML2의 세 가지 버전이 있을 수 있습니다. XMLHttp.6.0 . 따라서 XHR 객체를 생성할 때 호환성 작성을 사용해야 합니다:

createXHR:function(){
 if(typeof XMLHttpRequest!='undefined'){
 return new XMLHttpRequest();
 }else if(typeof ActiveXObject!='undefined'){
 if(typeof arguments.callee.activeXString!='string'){
 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 for(i=0,len=versions.length;i<len;i++){
 try{
  new ActiveXObject(versions[i]);
  arguments.callee.activeXString=versions[i];
  break;
 }catch(ex){
 }
 }
 return new ActiveXObject(arguments.callee.activeXString);
 }else{
 throw new Error("No XHR object available.");
 }
}

로그인 후 복사

2. XHR의 주요 메소드 속성

메소드:

open() 메소드: 3개의 매개변수, 전송할 요청 유형, 요청 URL, 비동기 전송 여부에 대한 부울 값

send() 메소드: 요청 본문으로 전송할 데이터입니다. 요청 본문을 통해 데이터를 보낼 필요가 없으면 null을 전달해야 합니다.

abort() 메서드: 응답을 받기 전에 호출됩니다. 비동기 요청을 취소합니다.

속성:

responseText: 응답 본문으로 반환된 텍스트입니다.

status: 응답의 HTTP 상태

statusText: HTTP 상태 설명

readyState: 요청/응답 프로세스의 현재 활성 단계를 나타냅니다.

값은 다음과 같습니다.

0: 초기화되지 않았습니다. open() 메소드가 아직 호출되지 않았습니다

1: 시작합니다. open() 메소드가 호출되었지만 send() 메소드가 아직 호출되지 않았습니다

2: Send. send() 메소드가 호출되었지만 응답이 수신되지 않았습니다.

3: 받습니다. 부분 응답 데이터가 수신되었습니다

4: 완료되었습니다. 모든 응답 데이터가 수신되었으며 client에서 사용할 수 있습니다.

Onreadystatechange이벤트 처리 이 예제의 함수:

var complete=function(){
 if(xhr.readyState==4){
 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 if(params.success){
  params.success(xhr.responseText);//执行调用ajax时指定的success函数
  }
 }else{
 if(params.fail){
 params.fail();//执行调用ajax时指定的fail函数
 }else{
 throw new Error("Request was unsucessful:"+xhr.status);
 }
 }
 }
}

로그인 후 복사

참고: 브라우저 간 호환성을 보장하려면 open() 메서드를 호출하기 전에 onreadystatechange 이벤트 핸들러를 지정해야 합니다.

3. 동일한 도메인에서 요청 보내기

①GET 요청

가장 일반적인 요청 유형으로 특정 정보를 쿼리하는 데 자주 사용됩니다. 정보는 URL 끝에 쿼리의 문자열 매개변수를 추가하여 서버로 전송됩니다. get 메소드 요청에서 주의할 점은 쿼리 문자열의 각 매개변수 이름과 값이 encodeURIComponent()를 사용하여 인코딩되어야 하고 모든 이름-값 쌍이 앰퍼샌드로 구분되어야 한다는 것입니다.

요청 방법:

if((this.config.type=="GET")||(this.config.type=="get")){
 for(var item in this.config.data){
 this.config.url=addURLParam(this.config.url,item,this.config.data[item]);//使用encodeURIComponent()进行编码
 }
 xhr.onreadystatechange=complete;
 xhr.open(this.config.type,this.config.url,this.config.async);
 xhr.send(null);
}

로그인 후 복사

②POST 요청

은 일반적으로 서버에 저장해야 하는 데이터를 보내는 데 사용됩니다. POST 요청은 데이터를 요청 본문으로 제출해야 합니다. 그러면 양식 제출이 시뮬레이션됩니다. 즉, Content-Type 헤더 정보를 application/x-www-form-urlencoded; charset=UTF-8로 설정합니다.

직렬화 기능:

 function serialize(data){
 var val="";
 var str="";
 for(var item in data){
  str=item+"="+data[item];
  val+=str+'&';
 }
 return val.slice(0,val.length-1);
 }

로그인 후 복사

요청 방법:

if(this.config.type=="POST"||this.config.type=="post"){
 xhr.addEventListener('readystatechange',complete);
 xhr.open(this.config.type,this.config.url,this.config.async);
 if(params.contentType){
  this.config.contentType=params.contentType;
  }
 xhr.setRequestHeader("Content-Type",this.config.contentType);
 xhr.send(serialize(this.config.data));
}

로그인 후 복사

두 요청의 차이점:

①GET 요청은 URL에서 볼 수 있는 매개변수 데이터를 URL에 기록하지만 POST는 할 수 없으므로 GET은 안전할 수 없습니다. POST가 더 안전합니다.

②GET으로 전송되는 데이터의 양은 적으며 2kb를 초과할 수 없습니다. POST로 전송되는 데이터의 양은 상대적으로 크며 일반적으로 기본적으로 제한이 없습니다.

3GET 서버 측은 Request.QueryString을 사용하여 변수 값을 가져오고, POST 서버 측은 Request.From을 사용하여 변수 값을 가져옵니다.

4GET는 일반적으로 ?를 활용하여 서버에 전달할 URL에 데이터를 추가합니다. , 다음 매개변수의 각 데이터 매개변수는 "이름 = 값"의 형태로 나타나며, 매개변수는 커넥터 &로 구분됩니다. POST 데이터는 HTTP 본문에 배치되며 & 링크 및 구분 기호를 포함하여 여러 가지 방식으로 구성됩니다. 매개변수를 숨기고 대량의 데이터를 전송할 수 있어 더욱 편리합니다.

4. JSONP가 도메인 간 요청을 보냅니다

먼저, 크로스 도메인의 상황은 무엇인가요?

도메인 이름 구성:

http:// www . abc.com: 8080 / scripts/AjaxPlugin.js

协议子域名主域名端口号请求资源地址

~当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同于。

~不同域之间互相请求资源，就算作“跨域”。

所有的浏览器都遵守同源策略，这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie，这就使浏览器隔离了来自不同源的内容，防止它们互相操作。所谓同源是指协议、域名和端口都一致的情况。浏览器会阻止ajax请求非同源的内容。

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 JS 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。但是jsonp跨域只支持get请求。

JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。

jsonp跨域主要需要考虑三个问题：

1、因为 script 标签的 src 属性只在第一次设置的时候起作用，导致 script 标签没法重用，所以每次完成操作之后要移除；

2、JSONP这种请求方式中，参数依旧需要编码；

3、如果不设置超时，就无法得知此次请求是成功还是失败；
由于代码有点长，就放个计时器的代码吧，完整代码见AjaxPlugin

//超时处理
if(params.time){
 scriptTag.timer=setTimeout(function(){
 head.removeChild(scriptTag);
 params.fail&&params.fail({message:"over time"});
 window[cbName]=null;
 },params.time);
}

로그인 후 복사

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