jQuery Ajax에 관하여

[noahyunjun]

Ajax

1. javascript로 ajax 통신을 하는 경우

// 현재 사용되지 않기 때문에 추가 설명은 없습니다.

function sendRequest(){
var httpRequest = new XMLHttpRequest();
//POST방식의 Ajax통신
httpRequest.open("POST", "request_ajax.jsp", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("city=Seoul&zipcode=55775");

    httpRequest.onreadystatechange = function(){
      if(httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200){
        document.getElementById("text").innerHTML = httpRequest.responseText;
      }
    }
}

2. jQuery로 ajax통신을 하는 경우

function sendRequest(){
    $.ajax({
        type:'post or get',
        async:'true or false',
        url:'요청할 url',
        data:{전송할 데이터},
        dataType: '전송받을 데이터 형식',
        success: {
            //정상 요청, 응답 시 처리 작업
        },
        error : function(xhr,status,error) {
            //오류 발생 시 처리
        },
        complete:function(data,textStatus) {
            //작업 완료 후 처리
        }
    });
}

2-1. jQuery ajax 통신

속성	설명
type	통신 타입을 설정
url	요청 URL
async	비동기 여부
data	서버에 요청시 보낼 매개변수
dataType	받을 데이터 타입
success	요청/응답에 성공했을때 구문
error	요청/응답에 실패 했을때 구문
complete	작업을 마친 후에 처리할 구문

3. jQuery 1.5 버전에 추가된 내용

 var jqy = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

jqy는 요청이 완료된 후에도 저장되어있습니다.

따라서 위 코드가 끝난 이후에 또 다른 경우에 대해 함수를 적용 할 수 있습니다.

 예시 : jqy.complete(function() {alert("complete") });

사용법

$.post("a.ku");

• test.ku에 요청

$.post("a.ku", {text:"one", text2:"two"});

• 데이터를 포함하여 a.ku에 요청

$.post("a.ku", $("#aForm").serialize());

• 폼 내부 데이터를 보냄.

---

• 반환된 결과를 사용하는 방법

 $.post("a.ku", data , function(data){
     alert(data)
 });

여기서 data는 서버에 적재할 데이터 입니다.
반환된 데이터는 기존 프로젝트에서 받는 형태로 받는다고 생각하면 됩니다.(string)

[noahyunjun]

$.post를 변수에 넣지 않아도 사용할수 있습니다.

[gabrielyoon7]

커밋 내용을 보니깐 ajax쪽 리팩토링을 아주 잘 해주고 있는 것 같네요.