Ajax 가 요청 한 5 단계

1. 원생 JS 의 Ajax:
1. ajax 로 데 이 터 를 보 내 는 절차
첫 번 째 단계: 비동기 대상 만 들 기

var xhr = new XMLHttpRequest();

두 번 째 단계: 요청 행 open 설정 (요청 방식, 요청 url):

// get           url      ，
// post     ，         xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");

세 번 째 단계: 설정 요청 (GET 방식 무시) 헤더: setRequestHeader ()

// 1.get     
// 2.post       ：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

STEP 4: 요청 체 send () 설정

// 1.get    url   ，             
// 2.post           (     )
xhr.send(null) xhr.send("username="+name);

다섯 번 째 단계: 비동기 대상 에 게 서버 응답 데 이 터 를 받 도록 합 니 다.
성공 적 인 응답 은 두 가지 조건 이 있 습 니 다.

서버 가 성공 적 으로 응답 했다.

비동기 대상 의 응답 상 태 는 4 (데이터 분석 이 완료 되면 사용 할 수 있 습 니 다) 입 니 다.

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

ajax - get 방식 요청 사례:

var xhr = new XMLHttpRequest();
xhr.open("get","validate.php?username="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
	if(xhr.status == 200 && xhr.readyState == 4){ 
   	 	console.log(xhr.responseText);
    	document.querySelector(".showmsg").innerHTML = xhr.responseText;;
 	}
}

ajax - post 방식 요청 사례:

var xhr = new XMLHttpRequest();
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
	//          ，           
	if(xhr.status == 200 && xhr.readyState == 4){
 		document.querySelector(".showmsg").innerHTML = xhr.responseText;
	}
}

2. Jquery 의 Ajax

$.ajax({
            type: "get",// get  post
            url: "abc.php",//    url  
            data: {},//     
            dataType: "json",//json  jq                  JSON.parse    
            timeout: 3000,//3      
            beforeSend: function () {
                //             
                // return false   ajax            return false     
            },
            success: function (data) { //              data       
            },
            error: function () {//     
            },
            complete: function () {//                
            }
        })
        //   
        $.ajax({
            type: "get",
            url: "",
            data: {},
            dataType: "json",
            success: function (data) {
            }
        })

$. ajax () 모두 보 낼 수 있 습 니 다

$. post (url, data, success, datatype): 본질 적 으로 post 요청 만 보 낼 수 있 습 니 다

$. get (url, data, success, datatype): 본질 적 으로 get 요청 만 보 낼 수 있 습 니 다