AJAX : Asynchronous JavaScript And Xml(Json)
- 목적 : 비동기상태로 데이터의 송수신을 처리하는 목적을 가지고 있다
- a, form, location.href 는 모두 link로 이동시키는 태그로
synchronous 처리라고 해준다(동기적 처리)
- JQuery 소속
index.jsp
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
//이곳에 html을 호출
//$("#demo").load("data.html");
//data1만 호출
//$("#demo").load("data.html #data1");
//data.jsp의 ti,t2값을 대입 후 #demo에 넣어준다
//방법1
//$("#demo").load("data.jsp", "t1=abc=&t2=가나다");
//방법2
//$("#demo").load("data.jsp", {t1:"ABC", t2:"라마바"});
//t1t2값을 가지고 data.jsp에 다녀옴(load 값을 이동시킨 후 비동기처리로 funcion을통해 함수를 끌어옴)
$("#demo").load(
"data.jsp",
{t1:"DEF", t2:"사아자"},
function (data, status, xhr) {//값을 풀기
//alert("success");
//alert(data);//data는 html코드 전체(jsp전체)
$("#demo").append("data= " + data + "<br>");// t1 = DEF t2 = 사아자
$("#demo").append("status= " + status + "<br>");//status= success
$("#demo").append("xhr= " + xhr + "<br>");//xhr= [object Object]
}
);
});
});
</script>
</body>
data.html
<body>
<p id="data1">사과</p>
<h3 id="data2">바나나</h3>
</body>
data.jsp
<body>
t1 = <%=request.getParameter("t1") %>
t2 = <%=request.getParameter("t2") %>
</body>
ajax.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<br>
<button type="button">click</button>
<script type="text/javascript">
$(function () {
$("button").on("click", function() {
$.ajax({//ajax
//////////////////////////////////////////////////////////send
url:"data.jsp",//행선지
type: "get",//Servlet에서의 (get or post 방식 선택)
data: "t1=XYZ&t2=자차카",
//data: { t1:"XYZ", t2:"자차카" },
//////////////////////////////////////////////////////////recv
success:function(data, status, xhr){
//alert("success");
$("#demo").html(data);
alert(status);//success
alert(xhr);//obj
},
//에러
error:function(xhr, status, error){
alert("error");
},
//통신끝나고 마무리 (생략가능)
complete:function(xhr, status){
}
})
});
});
</script>
</body>
'Ajax' 카테고리의 다른 글
| MVC model2 // .html <- servlet .java접근 // gson// 화면에 뿌리기 (0) | 2020.07.24 |
|---|---|
| MVC model2 // .html <- servlet .java접근 //list//map//obj (0) | 2020.07.24 |
| MVC model1 // .html <- .jsp 접근 (0) | 2020.07.24 |
| Html에서 $.ajax로 xml 파씽 (0) | 2020.07.24 |
| Html 에서 $.ajax로 .json 호출 (0) | 2020.07.24 |
