Jquery Ajax 정리

출처: http://blog.naver.com/PostView.nhn?blogId=kimgas2000&logNo=90132135285

jQuery.ajax (options)

HTTP 통신에서 페이지를로드합니다. 이 함수는 jQuery의 AJAX 통신의 기본 부분에서 실제로 $. get및 $. post 같은 함수를 사용하는 것이 쉽게 구현할 수 있습니다. 그러나 이러한 추상화된 함수는 구현의 용이성과 교환에 오류시 콜백과 같은 복잡한 기능을 잃고 있습니다. 그런 처리를 구현하려면, 역시 핵심이다이 함수를 사용해야합니다. $. ajax 함수는 반환값으로 XMLHttpRequest 객체를 반환합니다. 대부분의 경우이 개체를 직접 조작하는 것은 없다고 생각되지만, 예를 들어 던져 버린 요청을 중단하는 경우 등, 필요하면 이용하십시오. 이 함수는 인수를 하나만 취하지만, 실제로는 해시에서 키 - 값 조합은 많은 옵션을받습니다. 다음에 그 목록을 싣고 있으므로 참고하시기 바랍니다.

async / boolean

비동기 통신 플래그. 기본값은 true (비동기 통신)에서 요청이 던져에서 응답할 때까지 사용자 에이전트는 비동기 처리를 계속합니다. false로 설정 (동기 통신)하면 통신에 응답이있을 때까지 브라우저는 잠겨 조작을 받아들이지 않을 것을주의하십시오.

beforeSend / function

AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 입니다. 반환값을 false로 설정하면 AJAX 전송을 취소할 수 있습니다.

function (XMLHttpRequest) { 
  this / / AJAX 전송 설정 옵션을 나타내는 개체 
}

cache / boolean

jQuery 1.2. 초기값은 일반적으로 true이지만 dataType이 script의 경우에는 false입니다. 통신 결과를 캐시하지 않으에는 false로 설정하십시오.

complete / function

AJAX 통신 완료될 때 호출되는 함수입니다. success이나 error가 호출된 후에 호출되는 Ajax Event 입니다.

function (XMLHttpRequest, textStatus) { 
  this / / AJAX 전송 설정 옵션을 나타내는 개체 
}

contentType / string

서버에 데이터를 보낼 때 사용 content - type 헤더의 값입니다. 기본값은 "application / x - www - form - urlencoded"대부분의 경우이 설정으로 문제 없을 것입니다.

data / object, string

서버로 전송하는 값. 개체가 지정된 경우 쿼리 문자열로 변환되고 GET 요청으로 추가됩니다. 이 변환 처리에 대해서는, 후술하는 processData를 참조하십시오. 객체는 키와 값의 조합해야하지만, 만약 값이 배열이라면, jQuery는 같은 키를 가지는 여러 값으로 serialize합니다. 예를 들어 {foo : "bar1", "bar2"]}와 같이 지정된 경우, & foo = bar1 & foo = bar2처럼 조립할 수 있습니다.

dataFilter / function

기본 수준에서 XMLHttpRequest의 반환 데이터를 필터링합니다. 서버 로부터의 반환값을 청소하는 경우 등에 유용합니다. 함수는 첫번째 인수에 원시 데이터를 제 2 인수 dataType 값을받습니다. 필터링된 값을 반환 값으로 반환하십시오.

function (data, type) { 
  / / 필터링 
  / / 마지막으로 청소 후에 데이터를 반환 
  return data; 
}

dataType / string

서버에서 반환되는 데이터 형식을 지정합니다. 생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정합니다. 지정 가능한 값은 다음과 같은 것입니다.

• "xml": XML 문서
• "html": HTML을 텍스트 데이터로. 여기에 script 태그가 포함된 경우 처리가 실행됩니다.
• "script": JavaScript 코드를 텍스트 데이터로. cache 옵션 특히 지정이 없으면 캐시가 자동으로 비활성화됩니다. 원격 도메인에 대한 요청의 경우 POST는 GET으로 변환됩니다.
• "json": JSON 형식 데이터로 평가하고 JavaScript의 개체로 변환합니다.
• "jsonp": JSONP로 요청을 부르고 callback 매개 변수에 지정된 함수 회수 값을 JSON 데이터로 처리합니다. (jQuery 1.2 추가)
• "text": 일반 텍스트.

