18. Ajax
페이지 정보
작성자 관리자 댓글 0건 조회 1,172회 작성일 22-01-12 19:02본문
18. Ajax
Ajax(Asyncronous javascript and xml)
1. XMLHttpRequest
var xhr = new XMLHttpRequest();
2. URL을 연다(서버와 연결을 한다.)
xhr.open("GET", 'url');
3. xhr.onreadystatechange 이벤트를 정의한다.
readyState속성값을 이용하여 서버와의 연결상태를 점검할 수 있다.
위 속성값이
0: 초기화 되지 않았음. --- open() 호출되지 않은 상태
1: 로드가 되고 있음 --- open()이 실행되었음.
2: 로드가 되었음 --- send()가 실행되었음
3: 서버가 데이터를 리턴했음
4: 요청이 완료되었고, 서버도 응답을 완료했음.
status 속성 200일때 응답이 정상적으로 이루어짐을 의미
responseText : 서버의 응답문자
4. xhr.send()
실습 : jMobile40.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
function connectAjax(){
xhr.open('GET', './testText.txt');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
document.getElementById("txt1").innerHTML = xhr.responseText;
}
}
xhr.send();
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>Ajax</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<input type="button" value="Ajax 테스트" onClick="connectAjax();">
<textarea id="txt1"></textarea>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div><!-- footer -->
</div><!-- page1 -->
</body>
</html>
같은 폴더에 testText.txt 파일을 생성하고, 아래와 같이 입력한다.
파일명 : testText.txt
ajax 테스트
Ajax(Asyncronous javascript and xml)
JQuery에서는 Ajax를 구현하기 위해 사용하는 함수 ajax()를 이용한다.
ajax()함수는 기본적으로 전달되는 JSON형식의 값이 있다.
$.ajax({
url:"읽어올 페이지 주소",
type:"get/post",
data:"서버에 전달할 파라미터(string 또는 json)",
dataType:"text/xml/json/jsonp"
timeout:ms단위의 시간값,
success:function(){모든것이 성공완료 처리가 되면 실행되는 함수..},
error:function(xhr, testStatus, errMsg){}
})
실습 : jMobile42.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$.ajax({
url:"./book.xml",
type:"get",
dataType:"xml",
timeout:2000,
success:function(xml){
$(xml).find("computer").each(function(){
var num = $(this).attr("num");
var title =$(this).find("title").text();
var writer = $(this).find("writer").text();
$("<p>").css({
border:"1px solid green",
margin: "5px"
}).html("["+num+"]"+title+"/"+writer).appendTo($("#div1"));
});
},
error:function(xhr, textStatus, errMsg){
$("#div1").html("<p>"+textStatus+"(HTTP-" + xhr.status+" / "+errMsg+")</p>");
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>Ajax</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<input type="button" value="xml데이터처리하기" id="btn1">
<div id="div1"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div><!-- footer -->
</div><!-- page1 -->
</body>
</html>
같은 폴더에 book.html 파일을 생성한다.
파일 : book.html
<?xml version="1.0" encoding="utf-8" ?>
<book>
<computer num="1">
<title>자바스크립트</title>
<writer>홍길동</writer>
</computer>
<computer num="2">
<title>하이브리드앱</title>
<writer>김말똥</writer>
</computer>
</book>
실습 : jMobile43.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$.ajax({
url:"./employeeData.js",
type:"get",
dataType:"json",
success:function(data){
$(data).each(function(){
var num =this.num;
var name=this.name;
var team=this.team;
$("<p>").css({
border:"solid 2px gray",
margin:"5px"
}).html("["+num+"] "+name+" / "+team).appendTo($("#div1"));
});
},
error:function(xhr, textStatus, errMsg){
$("#div1").html("<p>"+textStatus+"(HTTP-"+xhr.status+" / "+errMsg+")</p>");
}
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>Ajax</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<input type="button" value="JSON 데이터 가져오기" id="btn1">
<div id="div1"></div>
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div><!-- footer -->
</div><!-- page1 -->
</body>
</html>
같은 폴더에 employeeData.js 파일을 생성한다.
파일 : employeeData.js
[
{
"num":1,
"name":"김말똥",
"team":"디자인"
},
{
"num":2,
"name":"홍길동",
"team":"개발2"
}
]
실습 : jMobile44.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>제이쿼리 모바일 연습</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
// var getUserInfo = function(data){
var getUserInfo = function(user){
//console.log(data);
//var user=JSON.parse(data).user;
//console.log(user);
$("#txtId").val(user.id);
$("#txtName").val(user.name);
$("#txtTel").val(user.tel);
$("#txtEmail").val(user.email);
}
var init=function(){
$("#btn1").click(function(){
/*
$.ajax({
url:"./jsonData.php",
type:"get",
dataType:"text",
success:getUserInfo
});
*/
$.getJSON("./jsonData.php", function(data){
console.log(data);
$.each(data.user, function(i,value){
console.log(i+": "+value);
});
getUserInfo(data.user);
});
});
}
$(document).ready(init);
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" id="header">
<h3>Ajax</h3>
</div><!-- header -->
<div role="main" class="ui-content">
<input type="text" id="txtId">
<input type="text" id="txtName">
<input type="text" id="txtTel">
<input type="text" id="txtEmail">
<input type="button" value="JSON 데이터 가져오기" id="btn1">
</div><!-- main -->
<div data-role="footer" data-position="fixed">
<h3>jQuery</h3>
</div><!-- footer -->
</div><!-- page1 -->
</body>
</html>
파일 : jsonData.php
{
"user":{
"id":"10",
"name":"홍길동",
"tel":"010-1234-1234",
"email":"aaa@aaa.com"
}
}
댓글목록
등록된 댓글이 없습니다.