Ajax 간단 한 비동기 대화 및 Ajax 원생 작성

비동기 상호작용 이 라 고 하면 ajax 라 고 할 수 있 습 니 다.마치 ajax 라 는 기술 이 비동기 상호작용 의 대명사 가 된 것 같 습 니 다.다음은 ajax 의 핵심 대상 을 연구 하 겠 습 니 다!
ajax 를 이용 하여 비동기 적 인 상호작용 을 실현 하 는 것 은 4 단계 가 아 닙 니 다.
1.ajax 핵심 대상 만 들 기
2.서버 와 연결
3.서버 에 요청 보 내기
4.서버 응답 을 받 는 데이터
신비 로 워 보 이 는 비동기 적 인 상호작용 이 네 걸음 을 명확 하 게 한 후에 여러분 의 머 릿 속 에 이미 초보적인 사고 가 있 을 것 입 니 다.
우선 ajax 의 핵심 대상 을 만 듭 니 다.브 라 우 저의 호환성 문제 로 인해 ajax 핵심 대상 을 만 들 때 호환성 문 제 를 고려 할 수 없습니다.비동기 적 인 상호작용 을 실현 하려 면 첫 번 째 단계 에서 ajax 핵심 대상 을 성공 적 으로 만 들 었 는 지 여 부 를 기반 으로 하기 때 문 입 니 다.

function getXhr(){
//   XMLHttpRequest  
var xhr = null;
//               
if(window.XMLHttpRequest){
//    IE       
xhr = new XMLHttpRequest();
}else{
//   IE   
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
//       
var xhr = getXhr(); 

상기 코드 를 통 해 저 희 는 ajax 핵심 대상 을 성공 적 으로 만 들 었 습 니 다.저 희 는 변수 xhr 에 저장 하고 다음 에 언급 한 ajax 핵심 대상 은 모두 xhr 로 대 체 됩 니 다.
두 번 째 단 계 는 서버 와 연결 하여 ajax 핵심 대상 을 통 해 open(method,url,async)방법 을 호출 하 는 것 입 니 다.
open 방법의 형 삼 해석:
method 는 요청 방식(get 또는 post)을 표시 합 니 다.
url 은 요청 한 phop 의 주 소 를 표시 합 니 다.(요청 형식 이 get 일 때 요청 한 데 이 터 는 물음표 로 url 주소 뒤 를 따 르 고 아래 send 방법 은 null 값 으로 전 송 됩 니 다)
async 는 불 값 입 니 다.비동기 여 부 를 표시 합 니 다.기본 값 은 true 입 니 다.최신 규범 에서 이 항목 은 작성 할 필요 가 없습니다.왜냐하면 공식 적 으로 ajax 를 사용 하 는 것 은 비동기 화 를 실현 하기 위 한 것 이 라 고 생각 하기 때 문 입 니 다.

xhr.open("get","01.php?user=xianfeng");//  get       
xhr.open("post","01.php");//   post       

세 번 째 단 계 는 서버 에 요청 을 보 내 고 ajax 핵심 대상 을 이용 하여 send 방법 을 호출 합 니 다.
post 방식 이 라면 요청 한 데 이 터 는 name=value 형식 으로 send 방법 에 넣 어 서버 에 보 내 고 get 방식 으로 null 값 을 직접 전달 합 니 다.

xhr.send("user=xianfeng");//   post         
xhr.send(null);//   get   

네 번 째 단 계 는 서버 응답 이 돌아 온 데 이 터 를 수신 하고 onreadystatechange 이벤트 감청 서버 의 통신 상 태 를 사용 합 니 다.ready State 속성 을 통 해 서버 의 현재 통신 상 태 를 가 져 옵 니 다.status 는 상태 코드 를 얻 습 니 다.responseText 속성 을 이용 하여 서버 응답 을 받 은 데이터(text 형식의 문자열 형식 데 이 터 를 말 합 니 다).다음은 XML 형식의 데이터 와 유명한 json 형식 데 이 터 를 씁 니 다.

xhr.onreadystatechange = function(){
　　　　　　　　　　　　　　　//                ,            
　　　if(xhr.readyState == 4&&xhr.status == 200){
　　　　　　//          
　　　　　　var data = xhr.responseText;
　　　　　　 //   
　　　　　　 console.log(data);
　　 } 
};

ps:Ajax 간단 한 비동기 대화
ajax 간단 한 비동기 대화,get 방식 부터 말 할 수 있 습 니 다.
그러면 Ajax 와 서버 쪽 의 비동기 요청 을 만 들 려 면 세 개 를 완성 해 야 합 니 다.
STEP 1,XML HttpRequest 대상 생 성

if(window.XMLHttpRequest){//  IE7          
var xhr=new XMLHttoRequest();
}else if(window.ActiveXObject){
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
} 

단계 2,등록 리 셋 함수

xhr.onreadystatechange=callback;
  xhr.onreadystatechange=function(){
//codes here 
} 

STEP 3,연결 정보 설정
xhr.open("GET",url,true)//그 중에서 true 는 비동기 적 인 상호작용 을 나타 낸다.
단계 4,데이터 전송
xhr.send(null);