728x90
네이버 index.html 가져오기
정책에 의해 막혔다고 나옴..
v_ajax.open("get", "http://naver.com/index.html", true)CORS(Cross-Origin Resource Sharing)
※ 기본 정책이 same-origin
origin(출처)
3개로 구성이 되어있다.
프로토콜+서버명(도메인)+포트번호
세 가지 중에 하나라도 다르다면 origin이 다르다고 말함
1) http://localhost:80(웹서버는 기본적으로 80번이 생략)
2) https://localhost:80
1)과 2)는 프로토콜이 다르기에 origin이 다르다.
3) http://localhost:80(웹서버는 기본적으로 80번이 생략)
4) http://psy.com:80
3과 4는 서버명이 다르기에 origin이 다르다
5) http://localhost:80
6) http://localhost:8080
5와 6은 포트번호가 다르기에 origin이 다르다
origin이 다르면 함부로 가져오지 못함.
내 사이트에서도 프로토콜이나 포트번호가 다르다면 가져오지 못함.
AJAX는 데이터 가져온 후 가공이 가능하기에 막아놓는 것
오픈 API(Open Application Programming Interface)
public api
누구나 사용할 수 있도록 공개된 API
자기들이 가진 자료를 서비스
AJAX 우회
AJAX는 대부분 same-origin정책으로 인해 다른 사이트(도메인)의 정보를 못가져옴
이때 내 서버를 경유해서 데이터를 받으면 사용 할 수 있다.
1. AJAX틀 생성
<script>
var v_xhr = new XMLHttpRequest();
v_xhr.open("get", "around.php", true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
alert(v_xhr.responseText);
}
});
</script>2. around.php 생성
<?php
$content = file_get_contents("https://naver.com");
echo $content;
?>♨ file_get_contents함수는 url내용을 읽는 함수로 자바로 만들면 조금 길어진다. (보통 자바의 URL클래스를 이용해서 만든다.)
♨ 마치 함수가 브라우저 역할을 해준다.!!
3. 네이버사이트
클라이언트에서 접속하면 막히는데 서버쪽에서는 접속이 가능
왜?
>> 서버쪽 신분이 확실하기 때문(로그상 아이피가 남기때문)
cross-origin문제 발생 시, 대부분 이런식으로 서버 경유로 문제를 해결
<body>
<div id="id_disp"></div>
</body>
<script>
var v_xhr = new XMLHttpRequest();
v_xhr.open("get", "around.php", true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
document.getElementById("id_disp").innerHTML =
v_xhr.responseText;
}
});
</script>
4. 구글뉴스
<?php
$fileContents= file_get_contents("https://news.google.com/rss/search?q=".urlencode($_GET["search"])."&hl=ko&gl=KR&ceid=KR:ko");
/* xml문자열 -> xml문서 -> json */
$simpleXml = simplexml_load_string($fileContents);
$json = json_encode($simpleXml);
echo $json;
?>혹시 "search=검색내용"을 해도 계속 새로고침을 할 수 없음이 나온다면
1) php7.2-xml이 설치되지 않았기 때문!! 따라서 php7.2-xml을 설치해준다
2) 그 후 아파치서버를 재시작해준다
4.1 구글뉴스 검색
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type="text" id="id_search" value=""><br>
<input type="button" value="구글뉴스검색" onclick="f_search()">
</body>
<script>
var v_txt = document.getElementById("id_search");
function f_search() {
var v_xhr = new XMLHttpRequest();
// ajax는 대부분 same-origin정책으로 인해 다른 사이트(도메인)의 정보를 못가져옴
// 이때 사용하는 방법이 내 서버를 경유해서 데이타를 받음
// v_xhr.open("get", "around.php", true);
v_xhr.open("get", "구글뉴스불러오기.php?search="+v_txt.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
console.log(JSON.parse(v_xhr.responseText));
}
});
}
</script>4.2 아이템 가져오기
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type="text" id="id_search" value=""><br>
<input type="button" value="구글뉴스검색" onclick="f_search()">
<div id="id_idsp"></div>
</body>
<script>
var v_txt = document.getElementById("id_search");
var v_div = document.getElementById("id_idsp");
function f_search() {
var v_xhr = new XMLHttpRequest();
v_xhr.open("get", "구글뉴스불러오기.php?search=" + v_txt.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
var v_items = JSON.parse(v_xhr.responseText).channel.item;
console.log(v_items)
}
});
}
</script>4.3 타이틀과 링크만 뿌리기
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type="text" id="id_search" value=""><br>
<input type="button" value="구글뉴스검색" onclick="f_search()">
<div id="id_idsp"></div>
</body>
<script>
var v_txt = document.getElementById("id_search");
var v_div = document.getElementById("id_idsp");
function f_search() {
var v_xhr = new XMLHttpRequest();
// ajax는 대부분 same-origin정책으로 인해 다른 사이트(도메인)의 정보를 못가져옴
// 이때 사용하는 방법이 내 서버를 경유해서 데이타를 받음
// v_xhr.open("get", "around.php", true);
v_xhr.open("get", "구글뉴스불러오기.php?search=" + v_txt.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
var v_items = JSON.parse(v_xhr.responseText).channel.item;
var v_tblStr = "<table border=2>";
for (var i = 0; i < v_items.length; i++) {
v_tblStr += "<tr>";
v_tblStr += "<td>" + (i + 1) + "</td>";
v_tblStr += "<td><a href='" + v_items[i].link + "'>"
+ v_items[i].title + "</a></td>";
v_tblStr += "</tr>";
}
v_tblStr += "</table>";
v_div.innerHTML = v_tblStr;
}
});
}
</script>
4.4 마우스 올리면 색 변하게
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type=text id="id_search" value=""><br>
<input type=button value="구글뉴스검색" onclick="f_search()"><br>
<div id="id_disp"></div>
</body>
<script>
var v_disp = document.getElementById("id_disp");
var v_schWord = document.getElementById("id_search");
function f_search() {
var v_xhr = new XMLHttpRequest();
// ajax는 대부분 same-origin정책으로 인해 다른 사이트(도메인)의 정보를 못가져옴
// 이때 사용하는 방법이 내 서버를 경유해서 데이타를 받음
v_xhr.open("get", "구글뉴스불러오기.php?search=" + v_schWord.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
var v_items = JSON.parse(v_xhr.responseText).channel.item;
var v_tblStr = "<table id='id_tbl' border=1>";
for (var i = 0; i < v_items.length; i++) {
v_tblStr += "<tr>";
v_tblStr += "<td>" + (i + 1) + "</td>";
v_tblStr += "<td><a href='" + v_items[i].link + "'>"
+ v_items[i].title + "</a></td>";
v_tblStr += "</tr>";
}
v_tblStr += "</table>";
v_disp.innerHTML = v_tblStr;
var v_table = document.getElementById("id_tbl");
var v_tbody = v_table.children[0];
var v_tr = v_tbody.children; //
// console.log(v_tr); // 눈으로 확인
for(var i=0;i<v_tr.length;i++){
v_tr[i].addEventListener("mouseover", function(){
this.style.backgroundColor="pink";
});
v_tr[i].addEventListener("mouseout", function(){
this.style.backgroundColor="";
});
}
}
});
}
</script>
ˇ this사용하지 않고 v_tr[i]사용하기
더보기
1)
function f_regEvent(v_tr) {
v_tr.onmouseover = function () {
v_tr.style.backgroundColor = "pink";
}
v_tr.onmouseout = function () {
v_tr.style.backgroundColor = "";
}
}
for (var i = 0; i < v_tr.length; i++) {
// 별도함수 사용하여
// 이벤트 등록에 반복문 i값의 영향 피하기
f_regEvent(v_tr[i]);
}
}2)
function f_regEvent(index) {
v_tr[index].onmouseover = function () {
v_tr[index].style.backgroundColor = "pink";
}
v_tr[index].onmouseout = function () {
v_tr[index].style.backgroundColor = "";
}
}
for (var i = 0; i < v_tr.length; i++) {
// 별도함수 사용하여
// 이벤트 등록에 반복문 i값의 영향 피하기
f_regEvent(i);
}1)
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type=text id="id_search" value=""><br>
<input type=button value="구글뉴스검색" onclick="f_search()"><br>
<div id="id_disp"></div>
</body>
<script>
var v_disp = document.getElementById("id_disp");
var v_schWord = document.getElementById("id_search");
function f_search() {
var v_xhr = new XMLHttpRequest();
v_xhr.open("get", "구글뉴스불러오기.php?search=" + v_schWord.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
var v_items = JSON.parse(v_xhr.responseText).channel.item;
var v_tblStr = "<table id='id_tbl' border=1>";
for (var i = 0; i < v_items.length; i++) {
v_tblStr += "<tr>";
v_tblStr += "<td>" + (i + 1) + "</td>";
v_tblStr += "<td><a href='" + v_items[i].link + "'>"
+ v_items[i].title + "</a></td>";
v_tblStr += "</tr>";
}
v_tblStr += "</table>";
v_disp.innerHTML = v_tblStr;
var v_table = document.getElementById("id_tbl");
var v_tbody = v_table.children[0];
var v_tr = v_tbody.children;
function f_regEvent(v_tr) {
v_tr.onmouseover = function () {
v_tr.style.backgroundColor = "pink";
}
v_tr.onmouseout = function () {
v_tr.style.backgroundColor = "";
}
}
for (var i = 0; i < v_tr.length; i++) {
// 별도함수 사용하여
// 이벤트 등록에 반복문 i값의 영향 피하기
f_regEvent(v_tr[i]);
}
}
});
}
</script>2)
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<input type=text id="id_search" value=""><br>
<input type=button value="구글뉴스검색" onclick="f_search()"><br>
<div id="id_disp"></div>
</body>
<script>
var v_disp = document.getElementById("id_disp");
var v_schWord = document.getElementById("id_search");
function f_search() {
var v_xhr = new XMLHttpRequest();
v_xhr.open("get", "구글뉴스불러오기.php?search=" + v_schWord.value, true);
v_xhr.send();
v_xhr.addEventListener("readystatechange", function () {
if (v_xhr.readyState == 4 && v_xhr.status == 200) {
var v_items = JSON.parse(v_xhr.responseText).channel.item;
var v_tblStr = "<table id='id_tbl' border=1>";
for (var i = 0; i < v_items.length; i++) {
v_tblStr += "<tr>";
v_tblStr += "<td>" + (i + 1) + "</td>";
v_tblStr += "<td><a href='" + v_items[i].link + "'>"
+ v_items[i].title + "</a></td>";
v_tblStr += "</tr>";
}
v_tblStr += "</table>";
v_disp.innerHTML = v_tblStr;
var v_table = document.getElementById("id_tbl");
var v_tbody = v_table.children[0];
var v_tr = v_tbody.children;
function f_regEvent(index) {
v_tr[index].onmouseover = function () {
v_tr[index].style.backgroundColor = "pink";
}
v_tr[index].onmouseout = function () {
v_tr[index].style.backgroundColor = "";
}
}
for (var i = 0; i < v_tr.length; i++) {
// 별도함수 사용하여
// 이벤트 등록에 반복문 i값의 영향 피하기
f_regEvent(i);
}
}
});
}
</script>
더보기
공개(public) 오픈API 사이트
-
https://www.data.go.kr/ - 가입 필요
-
https://via.placeholder.com/728x90.png?text=psy - 더미 이미지 제공
-
https://dummyimage.com/640x360/fff/aaa - 더미 이미지 제공
-
https://ipapi.co/1.214.68.2/json/ - 위치 알려줌
-
https://quickchart.io/qr?text=문자열&dark=fff&light=000&ecLevel=H - QR코드 만들어줌
-
https://api.adorable.io/avatars/사이즈/아뒤.png - 아바타 이미지 만들어줌
-
https://avatars.dicebear.com/v2/옵션/아뒤.svg - 아바타 이미지 만들어줌
-
https://robohash.org/맘대로아뒤 - 아바타 이미지 만들어줌
-
https://news.google.com/rss/search?q=김다미&hl=ko&gl=KR&ceid=KR:ko - 구글 뉴스
-
https://exchangeratesapi.io/ - 유럽 중앙은행 무료 환율정보 제공
-
https://api.rss2json.com/v1/api.json?rss_url=유알엘 - RSS를 JSON으로 변환해주는 사이트(무료는 10개만)
더미 이미지 제공
via.placeholder.com/500x60.png?text=psy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dumyImg</title>
</head>
<body>
<img src="https://via.placeholder.com/500x60.png?text=psy">
</body>
</html>'AJAX' 카테고리의 다른 글
| (JSON이용)AJAX일반화 (0) | 2020.08.03 |
|---|---|
| AJAX예제 (0) | 2020.08.03 |
| AJAX(Asynchronous Javascript And Xml) (0) | 2020.08.03 |