요즘 아주 많이 사용되고 있는 ajax에 대해 알아보자.
특징은, 비동기식으로 화면 새로고침 없이 데이터를 처리할 수 있다.
사용방법을 알아보자.
index.html ===========================================================
//xml 형식으로 데이터 보내기
$(document).ready(function(){
$.ajax({
type : "POST",
url : "./ajax.data.php",
dataType : "xml",
data : {name:name, phone:phone}, //자바스크립트 name변수와 phone변수를 post 방식으로 ajax.data.php 에 전달한다.
success : function(xml){ // 정상적으로 데이터를 받아왔을때 실행
comMsg(xml);
}
});
});
//ajax.data.php 에서 데이터 처리가 다 끝난 후, xml 형태의 데이터를 다시 받아온다.
//xml 데이터를 받아온 후 사용
var comMsg = function(xml){
$("contents",xml).each(function(i) {
$(this).find("name").text();
$(this).find("phone").text();
});
}
ajax.data.php ====================================================
//전달된 데이터를 post형태로 받아온다.
$name = $_POST['name'];
$phone = $_POST['phone'];
//받아온 변수를 이용해 DB에 insert 하고, 다시 select 한다.
//select한 데이터를 xml형식으로 만들어주기만 하면 끝
echo ('<?xml version="1.0" encoding="utf-8"?>');
<contents>
<name><?=$result[name]?></name>
<phone><?=$result[phone]?></phone>
</contents>
담번엔 jsonp로 한번..
'jQuery' 카테고리의 다른 글
ajax json 방식으로 호출 시 response 간단히 작성하기 (0) | 2017.08.17 |
---|---|
객체 떨림 효과 (0) | 2013.11.29 |
제이쿼리 드롭다운 메뉴 예제 (0) | 2013.07.11 |
jquery ui touch (0) | 2013.05.29 |
ajax 크로스 도메인 (0) | 2013.05.09 |