Ajax 배경 지식
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 |
<script type="text/javascript">
function createRequest() {
var request ;
try {
// IE 7.0이상일때
request = new XMLHttpRequest();
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = new ActiveXObject("Msxml3.XMLHTTP");
}
}
return request ;
}
// 1. 객체 생성(XMLHttpReqeust 객체 생성)
var request = new createRequest();
//2. open("요청방식","경로","비동기여부")
// Ajax 요청을 초기화 하면서, 요청방식, 경로, 비동기여부를 지정
// 요청방식 : get, post
// 경로 : 가지고올 데이터 주소
request.open("GET","data.html",false);
// 3. send() : 요청
request.send();
// 4. 화면에 출력 : innerHTML
document.body.innerHTML += request.responseText ;
// 태그와 문자를 그대로 읽어들인다.
// document.body.append(request.responseText);
</script> |
cs |
Ajax 배경 2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<script type="text/javascript">
function createRequest() {
var request ;
try {
// IE 7.0이상일때
request = new XMLHttpRequest();
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = new ActiveXObject("Msxml3.XMLHTTP");
}
}
return request ;
}
var request = new createRequest();
// request.status : 서버로부터 받은 응답의 상태를 숫자로 표시
// => 200(성공) , 4XX(클라이언트오류), 5XX(서버오류)
// request.readyState : 데이터의 전달 상태를 숫자로 표시
// 0, 1, 2(데이터받지못함), 3(데이터일부만 받음), 4(데이터를 전부받음)
request.onreadystatechange = function() {
if(request.readyState==4 && request.status==200){
document.body.innerHTML += request.responseText;
}
};
request.open("GET","Ajax.txt",false);
request.send();
</script> |
cs |
(json 파일)data.js
|
1
2
3
4
5
6 |
[
{"name" : "우유", "price":"1000"},
{"name" : "음료수", "price":"1200"},
{"name" : "커피", "price":"2500"},
{"name" : "차", "price":"3000"},
] |
cs |
data.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product>
<name>우유</name>
<price>1000</price>
</product>
<product>
<name>음료수</name>
<price>1200</price>
</product>
<product>
<name>커피</name>
<price>2500</price>
</product>
<product>
<name>차</name>
<price>3000</price>
</product>
</products> |
cs |
data2.xml
|
1
2
3
4
5
6
7 |
<?xml version="1.0" encoding="UTF-8"?>
<products>
<product name="우유" price="1000" />
<product name="음료수" price="1200" />
<product name="커피" price="2500" />
<product name="차" price="3000" />
</products> |
cs |
json Test.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트로 json 읽기</title>
</head>
<body>
<script type="text/javascript">
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = new ActiveXObject("Msxml3.XMLHTTP");
}
}
return request;
}
var request = new createRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
// eval(내용) : 해당 내용을 자바스크립트 형태로 변경 하는 역할
var json = eval("("+request.responseText+")");
var str ="<table border=1 width=400px>";
str += "<tr><th>종류</th><th>가격</th></tr>"
for (var i = 0; i < json.length; i++) {
str +="<tr>";
for(var k in json[i]){
str +="<td>";
str += json[i][k]
str +="</td>";
}
str +="</tr>";
}
str +="</table>"
document.body.innerHTML += str ;
};
};
request.open("GET","data.js",false);
request.send();
</script>
</body>
</html> |
cs |
xml Test .jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트로 xml를 읽기</title>
</head>
<body>
<script type="text/javascript">
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = new ActiveXObject("Msxml3.XMLHTTP");
}
}
return request;
}
var request = new createRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
// 가지고 온 파일이 xml파일 이므로 파싱
var xml = request.responseXML;
// document.body.innerHTML = xml;
var names = xml.getElementsByTagName("name");
var prices = xml.getElementsByTagName("price");
var str = "<table border='1' width='400px'>"
str += "<tr><th>종류</th><th>가격</th></tr>"
for (var i = 0; i < names.length; i++) {
str += "<tr>";
// 요소에서 글자 추출 => childNodes[0].nodeValue;
var name = names[i].childNodes[0].nodeValue;
var price = prices[i].childNodes[0].nodeValue;
str += "<td>"+name+"</td><td>"+price+"</td>";
str +="</tr>"
}
str += "</table>";
document.body.innerHTML += str ;
};
};
request.open("GET","data.xml",false);
request.send();
</script>
</body>
</html> |
cs |
xml Test2.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트로 xml를 읽기</title>
</head>
<body>
<script type="text/javascript">
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
request = new ActiveXObject("Msxml3.XMLHTTP");
}
}
return request;
}
var request = new createRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200){
// 가지고 온 파일이 xml파일 이므로 파싱
var xml = request.responseXML;
// document.body.innerHTML = xml;
var product = xml.getElementsByTagName("product");
var str = "<table border='1' width='400px'>"
str += "<tr><th>종류</th><th>가격</th></tr>"
for (var i = 0; i < product.length; i++) {
str += "<tr>";
var name = product[i].attributes[0].value;
var price = product[i].attributes[1].value;
str += "<td>"+name+"</td><td>"+price+"</td>";
str +="</tr>"
}
str += "</table>";
document.body.innerHTML += str ;
};
};
request.open("GET","data2.xml",false);
request.send();
</script>
</body>
</html> |
cs |
'HTML│CSS│Java Script' 카테고리의 다른 글
| Ajax json xml 파일 읽기 2 (0) | 2018.07.21 |
|---|---|
| Ajax 자바 스크립트 다른 jsp 파일 읽기 (2) | 2018.07.21 |
| html 예제 코드 / html 공부 / 점선 , 실선 , 배경 , 표 , 블록레벨 , 인라인 (0) | 2017.12.07 |
| html1208 (0) | 2017.12.07 |
| html 1207 (0) | 2017.12.07 |
댓글