Jquery Ajax 정리

jQuery.ajax (options)

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


async / boolean비동기 통신 플래그. 기본값은 true (비동기 통신)에서 요청이 던져에서 응답할 때까지 사용자 에이전트는 비동기 처리를 계속합니다. false로 설정 (동기 통신)하면 통신에 응답이있을 때까지 브라우저는 잠겨 조작을 받아들이지 않을 것을주의하십시오.beforeSend / functionAJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 입니다. 반환값을 false로 설정하면 AJAX 전송을 취소할 수 있습니다.

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

cache / booleanjQuery 1.2. 초기값은 일반적으로 true이지만 dataType이 script의 경우에는 false입니다. 통신 결과를 캐시하지 않으에는 false로 설정하십시오.complete / functionAJAX 통신 완료될 때 호출되는 함수입니다. 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 / booleanAjax Events의 Global Events을 실행할지 여부를 지정합니다. 일반적으로 true이지만, 특별한 통신 false 수도 있습니다. 자세한 내용은 Ajax Events 를 참조하십시오.ifModified / boolean서버의 응답에 Last - Modified 헤더를보고, 전회 통신에서 변경이있는 경우에만 성공 상태를 반환합니다.jsonp / stringjsonp 요청을 할 때 callback이 아닌 매개 변수이면 지정합니다. 예를 들어 {jsonp : 'onJsonPLoad'}로 지정하면 실제 요청은 onJsonPLoad = 함수 이름이 부여됩니다.password / string인증이 필요한 HTTP 통신시 암호를 지정합니다.processData / booleandata 지정한 개체를 쿼리 문자열로 변환할지 여부를 설정합니다. 기본값은 true로, 자동으로 "application / x - www - form - urlencoded"형식으로 변환합니다. DOMDocument 자체 등의 다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false를 지정합니다.scriptCharset / string스크립트를 로드할 때의 캐릭터 세트를 지정합니다. dataType이 "jsonp"혹은 "script"에서 실행되는 페이지와 호출하는 서버측의 캐릭터 세트가 다른 경우에만 지정해야합니다.success / functionAJAX 통신이 성공하면 호출되는 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 / functionXMLHttpRequest 객체가 생성되었을 때 호출되는 콜백 함수입니다. 이 함수는 예를 들면 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;
}

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