Ajax 기초 상세 설명 튜 토리 얼(2)

지난 글 에서 여러분 께Ajax 기초 상세 설명 튜 토리 얼(1)Ajax 에서 open 방법의 세 번 째 매개 변수 비동기 와 동기 화 문 제 를 소 개 했 습 니 다.오늘 은 계속 이 야 기 를 나 누 겠 습 니 다.먼저 지난 번 의 코드 를 이 어 가 겠 습 니 다.

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','1.txt',true); //       
xhr.send();//    
//          
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { //        ，     
alert( xhr.responseText ); //     
} 
}
} 

다음은'xhr.send()'에 대해 이야기 하 겠 습 니 다.이 한 마디 는 진정 으로 데 이 터 를 요청 하 는 것 입 니 다.open 방법 은 요청 매개 변 수 를 설정 한 것 입 니 다.
지금 은 요청 이 제출 되 었 습 니 다.서버 가 응답 하 기 를 기다 리 고 있 습 니 다.이 럴 때 Ajax 의 속성 이 등장 합 니 다.바로 responseText 입 니 다.ajax 가 반환 을 요청 한 내용 은 모두 여기에 놓 여 있 습 니 다.또한 요청 한 내용 이 무엇 이 든 문자열 형식 으로 저 장 됩 니 다.
물론 위 에서 언급 한 바 와 같이 비동기 요청 을 하려 면 서버 에서 요청 한 내용 에 대한 응답 이 끝 났 는 지 조건 판단 이 필요 합 니 다.이때 다른 속성 이 등장 합 니 다.ready State 는 Ajax 요청 과정의 서로 다른 상 태 를 대표 합 니 다.매개 변 수 는 다음 과 같 습 니 다.
0(초기 화)아직 open()방법 이 호출 되 지 않 았 습 니 다.
1(불 러 오기)send()방법 을 호출 하여 요청 을 보 내 고 있 습 니 다.
2(불 러 오기 완료)send()방법 이 완료 되 었 습 니 다.모든 응답 내용 을 받 았 습 니 다.
3(해석)응답 내용 을 분석 하고 있 습 니 다.(받 은 내용 은 사람 이 알 아 볼 수 있 는 내용 이 아니 기 때문에 해석 이 필요 합 니 다.)
4(완료)응답 내용 분석 완료,클 라 이언 트 에서 호출 가능
위 에서 우 리 는 얻 을 수 있 습 니 다.상태 2 때 이미 요청 한 내용 에 응 했 습 니 다.그러나 이 내용 은 우리 가 알 아 볼 수 없습니다.기계 가 알 기 때문에 3 이 있 습 니 다.이 내용 을 해석 해 주 고 해석 이 완성 되면 4 가 됩 니 다.이때 의 내용 은 우리 전단 에서 사용 할 수 있 습 니 다.
상 태 는 있 지만 우 리 는 언제 어떤 상태 인지 어떻게 알 수 있 습 니까?이 럴 때 우 리 는 상 태 를 감시 하 는 사건 을 사용 해 야 합 니 다.onready statechange 사건 은 상태 값 이 바 뀌 었 을 때 이 사건 을 촉발 시 킬 수 있 습 니 다.그래서 상태 가 4 일 때 우 리 는 다시 내용 을 연주 합 니 다.
위의 코드 는 기본적으로 원 리 를 이 해 했 지만 가장 완벽 한 것 은 아니다.이때 우 리 는 상 태 를 감시 하고 내용 에 응 했 지만 내용 이 반드시 옳 은 것 은 아니다.예 를 들 어 내용 이 잘못 되 었 을 수도 있 고 우리 가 존재 하지 않 는 페이지 를 요 청 했 을 수도 있다.이때 ready State 는 오 류 를 판단 할 수 없다.우 리 는 내용 이 정상 인지 알 아야 한다.이때 또 다른 속성 status 속성 이 등장 합 니 다.이것 은 Ajax 상태 가 아니 라 서버(자원 요청)상태,http 상태 코드 를 대표 합 니 다.상태 코드 가 많 습 니 다.그 중에서 비교적 유명한 것 은 200,성공 상태 코드 와 404 Not Found 입 니 다.다른 사람들 은 개인 적 으로 찾 아 보 세 요.여기 보 여요.

