728x90
Ajax란?
Ajax는 JavaScript의 라이브러리중 하나이며
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도
페이지의 일부만을 위한 데이터를 로드하는 기법 이며
Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신,
클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다.
Ajax는 현재 화면에서 데이터를 끌어오는 것이다.
url:"data.jsp",
type:"get", //get/post ->servlet
//data: "t1=XYZ&t2=오늘의 점심은",
data: {t1:"주지훈", t2:"잘생김"},<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>완전한 ajax 예시</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id = "demo"></p>
<br>
<button>클릭</button>
<script type="text/javascript">
$(function () {
$("button").click(function () {
//기본문법
$.ajax({
//갈떄 필요한것,
//이동할때send////////////
url:"data.jsp",
type:"get", //get/post ->servlet
//data: "t1=XYZ&t2=오늘의 점심은",
data: {t1:"주지훈", t2:"잘생김"},
////////////////////////send
///////////////////////갔다왔을떄
//recv
//functin의 갓다와서 데이타는 파라미터의 data
success: function(data, status, xhr){
//alert("suc");
//갔다왔을떄 성공하면 뜬다.
//alert(data); //data.jsp 의 파일 코드를 다 가져온다.
$("#demo").html(data);
//alert(status);
//alert(xhr);
alert(xhr.responseText);
},
error:function(/* xhr, status, error */){
alert("error");
},
complete:function(xhr, status){
alert("통신종료");
}
/////////////////////////recv
});
});
});
</script>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 오류이유: 변수설정시 =을 빼서 출력이 안됨 -->
t1 = <%=request.getParameter("t1") %>
<br>
t2 = <%=request.getParameter("t2") %>
728x90
'HTML' 카테고리의 다른 글
| 44일차//JSP// MVC Model 1 // 로그인 게시판 만들기⭕(1) idcheck Model + View (0) | 2021.03.17 |
|---|---|
| jsp (JavaServer Pages)란 무엇인가? (0) | 2021.03.12 |
| 42일차// jsp설문지를 작성하여 jsp페이지로 데이터 넘겨주기(파라미터 넘기기) (0) | 2021.03.12 |
| 41일차//JSP내장객체 (🙀매우중요) 파라미터로 데이터 받아 전송 (0) | 2021.03.11 |
| 41일차//[Servlet] Session을 사용한 방문 횟수 카운트 (0) | 2021.03.11 |