dataType을 지정할 때는 몇 가지 가리키는 할 점이 있습니다. 아래의주의 1,2를 참조하십시오.

error / function

통신에 실패했을 때 호출되는 Ajax Event 입니다. 인수는 3 개로 차례 XMLHttpRequest 개체 오류 내용, 추가적인 예외 개체를받습니다. 제 2 인수에는 "timeout", "error", "notmodified" "parsererror"등이 돌아갑니다.

function (XMLHttpRequest, textStatus, errorThrown) { 
  / / 보통은 여기서 textStatus 및 errorThrown 값을보고 처리를 분리하거나 
  / / 단순히 통신에 실패했을 때의 처리를 기술합니다. 
  this / / this는 다른 콜백 함수 마찬가지로 AJAX 통신할 때 옵션을 나타냅니다. 
}

global / boolean

Ajax Events의 Global Events을 실행할지 여부를 지정합니다. 일반적으로 true이지만, 특별한 통신 false 수도 있습니다. 자세한 내용은 Ajax Events 를 참조하십시오.

ifModified / boolean

서버의 응답에 Last - Modified 헤더를보고, 전회 통신에서 변경이있는 경우에만 성공 상태를 반환합니다.

jsonp / string

jsonp 요청을 할 때 callback이 아닌 매개 변수이면 지정합니다. 예를 들어 {jsonp : 'onJsonPLoad'}로 지정하면 실제 요청은 onJsonPLoad = 함수 이름이 부여됩니다.

password / string

인증이 필요한 HTTP 통신시 암호를 지정합니다.

processData / boolean

data 지정한 개체를 쿼리 문자열로 변환할지 여부를 설정합니다. 기본값은 true로, 자동으로 "application / x - www - form - urlencoded"형식으로 변환합니다. DOMDocument 자체 등의 다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false를 지정합니다.

scriptCharset / string

스크립트를 로드할 때의 캐릭터 세트를 지정합니다. dataType이 "jsonp"혹은 "script"에서 실행되는 페이지와 호출하는 서버측의 캐릭터 세트가 다른 경우에만 지정해야합니다.

success / function

AJAX 통신이 성공하면 호출되는 Ajax Event 입니다. 돌아온 데이터와 dataType 지정한 값 2 개의 인수를받습니다.

function (data, dataType) { 
  / / data의 값을 사용하여 통신 성공시 처리를 기술합니다. 
  this / / this는 AJAX 전송시 설정한 옵션 
}

timeout / number

제한 시간 (밀리초)을 설정합니다. $. ajaxSetup 에서 지정한 값을 통신에 따라 개별적으로 덮어쓸 수 있습니다.

type / string

"POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정합니다. 기본값은 "GET"입니다.RESTful에 "PUT"또는 "DELETE"를 지정할 수 있지만 모든 브라우저가 지원하는 것은 아니기 때문에주의가 필요합니다.

url / string

요청을 보낼 대상 URL입니다. 기본값은 호출 페이지에 보냅니다.

username / string

인증이 필요한 HTTP 통신시 사용자 이름을 지정합니다.

xhr / function

XMLHttpRequest 객체가 생성되었을 때 호출되는 콜백 함수입니다. 이 함수는 예를 들면 IE에서 XMLHttpRequest 아니라 ActiveXObject가 만들어진 때라고합니다. 만약 특정 사이트의 XMLHttpRequest 개체의 확장과 인스턴스 관리 팩토리를 가지고있는 경우에는이 함수 생성물을 덮어쓸 수 있습니다. jQuery1.2.6 이전에서는 사용할 수 없습니다.

