간단 한 소 개 는 라 이브 러 리(프레임 워 크)를 사용 하지 않 고 스스로 ajax 를 씁 니 다.
ajax 를 쓰 세 요.첫째,문 제 를 처리 하 는 과정 을 거 쳐 기 술 력 을 향상 시 킬 수 있 습 니 다.둘째,업무 중 에 가끔 이렇게 큰 라 이브 러 리(프레임 워 크)가 필요 하지 않 습 니 다.자신 이 쓴 것 으로 왜 기꺼이 하지 않 겠 습 니까?
먼저 유행 하 는 jQuery 가 ajax 를 어떻게 호출 하 는 지 살 펴 보 겠 습 니 다.
$.ajax({
url: 'test.php', // URL
type: 'GET', //
dataType: 'json', // xml, html, text, json, jsonp, script
data: 'k=v&k=v', //
async: true, //
cache: false, //
timeout: 5000, //
beforeSend: function(){}, //
error: function(){}, //
success: function(){}, //
complete: function(){} // ( )
});ajax 의 기초 지식 부터 알 아 보기
XML HttpRequest 대상
XML HttpRequest 대상 은 ajax 의 핵심 으로 XML HttpRequest 대상 을 통 해 서버 에 비동기 요청 을 하고 서버 에서 데 이 터 를 얻 으 며 모든 현대 브 라 우 저(IE7+,Firefox,Chrome,Safari,Opera)는 XML HttpRequest 대상(IE5 와 IE6 는 ActiveXObject 사용)을 지원 합 니 다.
호 환 되 는 XML HttpRequest 대상 만 들 기
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
서버 에 요청 보 내기
xhr.open(method,url,async);
//method:요청 한 형식;GET 또는 POST
//url:요청 한 URL
//async:true(비동기)또는 false(동기 화)
xhr.send(string);
//서버 에 요청 보 내기
//string:POST 요청 에 만 사용
//GET 는 POST 요청 방식 보다 간단 하고 빠 르 며 대부분의 경우 사용 할 수 있 습 니 다.
//아래 의 경우 POST 요청 을 사용 하 십시오.
//캐 시 파일 을 사용 할 수 없습니다(서버 에 있 는 파일 이나 데이터 베 이 스 를 업데이트 합 니 다)
//서버 에 대량의 데 이 터 를 보 냅 니 다(POST 데이터 양 제한 없 음)
//알 수 없 는 문 자 를 포함 하 는 사용자 의 입력 을 보 낼 때,POST 는 GET 보다 안정 적 이 고 신뢰 할 수 있 습 니 다.
서버 응답
XML HttpRequest 대상 의 responseText 나 responseXML 속성 을 사용 하여 서버 로부터 응답 을 받 습 니 다.
서버 에서 온 응답 이 XML 이 고 XML 대상 으로 분석 해 야 한다 면 responseXML 속성 을 사용 하 십시오.
서버 에서 온 응답 이 XML 이 아니라면 responseText 속성 을 사용 하 십시오.responseText 속성 은 문자열 형식의 응답 을 되 돌려 줍 니 다.
onreadystatechange 이벤트
서버 에 요청 이 전송 되 었 을 때 응답 기반 작업 을 수행 해 야 합 니 다.ready State 가 바 뀔 때마다 onready statechange 이벤트 가 발생 합 니 다.ready State 속성 에는 XML HttpRequest 의 상태 정보 가 저 장 됩 니 다.
XML HttpRequest 대상 의 세 가지 중요 한 속성:
onreadystatechange//저장 함수(또는 함수 명)는 ready State 속성 이 바 뀔 때마다 이 함 수 를 호출 합 니 다.
ready State//XML HttpRequest 가 저 장 된 상태 가 0 에서 4 로 변 합 니 다.
0:초기 화 요청 하지 않 음
1:서버 연결 이 완료 되 었 습 니 다
2:요청 접수 됨
3:요청 처리 중
4:요청 이 완료 되 었 고 응답 이 완료 되 었 습 니 다.
status//200:"OK",404:페이지 를 찾 을 수 없습니다
onreadystatechange 이벤트 에서 저 희 는 서버 응답 이 처 리 될 준비 가 되 어 있 을 때 수행 하 는 작업 을 규정 합 니 다.ready State 가 4 와 status 가 200 일 때 응답 이 완료 되 었 음 을 표시 합 니 다.
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
// xhr.responseText xhr.responseXML
}
};
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
// xhr.responseText xhr.responseXML
}
};
xhr.open(method,url,async);
xhr.send(string);
url += (url.indexOf('?') < 0 ? '?' : '&') + '_='+ (+new Date());
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');먼저 기본 적 인 것 을 쓰 고 각종 매개 변수 옵션 을 정의 하여 참고 하 시기 바 랍 니 다.
var $ = (function(){
//
function param(data){
//..
}
function ajax(opts){
var _opts = {
url : '/', // URL
type : 'GET', // GET( ), POST
dataType : '', // xml, html, text, json, jsonp, script
data : null, // 'key=value&key=value', {key:value,key:value}
async : true, // ture( ), false
cache : true, // ture( ), false
timeout : 5, // 5
load : function(){}, //
error : function(){}, //
success : function(){}, //
complete : function(){} // ( )
}, aborted = false, key,
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
for(key in opts) _opts[key] = opts[key];
/*
if(_opts.dataType.toLowerCase() === 'script'){
//..
}
if(_opts.dataType.toLowerCase() === 'jsonp'){
//..
}
*/
if(_opts.type.toUpperCase() === 'GET'){
if(param(_opts.data) !== ''){
_opts.url += (_opts.url.indexOf('?') < 0 ? '?' : '&') + param(_opts.data);
}
!_opts.cache && ( _opts.url += (_opts.url.indexOf('?') < 0 ? '?' : '&') + '_='+(+new Date()) );
}
function checkTimeout(){
if(xhr.readyState !== 4){
aborted = true;
xhr.abort();
}
}
setTimeout(checkTimeout, _opts.timeout*1000);
xhr.onreadystatechange = function(){
if( xhr.readyState !== 4 ) _opts.load && _opts.load(xhr);
if( xhr.readyState === 4 ){
var s = xhr.status, xhrdata;
if( !aborted && ((s >= 200 && s < 300) || s === 304) ){
switch(_opts.dataType.toLowerCase()){
case 'xml':
xhrdata = xhr.responseXML;
break;
case 'json':
xhrdata = window.JSON && window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');
break;
default:
xhrdata = xhr.responseText;
}
_opts.success && _opts.success(xhrdata,xhr);
}else{
_opts.error && _opts.error(xhr);
}
_opts.complete && _opts.complete(xhr);
}
};
xhr.open(_opts.type,_opts.url,_opts.async);
if(_opts.type.toUpperCase() === 'POST'){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send(_opts.type.toUpperCase() === 'GET' ? null : param(_opts.data));
}
return {
ajax: ajax
}
})();여기 서 dataType 은 예상 서버 에 되 돌아 오 는 데이터 형식:xml,html,text,json,jsonp,script
1.xml 일 때 서버 에서 응답 하 는 것 은 XML 입 니 다.responseXML 속성 을 사용 하여 되 돌아 오 는 데 이 터 를 가 져 옵 니 다.
2.html,text,json 일 때 responseText 속성 을 사용 하여 되 돌아 오 는 데 이 터 를 가 져 옵 니 다.
a.html 일 때 일반 텍스트 HTML 정 보 를 되 돌려 줍 니 다.그 안에 포 함 된 script 태그 가 dom 을 삽입 할 때 실행 할 지 여부(코드 복잡 도+3)
b.제 이 슨 일 때 JSON 데 이 터 를 되 돌려 줍 니 다.안전 하고 편리 하 며 호 환 되 어야 합 니 다. ( 코드 복잡 도+2)
3.jsonp 일 때 보통 도 메 인 을 넘 어서 야 사용 합 니 다.원래 ajax 요청 을 하지 않 고 script 법(코드 복잡 도+2)을 만 듭 니 다.
4.script 일 때: 도 메 인 을 넘 으 려 면 원래 ajax 요청 을 하지 않 고 script 법(코드 복잡 도+1)을 만 듭 니 다.도 메 인 을 넘 지 않 고 일반 텍스트 자 바스 크 립 트 코드 를 되 돌려 주 고 responseText 속성 으로 되 돌아 오 는 데 이 터 를 가 져 옵 니 다(코드 복잡 도+1)
그 중에서 html 세 션 의 script 태그,jsonp,script 은 모두 script 태 그 를 만 드 는 방식 을 사용 해 야 합 니 다.
dataType 을 json 으로 처리 합 니 다.
xhrdata = window.JSON && window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');
이것 은 가장 간단 한 처리 방식 입 니 다.JSON 이 호 환 되 려 면 json 2.js 를 사용 할 수 있 습 니 다.
dataType 을 jsonp 로 처리 합 니 다.
jsonp 는 script 탭 을 통 해 도 메 인 을 요청 하려 고 합 니 다.먼저 다음 절 차 를 알 아 보 세 요.
이 위의 그림 에서 a.html 에서 요 구 했 습 니 다http://www.b.com/b.php?callback=add （ajax 프로그램 에서 url 을 요청 하 는 것 이 이 링크 입 니 다)b.php 에서 전 달 된 인자 callback=add 를 읽 었 습 니 다. 가 져 온 매개 변수 값(값 은 add)에 따라 JS 문법 으로 함수 명 을 만 들 고 json 데 이 터 를 매개 변수 로 이 함수 에 전 달 했 습 니 다.JS 문법 으로 생 성 된 문 서 를 a.html,a.html 로 해석 하고 되 돌아 온 JS 문 서 를 되 돌려 주 고 정 의 된 add 함 수 를 호출 했 습 니 다.
프로그램 에서 일반적으로 더 일반적인 방식 으로 호출 합 니 다.예 를 들 어 아래 에 광범 위 하 게 사용 되 는 loadJS 함수:
function loadJS(url, callback) {
var doc = document, script = doc.createElement('script'), body = doc.getElementsByTagName('body')[0];
script.type = 'text/javascript';
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
callback && callback();
}
};
} else {
script.onload = function() {
callback && callback();
};
}
script.src = url;
body.appendChild(script);
}
loadJS('http://www.b.com/b.php?callback=add');
ajax 처리 jsonp 도 두 가지 상황 이 있 습 니 다.
1.URL 요청 후 인자 callback=add 를 설정 하 였 습 니 다.특히 함수 이름 add 를 정의 하 였 습 니 다.되 돌아 오 기 를 요청 하면 JS 코드 가 즉시 실 행 됩 니 다.(여기 가 add 호출 입 니 다.({"a":8,"b":2}) )
2.재opts.success 에서 JSON 데 이 터 를 처리 하 는 것 은 성공 적 인 반환 을 요청 하 는 것 입 니 다.JS 코드 가 실행 되 지 않 고 함수 중의 인 자 를 빼 서 로 합 니 다.opts.success 의 매개 변 수 를 되 돌려 줍 니 다.
dataType 을 html 로 처리 합 니 다.
HTML 세 션 의 script 탭 을 처리 하지 않 으 면 responseText 반환 값 을 DOM 트 리 에 삽입 하면 됩 니 다.script 을 처리 하려 면 HTML 세 션 의 script 라벨 을 찾 아 script 을 따로 처리 하고 script 태그 에 포 함 된 JS 코드 인지 src 를 통 해 요청 하 는 지 주의 하 십시오.
dataType 을 script 으로 처리 합 니 다.
도 메 인 을 넘 으 려 면 script 을 만 드 는 방식 으로 jsonp 를 처리 하 는 것 과 유사 합 니 다.도 메 인 을 넘 지 않 고 responseText 속성 으로 되 돌아 오 는 데 이 터 를 가 져 옵 니 다.eval 로 코드 를 실행 할 수도 있 고 script 을 만들어 서 실행 할 수도 있 습 니 다.
function addJS(text) {
var doc = document, script = doc.createElement('script'), head = doc.getElementsByTagName('body')[0];
script.type = 'text/javascript';
script.text = text;
body.appendChild(script);
}
이상 의 내용 은 편집장 이 여러분 과 공유 하 는 라 이브 러 리(프레임 워 크)를 사용 하지 않 고 스스로 ajax 를 쓰 는 것 입 니 다.여러분 이 좋아 하 시 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
