<최종 화면>
총 두개를 만든다.
①하나는 회원가입 모양만 있는 페이지를 만들어서 jax 이용 비교
②회원가입 모양만 있는 페이지를 만들어서 jax 이용 get, post 방식을 알아본다.
ajax를 이용하면 추가 데이터를 표현할때, 새로운 페이지로 안열어도 된다.
우선 ajax를 사용하지 않고 입력 필드에 값을 받고, 그 값을 표시해보자.
데이터를 받고 표시할 php 파일을 만든다.
그러나 제출을 누르면 php 코드가 나온다. 이것은 웹브라우저는 php컴파일 기능이 없어서이다.
확인을 하기 위해 호스트 주소를 이용하자. (예제에서는 닷홈 무료호스팅 이용)
자신의 호스트 주소에 AJAX라는 폴더를 만들고 거기에 올렸다.
확인 방법 : 웹 브라우저 주소창에 호스트주소/파일경로 를 입력하면된다.
제출을 누르면 결과를 php파일에서 보여주므로, 처음에 html 파일 ->php 파일로 페이지가 바뀐다.
만약 똑같은 페이지에서 보여주고 싶으면 php파일에 html 내용을 똑같이 쓰고 결과를 보여주면 된다.
변경된 내용을 확인하려면 다시 파일 업로드!
이렇게하면 같은 화면에서 결과를 확인할 수 있다.
그러나 문제는 페이지가 바뀐다는 것이다. [html ->php] 만약 같은 화면을 보여주려면 html 코드를 php에 또 기재 필요..
같은 내용을 반복해서 보여주기가 불편하다.. 이럴경우 ajax를 이용하는 방법을 알아보자.
우선 데이터를 받아서 보여주기 전에 txt파일을 읽어와서 보여주는 것을 먼저 해보겠다.
ajax를 이용해서 데이터를 보내고 받을때는 우선 순서를 그냥 외우자. 아래 코드 몇번째 줄 참고
[크게보면 12번째줄-객체 생성, 15번째줄-데이터 받는 함수, 20번째줄-방식 여부설정, 21번째줄-요청]
원래는 객체 생성, 방식여부 설정, 요청, 데이터 받는 함수라고 생각이 들 것이다. 하지만, 요청을 하는 동시에 받는 함수의 실행을 하면 제대로 동작을 안할 수 있다.. 그래서 우선 받을 준비를 먼저 하고 (콜백 함수를 먼저 기재) 그 다음에 요청하는 것이다.
크롬으로 열었을 시, 정상 작동을 안한다.
Edge로 열자.
readyState와 status는 통신의 상태를 알려준다. 정해진 숫자이다.
<참고 자료>
if문의 조건은 요청이 종료되고 통신이 잘됐으면 textarea에 text.txt내용을 보여줄 것이다.
이제 txt파일을 읽어와서 보여주는 것이 아닌 데이터를 html->php / php -> html로 보여주자.
확인을 위해 다시 서버에 업로드 한다.
이제 GET 버튼을 누르면 잘 받아서 보여줄 것이다.
post방식도 해보자.
<복붙용 코드>
|
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- JQuery 추가 -->
<script>
function clickGET(){
// 서버와 데이터를 주고 받는 객체 생성(Android의 HttpUrlConnection과 같은 객체)
var req= new XMLHttpRequest();
// 저 아래 send()메소드에 의해 서버와 연결되고 echo된 결과를
// 돌려받았을 때 콜백이벤트 처리
req.onreadystatechange= function(){
//서버로부터의 통신상태에 대한 결과를 받는 콜백함수
$('#ta').text(req.responseText);
}
}
req.send(); //요청 시작!!
// readyState값의 종류
// 1 (서버에서 요청내역을 로딩하고 있다는 응답)
// 2 (서버에서 요청내역 로딩을 완료되었다는 응답)
// 3 (서버에서 작업하고 있는 중이다...라는 응답)
// 4 (작업 완료되었다는 값)
}
function clickPOST(){
var req= new XMLHttpRequest();
req.onreadystatechange= function(){
$('#ta').text(req.responseText);
}
};
// 데이터를 post로 보낸다고 헤더 작업 필요함.
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
</script>
</head>
<body>
<h3>회원가입 페이지</h3>
<p>
<button onclick="clickGET()">GET</button>
<button onclick="clickPOST()">POST</button>
</p>
<hr>
<textarea id="ta" cols="30" rows="3"></textarea>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > JQuery' 카테고리의 다른 글
| JQuery parseXML (0) | 2019.12.19 |
|---|---|
| jquery에서 ajax 사용 메소드 [ get(), post(), ajax(), load() ] (0) | 2019.12.18 |
| Jquery dom 요소 제어 (0) | 2019.12.18 |
| JQuery animate (이미지를 이동, 투명도, 크기 변경) (0) | 2019.12.18 |
| JQuery animation (이미지에 대해 다양한 효과) (0) | 2019.12.18 |
댓글