그래서 저희 코드 는 좀 더 개선 을 해 야 돼 요.

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','1.txt',true); //       
xhr.send();//    
//          
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { 
if(xhr.status == 200) {//      ，           
alert( xhr.responseText );//     
}else{alert('   ' + xhr.status); //             
} 
}
} 

Ajax 의 대략적인 절 차 는 이렇다.물론 세부 적 인 문제 도 있 으 니 주의해 야 할 것 은 계속 내 려 다 보 세 요.
작업 중 백 엔 드 에 데 이 터 를 전달 하 는 데 존재 하 는 문제점:
GET 요청:
1.캐 시 문제:배경 이 바 뀌 었 습 니 다.사이트 주소 가 바 뀌 지 않 았 기 때문에 배경 이 아 닌 캐 시 로 내용 을 추출 합 니 다.
밤 을 보 세 요:만약 에 우리 가 단 추 를 누 르 면 이름과 나 이 를 팝 업 하려 고 합 니 다.GET 요청 은 수치 로 연결 되 어 인터넷 주소 에서 데 이 터 를 전달 하 는 것 이기 때문에 우리 의 open 방법 은 직접 이렇게 쓸 수 있 습 니 다.

xhr.open('get','1.get.php?username=  &age=21',true); 

배경 코드 가 변 하지 않 음

<?php
header('content-type:text/html;charset="utf-8"'); //      ，      
error_reporting(0);
$username = $_GET['username'];//  get       
$age = $_GET['age'];
echo "    ：{$username}，  ：{$age}"; //    

지금 클릭 하면 당신 의 이름 이 나 올 것 입 니 다.목 청,나이 21 입 니 다.
이 럴 때 브 라 우 저 에 캐 시 가 있 습 니 다.다음 에 같은 사이트 에 방문 하면 캐 시 에서 가 져 옵 니 다.
예 를 들 어 나 는 지금 팝 업 을 하고 싶 습 니 다.환영 합 니 다.당신 의 이름 은 목 청,나이 21 입 니 다.

echo "  ，    ：{$username}，  ：{$age}"; //     

백 엔 드 코드 가 바 뀌 었 지만 GET 요청 사이트 주 소 는 여전히 1.get.phop?username=목 청&age=21 이 므 로 백 엔 드 는 브 라 우 저 캐 시 로 찾 아 보 는데 결 과 는 그대로 팝 업 됩 니 다.모두 스스로 테스트 할 수 있다.
그래서 이 럴 때 우 리 는 캐 시 문 제 를 해결 해 야 한다.사이트 에 접근 하 는 것 이 변 하지 않 으 면 캐 시 를 찾 습 니 다.그러면 우 리 는 사이트 주 소 를 계속 바 꾸 었 으 면 좋 겠 습 니 다.그래서 우 리 는 뒤에서 계속 변화 하 는 변 수 를 추가 할 수 있 습 니 다.예 를 들 어 시스템 이벤트 나 무 작위 수 를 추가 해도 됩 니 다.아래 와 같이:

xhr.open('get','1.get.php?username=  &age=21&'+new.Date.getTime(),true); 

이렇게 하면 캐 시 문제 가 존재 하지 않 을 것 이다.어떤 사람들 은 이렇게 쓰 고 뒤에서 t 라 는 이름 을 지어 준다.이때 배경 에 도 t 라 는 변수 가 있 으 면 문제 가 생 길 수 있 기 때문에 추천 하지 않 는 다.

xhr.open('get','1.get.php?username=  &age=21&t='+new.Date.getTime(),true); 

post 요청
1.지난 시간 에 우 리 는 양식 에 전통 적 인 방식 으로 POST 가 요청 한 내용 을 요청 머리 에 넣 었 다 는 것 을 알 고 있 습 니 다.그러면 Ajax 는 어디 에 두 었 습 니까?
post 데 이 터 를 send 에 넣 어 매개 변수 로 전달 합 니 다.
2.또 하 나 는 폼 에 있 는 세 번 째 인 자 를 알 고 있 었 습 니 다.enctype:제출 한 데이터 형식 입 니 다.기본 값 은 application/x-www-form-urlencoded 입 니 다.그러나 Ajax 에 서 는 쓰 지 않 으 면 없습니다.기본 값 이 없 기 때문에 요청 헤더 에 제출 한 데이터 형식 을 지정 해 야 합 니 다.그렇지 않 으 면 브 라 우 저 는 어떤 형식 으로 해석 할 지 모 릅 니 다.
그래서 post 요청 은 아래 두 문장 을 설정 해 야 합 니 다.

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=  &age=21&'); 

