본문 바로가기
자바스크립트

ajax 끝 21. 03. 05.

Levinni 2021. 3. 5. 21:28 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 5. 오전 9:06:07</title>
	<style>
		table {border: 1px solid black; border-collapse: collapse;}
		td, th {border: 1px solid black; padding: 10px; width: 25%}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
			var xmlUrl = 'https://www.juso.go.kr/addrlink/addrLinkApi.do?currentPage=1&countPerPage=5&keyword=%EB%8C%80%ED%95%99%EA%B5%90&confmKey=devU01TX0FVVEgyMDIxMDIxNTE2NTkxMDExMDgwODI='
				$.ajax(xmlUrl).done(function(data, msg, xhr) {
				console.log(data);
//				console.log($(data).find("juso").size()); // 5
				var str = "<table>";
				$(data).find("juso").each(function(i) {
					str += "<tr>";
					str += "<td>" + $(this).find("bdNm").text() + "</td>";
					str += "<td>" + $(this).find("zipNo").text() + "</td>";
					str += "<td>" + $(this).find("roadAddr").text() + "</td>";
					str += "<td>" + $(this).find("jibunAddr").text() + "</td>";
					str += "</tr>";
				});
				str += "</table>";
				
				$("body").append(str);
				});
			});
		});
	</script>
</head>
<body>
		<button>ajax 호출</button>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 5. 오전 9:06:07</title>
	<style>
		table {border: 1px solid black; border-collapse: collapse;}
		td, th {border: 1px solid black; padding: 10px; width: 25%}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
			var xmlUrl = 'https://www.juso.go.kr/addrlink/addrLinkApi.do?currentPage=1&countPerPage=5&keyword=%EB%8C%80%ED%95%99%EA%B5%90&confmKey=devU01TX0FVVEgyMDIxMDIxNTE2NTkxMDExMDgwODI='
			var jsonUrl = xmlUrl + "&resultType=json";
			$.ajax(jsonUrl).done(function(data, msg, xhr) {
				console.log(data);
				var str = "<table>";
				for(var i in data.results.juso){
					str += "<tr>";
					str += "<td>" + data.results.juso[i].bdNm + "</td>";
					str += "<td>" + data.results.juso[i].zipNo + "</td>";
					str += "<td>" + data.results.juso[i].roadAddr + "</td>";
					str += "<td>" + data.results.juso[i].jibunAddr + "</td>";
					str += "</tr>";
				}
				str += "</table>";
				$("body").append(str);
			}); 
			});
		});
	</script>
</head>
<body>
		<button>ajax 호출</button>
</body>
</html>

 

- CORS 해결을 위해 우회 proxy 만들기.java

package jQueryEx1;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;
// 우회한 것.
@WebServlet ("/chosun")
public class ChosunRSS extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String urlString = "https://health.chosun.com/rss/column.xml";
		StringBuilder sb = new StringBuilder();
		try {
			URL url = new URL(urlString);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();

			BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream(), "euc-kr"));

			String line = null;
			while ((line = br.readLine()) != null) {
				sb.append(line);
			}
		} catch (IOException e) {
			System.out.println("RestCall Fail : " + e.getMessage());
		}
//		System.out.println(sb);
		resp.setContentType("text/xml; charset=utf-8");
		resp.getWriter().print(sb);
	}
}

 

- 위에서 만든 프록시를 이용해 ajax

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 5. 오전 9:06:07</title>
	<style>
		table {border: 1px solid black; border-collapse: collapse;}
		td, th {border: 1px solid black; padding: 10px;}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
			var xmlUrl = 'http://localhost:8080/jQueryEx1/chosun'; // 'chosun'만 써도 됨.
			// cross origin CORS 서로 다른 출처
				$.ajax(xmlUrl).done(function(data, msg, xhr) {
				console.log(data);
				var str = "<table>";
				$(data).find("item").each(function(i) {
					str += "<tr>";
					str += "<td>" + (i+1) + "</td>";
					str += "<td><a href='" + $(this).find("link").text() + "'>" + $(this).find("title").text() + "</a></td>";
					str += "<td>" + $(this).find("author").text() + "</td>";
					str += "<td>" + $(this).children().eq(3).text() + "</td>";
					str += "</tr>";
				});
				str += "</table>";
				
				$("body").append(str);
				});
			});
		});
	</script>
</head>
<body>
		<button>ajax 호출</button>
</body>
</html>

 

 

 

 

 

저작자표시 (새창열림)

'자바스크립트' 카테고리의 다른 글

jQuery 이벤트, ajax 21. 03. 04.  (0) 2021.03.05
jQuery 21. 03. 03.  (0) 2021.03.03
브라우저 객체 모델 21. 03. 02  (0) 2021.03.02
속성과 메서드 21. 02. 26.  (0) 2021.03.02
Part 03. js 코어 라이브러리(Date, Array) 21. 02. 25.  (0) 2021.02.25

'자바스크립트' Related Articles

티스토리툴바