Ajax 기초 튜 토리 얼 패키지 (3)

지난 글 에서 Ajax 기초 상세 설명 튜 토리 얼 (1) 을 소개 했다.    Ajax 기초 상세 설명 튜 토리 얼 (2)
오늘 은 우리 가 지난 블 로그 의 밤 에 이 어 지금 은 수 요 를 확대 하 겠 습 니 다. 예전 에는 버튼 을 눌 러 뉴스 를 꺼 냈 는데 지금 은 사건 마다 뉴스 업 데 이 트 를 실현 해 야 합 니 다.이 럴 때 는 타 이 머 를 추가 한 다음 에 이벤트 마다 Ajax 요청 을 한 번 더 합 니 다. Ajax 요청 을 자주 사용 하려 면 패 키 징 함수 가 필요 합 니 다. 먼저 지난 밤의 js 코드 를 살 펴 보고 패 키 징 을 하 겠 습 니 다.

window.onload = function() {
var oBtn = document.getElementById('btn'); 
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} 
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) { //             
var data = JSON.parse( xhr.responseText ); //           json      json      ：title date
var oUl = document.getElementById('ul1'); //            
var html = '';
for (var i=0; i'+data[i].title+' ['+data[i].date+']';
}
oUl.innerHTML = html; //        
} else {
alert('   ,Err：' + xhr.status);
}
}
}
}
}
 

패 키 징 함수 의 요점 은 중복 사용 하 는 부분 을 추출 하 는 것 이 며, 동시에 일부 변 화 된 것 을 매개 변수 로 하여 매개 변수 로 판단 처리 할 수 없다 는 것 이다.
1. 그래서 우 리 는 먼저 변화 하 는 것 이 어떤 것 이 있 는 지 살 펴 보 겠 습 니 다. 1. 요청 방식 은 get / post 2 가 요청 한 주소 3 요청 한 데이터 4 요청 이 성공 한 후에 해 야 할 일 입 니 다.
그래서 이 네 개 는 함수 의 매개 변수 로 합 니 다: ajax (method, url, data, success);
2. 서로 다른 요청 방식 으로 우리 가 데 이 터 를 전달 하 는 방식 이 다 르 기 때문에 이에 대해 조건 판단 이 필요 합 니 다.
3. 또 하나의 문 제 는 xhr. responseText 에 관 한 것 입 니 다. 변수 xhr 는 패 키 징 함수 에서 설명 되 기 때문에 이 물건 은 ajax 함수 에 속 합 니 다. 우 리 는 success 함수 에서 사용 할 수 없 지만 success 라 는 함수 에서 이 데 이 터 를 사용 해 야 합 니 다.그래서 방법 은 패키지 함수 에서 success 함 수 를 호출 할 때 xhr. responseText 를 매개 변수 로 전달 하 는 것 입 니 다.success(xhr.responseText)。
사실 이것 은 일종 의 반전 입 니 다. 반전 은 하나의 함수 가 다른 함수 의 매개 변수 로 서 다른 함수 에서 호출 되 었 습 니 다. 이 밤 은 바로 success 가 ajax 함수 의 매개 변수 로 서 ajax 에서 호출 되 었 습 니 다.(사실은 개인 적 으로 함수 가 매개 변 수 를 사용 하고 함수 의 매개 변 수 는 바로 사용 하 는 것 이 라 고 생각 합 니 다. 다만 현재 매개 변 수 는 함수 이기 때문에 호출 하 는 것 입 니 다)
그래서 포장 한 후에 바로 이렇다.

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText); //             &&            ，      。
} else {
alert('   ,Err：' + xhr.status);
}
}
}
} 

호출 이 이 렇 습 니 다.

ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); 
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i'+data[i].title+' ['+data[i].date+']';
}
oUl.innerHTML = html;
}); 

사실 이 패 키 지 는 그리 좋 지 않 습 니 다. 예 를 들 어 위의 data 에 데이터 가 없 으 면 우 리 는 자 리 를 차지 해 야 합 니 다. 예 를 들 어 jquery 에서 json 형식 으로 인삼 을 전달 하 는 것 이 편리 합 니 다. 아직 정리 되 지 않 았 고 후기 에 보충 해 야 합 니 다.