캐 시 문제 가 없습니다.서버 에 만 데 이 터 를 제출 하기 때문에 데 이 터 를 제출 하 는 것 은 캐 시 되 지 않 고 데 이 터 를 가 져 와 야 캐 시 됩 니 다.이것 이 바로 웹 의 메커니즘 이다.
앞에서 말 한 것 은 모두 요청 데이터 입 니 다.이제 백 엔 드 에서 요청 을 받 고 우리 에 게 응답 하 는 내용 을 살 펴 보 겠 습 니 다.
먼저 백 엔 드 가 데이터 에 대한 처 리 를 보십시오.백 엔 드 의 데이터 형식 도 매우 많 습 니 다.우 리 는 이런 데 이 터 를 전단 에 직접 줄 수 없 기 때문에 백 엔 드 도 일정한 처 리 를 해 야 합 니 다.방법 이 있 습 니 다 jsonencode 는 데이터 형식 에 따라 다른 형식 을 출력 할 수 있 습 니 다.밑 에 밤 봐.

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('le','mo'); //        
$arr2 = array('username'=>'le','age'=>32); // 2        
echo json_encode($arr1); // ["le","mo"]             
echo json_encode($arr2); // {"username":"le","age":32}            json   

백 엔 드 출력 내용 형식 은 배열 과 json 이지 만 제 전 제 는 alert(xhr.response Text)입 니 다./이 팝 업 은 모두 문자열 형식 이기 때문에 형식 상 json 과 배열 로 보이 지만 실제 데이터 형식 은 문자열 입 니 다.
그래서 우 리 는 전단 에서 이 문자열 들 을 변환 해 야 한다.이 럴 때 딱 두 가지 방법 을 썼어 요.
1 stringify():json 대상 을 문자열 로 변환 한 문자열 은 엄격 한 json 형식 입 니 다.
2 parse():문자열 을 대상 으로 바 꾸 면 백 엔 드 에서 돌아 오 는 문자열 을 JSON 형식 으로 바 꿀 수 있 습 니 다.json 에 대해 서 는 엄격 한 json 형식의 문자열 만 바 꿀 수 있 습 니 다.문자열 의 키 는 작은 따옴표 로 묶 습 니 다.이렇게{"username":"le","age":32}
다음은 실제 사례 를 살 펴 보 자.
수요:페이지 단 추 를 누 르 면 페이지 가 새로 고침 되 지 않 습 니 다.아래 에 뉴스 목록 을 표시 하고 설명 을 보면 알 수 있 을 것 입 니 다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>     </title>
<!--<script src="jquery.js"></script>-->
<script>
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 ) {
//alert( xhr.responseText );                  json        
var data = JSON.parse( xhr.responseText ); //           json      json      ：title date
var oUl = document.getElementById('ul1'); //           
var html = '';
for (var i=0; i<data.length; i++) { //      json  ，           
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //        
} else {
alert('   ,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="  " id="btn" />
<ul id="ul1"></ul>
</body>
</html> 
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'                ','date'=>'2014-1-6'),
array('title'=>'              "   "','date'=>'2014-1-6'),
array('title'=>'  :            :      ','date'=>'2014-1-6'),
array('title'=>'                     ','date'=>'2014-1-6'),
array('title'=>'：              ','date'=>'2014-1-6'),
);
echo json_encode($news); 

자,오늘 의 Ajax 는 여기까지 이야기 하 겠 습 니 다.여러분 들 이 얻 은 것 이 있 기 를 바 랍 니 다.잘못된 것 이 있 으 면 지적 해 주 십시오.많은 사람들 이 프로필 사진 을 보고 들 어 오 는 것 을 보 았 습 니 다.론 가 는 정말 무슨 말 을 하 는 지 모 르 겠 습 니 다.아니면 이성 적 으로 의견 을 많이 제시 해 주 셨 으 면 좋 겠 습 니 다.다음 에 Ajax 에 대한 포장 과 실제 응용 에 대해 이야기 하 겠 습 니 다.
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 Ajax 기초 상세 해석 강좌(2)의 모든 서술 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!