※주의 1 
dataType 옵션을 사용하는 경우 서버에서 응답이 올바른 MIME 타입을 반환하는지 확인하십시오. 
만약 MIME 타입과 지정된 dataType에 불일치가있는 경우, 예기치 않은 문제가 발생할 수 있습니다. 
자세한 내용은 Specifying the Data Type for AJAX Requests (영어) 를 참조하십시오. ※주의 2dataType에 "script"을 지정하여 다른 도메인에 전송하는 경우 POST를 지정해서 요청은 GET 자동으로 변환됩니다. jQuery 1.2에서는 다른 도메인에서도 JSONP를 사용하여 JSON 데이터를 검색할 수있는 옵션이 붙었습니다. JSONP를 제공하는 서버가 "url? callback = function"와 같은 형태로 요청을받는 경우에는, jQuery가 자동으로 function을 사용하여 JSON 데이터를받습니다. 또한 매개 변수가 callback이 아닌 경우 jsonp 옵션 매개 변수 이름을 지정하여 마찬가지로 처리할 수 있습니다.

샘플

샘플 1

JavaScript 파일을 읽고 실행합니다.

$. ajax ({type : "GET", url : "test.js"dataType : "script"});

서버에 데이터를 저장하고 처리가 완료된 것을 사용자에게 알려줍니다.

$. ajax ({type : "POST", url : "some.php"data : "name = John & location = Boston", success : function (msg) {alert ( "Data Saved :"+ msg);}}) ;

HTML 페이지의 최신 버전을 가져옵니다.

$. ajax ({url : "test.html", cache : false, success : function (html) {$ ( "# results"). append (html);}});

동기 통신에서 데이터를 읽습니다. 
통신 중에 브라우저가 잠겨 있기 때문에 어떤 방식으로 통신중인 사용자 작업을 방해 궁리를해야 할 것입니다.

var html = $. ajax ({url : "some.php"async : false}). responseText;

XML 형식의 문서를 데이터로 보냅니다. 
processData 옵션을 false로 설정하여 데이터를 문자열로 자동 변환되는 것을 피할 수 있습니다.

var xmlDocument = create xml document]; $. ajax ({url : "page.php"processData : false, data : xmlDocument, success : handleResponse});

우리가 작성한 예제 :

$(function() {
$("#btn1").click(function() {
var name= $("#name").val();
var age = $("#age").val();
var url = "test5_ok.jsp";
var params = "name=" + name + "&age=" + age + "&nickName=수요일";
$.ajax({
type : "POST", // "POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정. default는 "GET"
url:url,
data:params, // 서버로 전송하는 값
dataType:'xml', // 기본 text -> 서버에서 반환되는 데이터 형식을 지정. html, xml, text, script, json, jsonp 가 있음
success:function(args) { // AJAX 통신이 성공하면 호출되는 Ajax Event 
$(args).find("status").each(function() {
var status = $(this).text();
alert(status);
});

var str = "";
$(args).find("records").each(function() { // 태그명이 records 인 것들 중에 해당하는 것들을 불러옴
var records = $(this);
var id = records.attr("id"); // 속성명이 id
var name = records.find("name").text(); // 태그명이 name 인 것의 text를 가져옴
var age = records.find("age").text(); // 태그명이 name 인 것의 text를 가져옴
var nickName = records.find("nickName").text(); // 위와 동일

str += "id="+ id +", name=" + name + ", age=" + age + ", nickName=" + nickName + "<br/>"; 
});
$("#result").html(str); // id명이 result 인 것에 위에서 반복문으로 받은 것들을 html형식으로 찍는다.
},
beforeSend:showRequest, // AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 
error:function(e) { // 통신에 실패했을 때 호출되는 Ajax Event 
alert(e.responseText);
}
});
});

$("#btn2").click(function() {
$("#result").empty();
});
});

function showRequest(args) { // 리턴 값이 true 일경우만 전송, false이면 전송 취소
if(!$("#name").val()) {
alert("이름을 입력하세요 !!!");
return false;
}
if(!$("#age").val()) {
alert("나이를 입력하세요 !!!");
return false;
}
return true;
}