안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* ajax란?
- Asynchronous JavaScript and XML 의 약자
- 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
- 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.
* 선행지식
- '서버와 클라이언트의 관계' 에 대해 알고 있어야 합니다.
- 폼
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 8. Form 폼
$.ajax(settings)
- jQuery를 이용한 ajax통신의 가장 기본적인 API
- 주요속성
- url : 데이터를 전송할 URL
- dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
- type : 서버로 전송하는 데이터의 타입 (POST, GET)
- data : 서버에 전송할 데이터, key/value 형식의 객체
- success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
예제1-1. 웹페이지
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$('#result').html('');
$.ajax({
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html><코드 해석>
1. $('#result').html(''); 는 버튼에 입력한 result 결과값이 버튼창 위에 html메소드로 화면에 출력됩니다.
html('') 빈공간으로 준 것은 사용자가 입력한 값을
2.
javascript에서 {}안에 내용은 객체를 의미합니다.
{} 안의 내용은 '속성명 : 속성값' 형태로 입력하게 됩니다.
, 를 찍으면서 각각의 값들을 구분짓게 됩니다.
즉, {} 안에 '속성명 : 속성값' 형태로 객체의 속성들이 만들어지는 것입니다.
3.
예제 1-2. 서버 쪽 로직
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?><코드 해석>
echo는 데이터를 화면에 뿌려주는 명령입니다.
즉, 배열을 PHP에서 선언해주고, 위의 json encode메소드에 배열을 넣어주면,
msg는 REQUEST 배열에 사용자가 입력한 원소 값을 넣게 되는 것입니다.
데이터 타입인 json형태로 배열을 해석해서, result값을 체크하고,
result값이 true라면 $('#result').html(result['msg']); 이 부분을 실행해주는 것입니다.
result값이 true라는 내용은 위의 'result'=>true 부분에서 선언이 되어 있습니다.
ajax를 활용하는 원리를 정리하자면
=> 텍스트는 JSON 타입인 형태가 된다.
이를 규칙에 따라 서버가 해석하면 객체나 배열 등의 데이터로 변환할 수 있게 된다.
즉 javascript나 PHP는 서로 데이터 형태가 달라서 서로 연결할 수 있는 통로가 없다.
그래서 서로 약속을 만들어 놓고, 서버가 PHP로 텍스트를 전달하면 그 약속에 따라 javascript는 해석해서 배열이나 객체로 전환해주는 것이다.
+ 아래의 링크를 참고하여 공부하였습니다.
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 자바스크립트 this 와 제이쿼리 $(this) 차이점 (1) | 2023.08.20 |
|---|---|
| JQUERY - jQuery 기본 문법 및 js와 차이점, 셀렉터 이벤트 등록, jQuery 체이닝 (1) | 2023.08.20 |
| JQUERY - animation 애니메이션 (0) | 2023.07.09 |
| JQUERY - Traversing (탐색) 요약정리 (0) | 2023.07.09 |
| JQUERY - 9. Traversing 탐색 (0) | 2023.07.09 |
