원생 자 바스 크 립 트 로 AJAX, JSONP 구현
11375 단어 전단 개발
AJAX 의 핵심 은 요.
XMLHttpRequest 。 온전 하 다
AJAX 요청 은 일반적으로 다음 과 같은 절 차 를 포함한다.XMLHttpRequest 대상 AJAX 봉인 요청ajax() 방법 으로 설정 대상 을 받 아들 입 니 다.params 。 function ajax(params) {
params = params || {};
params.data = params.data || {};
// ajax jsonp
var json = params.jsonp ? jsonp(params) : json(params);
// ajax
function json(params) {
// ， GET
params.type = (params.type || 'GET').toUpperCase();
// ，
params.data = formatParams(params.data);
var xhr = null;
// XMLHttpRequest
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
// IE6
xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
};
// ， readyState ， readystatechange
xhr.onreadystatechange = function() {
// readyState / ，4 ，
if(xhr.readyState == 4) {
var status = xhr.status;
// status： HTTP ， 2
if(status >= 200 && status < 300) {
var response = '';
//
var type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON
} else {
response = xhr.responseText; //
};
//
params.success && params.success(response);
} else {
params.error && params.error(status);
}
};
};
//
if(params.type == 'GET') {
// ： 、 (get ， )、 ( )；
xhr.open(params.type, params.url + '?' + params.data, true);
xhr.send(null);
} else {
xhr.open(params.type, params.url, true);
// ，
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//
xhr.send(params.data);
}
}
//
function formatParams(data) {
var arr = [];
for(var name in data) {
// encodeURIComponent() ： URI
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// ，
arr.push('v=' + random());
return arr.join('&');
}
//
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}
인 스 턴 스 사용:
ajax({
url: 'test.php', //
type: 'POST', // ， "GET"， "POST"
data: {'b': ' '}, //
success: function(res){ //
console.log(JSON.parse(res));
},
error: function(error) {} //
});
JSONP
동원 정책
AJAX 가 '크로스 도 메 인' 이 필요 한 이 유 는 브 라 우 저 입 니 다. 。즉, 한 페이지 의 AJAX 는 이 페이지 의 같은 소스 나 같은 도 메 인의 데이터 만 가 져 올 수 있다.어떻게 '동원' 이나 '동 역' 이 라 고 부 릅 니까? 、 、 。예 를 들 면:
http://example.com https://example.com ， ；
http://localhost:8080 http://localhost:1000 ， ；
http://localhost:8080 https://example.com ， 、 、 ， 。
， ：
XMLHttpRequest cannot load http://ghmagical.com/article/?intro=jsonp%E8%AF%B7%E6%B1%82&v=5520. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
그럼 어떻게 도 메 인 을 넘 어 요청 합 니까?이때
JSONP 이 등장 합 니 다!
JSONP(JSON with Padding) 크로스 필드 요청 방식 입 니 다.주요 원 리 는 이 용 했 습 니 다.script 탭 이 도 메 인 을 넘 어 요청 할 수 있 는 특성 은 src 속성 전송 요청 서버, 서버 반환 JavaScript 코드, 브 라 우 저가 응답 을 받 은 후에 바로 실 행 됩 니 다. 이것 은 통과 입 니 다. script 탭 이 외부 파일 을 인용 하 는 원 리 는 같 습 니 다.
JSONP 는 두 부분 으로 구성 되 어 있 습 니 다. 와 리 셋 함 수 는 일반적으로 브 라 우 저 에서 제어 하고 매개 변수 로 서버 에 보 냅 니 다 (물론 리 셋 함수 의 이름 도 고정 할 수 있 지만 클 라 이언 트 와 서버 의 이름 은 반드시 일치 해 야 합 니 다).서버 가 응답 할 때 서버 측은 이 함수 와 데 이 터 를 문자열 로 맞 춰 되 돌려 줍 니 다.
JSONP 의 요청 과정: 요청 단계: 브 라 우 저 생 성 script 라벨, 그리고 그 에 게 src 할당 http://example.com/api/?callback=jsonpCallback ）。 요청 보 내기: script 의 src 값 을 할당 할 때 브 라 우 저 에서 요청 을 합 니 다. 데이터 응답: 서버 에서 되 돌아 올 을 매개 변수 로 와 연결 하여 (형식 유사 "jsonpCallback({name: 'abc'}) 되 돌려 줍 니 다. 브 라 우 저가 응답 데 이 터 를 받 았 을 때 요청 한 것 은 script, 그래서 직접 호출 하 는 것 과 같다. jsonpCallback 방법, 그리고 하나의 인자 가 들 어 왔 습 니 다. 여기 서 원생 JavaScript 으로 어떻게 실현 하 는 지 설명해 주세요.
여전히 ajax() 방법 에 JSONP 를 추가 합 니 다. 그 다음 에 두 가 지 를 통합 합 니 다. JSONP 의 설정 매개 변 수 는 주로 하나의 jsonp 매개 변 수 를 추 가 했 습 니 다. 이것 이 바로 당신 의 반전 함수 이름 입 니 다.
function ajax(params) {
params = params || {};
params.data = params.data || {};
var json = params.jsonp ? jsonp(params) : json(params);
// jsonp
function jsonp(params) {
// script
var callbackName = params.jsonp;
var head = document.getElementsByTagName('head')[0];
//
params.data['callback'] = callbackName;
var data = formatParams(params.data);
var script = document.createElement('script');
head.appendChild(script);
// jsonp
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
params.success && params.success(json);
};
//
script.src = params.url + '?' + data;
// ，
if(params.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
params.error && params.error({
message: ' '
});
}, time);
}
};
//
function formatParams(data) {
var arr = [];
for(var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
};
// ，
arr.push('v=' + random());
return arr.join('&');
}
//
function random() {
return Math.floor(Math.random() * 10000 + 500);
}
}
주의: 왜냐하면 script 라벨 의 src 속성 은 첫 번 째 설정 시 에 만 작용 하여 script 탭 을 다시 사용 할 수 없 기 때문에 작업 이 끝 날 때마다 제거 해 야 합 니 다.
인 스 턴 스 사용:
ajax({
url: 'test.php', //
jsonp: 'jsonpCallback', // jsonp ， "jsonpCallbak"，
data: {'b': ' '}, //
success:function(res){ //
console.log(res);
},
error: function(error) {} //
});
이 배경 에서 PHP 로 처리 하기:
'jsonp');
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : '';
echo $callback.'('.json_encode($data).')';
： 。
， ， ：
function jsonpCallback() {}
。
, 。http://ghmagical.com/
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Chrome Extension 2 편 -- 통신메모: 만약 여러 페이지 가 onMessage 사건 을 감청 한다 면, 어떤 사건 에 대해 서 는 sendResponse () 를 처음 호출 하 는 것 만 성공 적 으로 응답 할 수 있 고, 모든 다른 응답 은 무 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
