22-11-07-jQuery & Ajax & HTTP/HTTPS (2)

<div id="1">value-1</div>
<div id="2">value-2</div>
<div id="3">value-3</div>
<div id="4">value-4</div>
<div id="5">value-5</div>
<div id="6">value-6</div>
<div id="7">value-7</div>
<div id="8">value-8</div>
<div id="9">value-9</div>
<div id="10">value-10</div>

<script>
	$('div').filter(':even').css('color','red');
  
  	// index 0 부터 시작해서 index 3, 6, 9색을 green으로 변경
  	$('div').filter((index, selector) => {
  		if (index % 3 === 0) {
  			$(selector).css('color','green');
  		}
  	})
</script>

요구사항
1. items 부모를 찾아 background-color를 파란색으로 바꿔주세요.
2. items 2번째 color를 빨간색으로 바꿔주세요
3. ul2의 자식인 li요소를 선택하여 1번부터 3번까지 color를 녹색으로 바꿔주세요.
4. ul2의 자식인 li요소를 선택하여 7번부터 10번까지 color를 파란색, background-color를 빨간색으로 바꿔주세요.

$('.items').parent().css('backgroundColor', 'blue');
$('.items').eq(1).css('color','red');
$('.ul2').children('li:lt(3)').css('color','green');
$('.ul2').children('li:gt(5)').css({ color: "blue", background: "red" });

이벤트

$(function() {
	$('div').click(function(){
    	$(this).hide();
    });
})

$('#btn_data').click(function(){
	$('#data').load('URL', function(responseText, statusText, xhr) {
    	.....
        // responseText : 요청결과
        // statusText : 요청의 상태
        // xhr : 요청한 오브젝트
    })
})

Ajax

비동기 자바스크립트와 XML을 뜻함
기존 동기식 방식과 다르게 비동기식으로 만들 수 있는 기술

비동기 통신으로 웹 페이지 전체 로딩 X -> 일부분만 업데이트 (ajax)

동기 : 요청 받고 응답을 받아야 다음을 실행하는 방식 (순차적 실행)
비동기 : 요청 보낸 후 응답 상관없이 다음 동작 실행

• ajax 로딩

$('#btn_data').click(functino(){
	//$.ajax({경로, 동기화 여부, 성공하면 할 일})
	$.ajax({
		url: '',
        // async : true (비동기처리), false(동기처리)
		async: true,
        // true인 경우 통신이 다 완료되지 않아도 뒤에 코드 실행
		success: function (result) {
			for (i const of result) {
            	console.log(i);
            }
		}
	})
})

서버와의 통신 XMLHttpRequest 객체

새로고침없이 서버에서 데이터 받기 가능 (일부 업데이트)

const 이름 = new XMLHttpRequest()

• open() 메소드를 이용해 요청 초기화

open(전달방식POST, URL주소, 동기/비동기여부)

• send() 메소드를 이용해 서버로 요청
  open()메소드로 작성한 Ajax요청을 서버로 전송

send(); // GET 방식
send(문자열); // POST 방식

• GET 방식
  주소에 데이터를 추가하여 전달하는 방식
  URL 뒤에 ?를 사용하여 데이터 표현
  보안에 취약

• POST 방식
  데이터를 별도로 첨부하여 전달하는 방식
  보안성이 높다.

HTTP/HTTPS

HTTP (HyperText Transfer Protocol)
통신을 위한 문서 전송을 위한 약속

HTTP + 암호화 + 인증 + 완전성 보호 = HTTPS
HTTPS로 도청 피할 수 있다.
통신 상대 확인 가능
변조 방지 가능하다

-> 민감한 정보를 포함하지 않는다면 HTTP로 사용하고
민감한 정보를 포함하는 경우 암호화하는 HTTPS 사용

TCP/IP

인터넷 관련된 다양한 프로토콜 집합
HTML, FTP(파일 전송), SNMP, TCP(연결지향적), IP, UDP(빠른 통신) 등이 포함

GET

서버에서 정보 얻어옴

fetch('URL', {
	method: 'GET';
})
.then((response) => response.json())
.then((data) => {
	console.log('성공', data);
})

POST

서버에 새로운 정보 제공

fetch('URL', {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
	console.log('성공', data);
})

PUT

서버에 새로운 유저 정보 덮어 씌우기 (정보 수정)
method: "PUT"

DELETE

서버에 유저 정보 삭제하기
method: "DELETE"