1. Ajax란?
Asynchronous JavaScript and XML의 약자로 웹 페이지에서 HTTP 프로토콜을 사용해 XML 데이터를 동적으로 로딩할 수 있는 기술이다
-
비동기적(Asynchronous)
-어떠한 작업을 시켜 놓고 다른 일을 할 수 있다면 Ajax의 A는 비동기적 이라는 뜻이다.
-
동기적(Synchronous)
-웹 콘텐츠를 클릭해서 웹 페이지를 구성하는 동안에 지연이 발생하면 아무런 일도 하지 못하고
기다리는 것을 동기적이라고 한다.
1) Ajax로 서버에서 제공하는 데이터 종류
- HTML
- Json
- XML
- TEXT
- 이미지 등
2) json파일에서 값 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#get_data").click(function() {
let options={
url:"data_list.json", //가져올 곳
dataType:"json", //데이터타입
success:function(data){ //success의 파라미터로 넘어오는데 data로 받겠다
//data객체로 가져옴
$("#result").html(data.length)
$.each(data,function(idx, v){
$("#result").append(v+"<br>")
})
}
}
$.ajax(options)
})
})
</script>
</head>
<body>
<div>
<button id="get_data">가져오기</button>
<div id="result"></div>
</div>
</body>
</html>
3) 크롤링(html, xml에서 값 가져오기)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript">
function click_weather() {
let options={
url:"proxy_xml.jsp",
data:{"url":"https://www.weather.go.kr/w/rss/dfs/hr1-forecast.do?zone=1168066000"},
dataType:"xml",
success:function(data){
$("#result").empty() //내용 모두 삭제
//예보동네이름
let category = $(data).find("category").text() //jqery로 둘러쌈
$("#result").append("동네이름 : "+category)
}
}
$.ajax(options)
}
function click_money(){ // <a>body</a> html에선 text(),html(), xml에선 text()
let options={
url:"proxy_html2.jsp",
data:{"url":"https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%ED%99%98%EC%9C%A8"},
dataType:"html",
success:function(data){
$("#result").empty()
$(data).find(".spt_con > strong").each(function(){
//item_issue 클래스 밑에 있는
$("#result").append(this.innerHTML+"<br>")
})
}
}
$.ajax(options)
}
function click_daum(){
let options={
url:"proxy_html2.jsp",
data:{"url":"https://news.daum.net/"},
dataType:"html",
success:function(data){
$("#result").empty()
$(data).find(".item_issue a.link_txt").each(function(){
//item_issue 클래스 밑에 있는
$("#result").append(this.innerHTML+"<br>")
})
}
}
$.ajax(options)
}
function click_naver() {
let options={
url:"proxy_html2.jsp",
data:{"url":"https://news.naver.com/main/main.naver?mode=LSD&mid=shm&sid1=105"},
//data는 파라미터 url-> param.url
dataType:"html",
success:function(data){
$("#result").empty() //내용 모두 삭제
$(data).find("a.sh_text_headline").each(function(){ //한개씩 each
// ul.list_txt>li>a
// this는 a.sh_text_headline
$("#result").append(this.innerHTML+"<br>")
})
}
}
$.ajax(options)
}
$(function(){
$("#daum").click(click_daum)
$("#get_data").click(click_naver)
$("#change").click(click_money)
$("#weather").click(click_weather)
})
</script>
</head>
<body>
<div>
<button id="get_data">가져오기</button>
<button id ="daum">다음 메인 기사제목</button>
<button id ="change"> 환율</button>
<button id= "weather">기상청</button>
<div id="result"></div>
</div>
</body>
</html>
안녕하세요. 백앤드 개발자를 목표로 하고 있습니다!