ajax 끝판왕 설명 만들기(Spring ajax는 따로...)

비동기 통신으로 

페이지의 새로 고침이 일어나지 않아도 서버로부터 데이터를 가져올 수 있습니다.

 

 

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

 

 

비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

 

최소 코드??

$.ajax({
	data : param
	,type : "POST"
	,url :  "url"
	,success : function(data){
		if(data == "true")
			alert("성공");
	}
	,error:function(request,status,error) {
		//alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
	}
})

 

최대 코드??

$.ajax({
  data : data
  ,type : "POST"
  ,url : 'url'
  ,dataType : 'text' 
  ,cache: false  
  ,contentType : false 
  ,processData : false 
  ,success : function(url){
  	alert("success");
  }
  ,error:function(request,status,error) {
    alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
  }
})

 

 

data : 서버에 전송할 데이터, key-value 형식의 Object 보내는 방법이 매우 다양하다.

새로운 방법으로 코드를 작성할 때마다 조금씩 추가 하려고 한다. 

 

var param = "contents=" + $("#contents").val() +"&title=" + $("#title").val();
// OR
var param = {
	"contents" : $("#contents").val()
	,"title" : $("#title").val()
}

data : param

var form_data = new FormData();
form_data.append('file', file);
data : form_data

data : $("#frm").serialize()

 

type : http 요청방식(GET, POST)

 

url : 데이터를 전송할 URL

 

dataType : 서버가 리턴하는 데이터 타입, success function에 보내주는 argument의 자료형을 지정한다.(xml, html, script, json, jsonp, text)

 

timeout : http요청에 대한 제한 시간을 지정(단위 : ms)

 

async : 비동기 전송으로 할 것인지 default는 true, 동기 전송으로 바꾸기 위해 false

 

cache : false 시 매요청 마다 캐시 갱신 true 시 첫번째 요청 데이터 사용

서버에 페이지 resource 요청시 캐시를 쓰지않고 모두 서버로 받음

 

contentType : default는 application/x-www-form-urlencoded; charset=UTF-8                               json으로 보내고 싶을 때 application/json

파일 업로드 시에는 false로 해주어야 한다.

 

processData : default는 true, 보내는 data를 url 뒤에 붙여 쿼리 스트링(key1=value&key2=value2)으로 만듬  false로 하면 {key1 : 'value1', key2 : 'value2' }의 형태로 보내게 됨  파일 업로드의 경우 false로 하여야 한다.

 

beforeSend : http요청 전에 발생하는 이벤트 헨들러

 

success : http요청 성공시 ajax에 대한 요청이 이루어지는 과정에서 오류가 없고 http 응답으로 왔을 때 

 

complete : http요청 완료시 수행하는 이벤트 헨들러

 

error : http요청 실패시 ajax에 대한 요청이 이루어지는 과정에서 오류가 있거나 http 응답으로 오지 않았을 때

 

global : 전역함수 활성 여부 설정 ( True/False)

 

 

 

같은 페이지 에서 ajax를 여러 번 쓸 때

ajaxSetup으로 공통 설정

 

$.ajaxSetup({
   type: "POST"
   ,error:function(request,status,error) {
     alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
   }

});


$.ajax({
    data : param1
    ,url : "url1"
    ,success:function(data){
    	//성공
    }
});

$.ajax({
    data : param2
    ,url : "url2"
    ,success:function(data){
    	//성공
    }
});