** ajax : 자바 스크립트를 이용해서 도메인 내의 데이터를 비동기적으로 받아오는 기술
was는 클라이언트의 요청(url) 필요한 서비스 호출
webserver는 was 필요하지만 socket서버는 was필요없다.
클라이언트 요청(url) ->필요한 서비스 호출
메뉴 클릭하고 메인쪽만 변하게 하는 것 client가 쓰기 편하게 해서 만드는 것
웹에서는 ajax이다.
web socket은 내가 close할 때 까지 계속 연결된다. : chatting일 경우
ajax는 한번 하고 끊고 해야 한다. : .id등 검사
챗봇 서비스 : web socket으로 해야 한다. 대화를 주고 받아야 한다.
네이브 광과 -----------계속 바뀐다. 바뀌는 구조
1분에 한번씩 읽어오는 것이 낫다. 일정한 주기를 가지고 통신
실시간 대화 재일 많이 하는 것 : 게임
체팅 따로 뜨는 것은 activex
브라우즈로 들어가면 HTML이다.
Database,Java,Web FrontEnd,Java Web Server Programming
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 요청</title>
</head>
<body>
<div>고정된 내용</div>
<div id="disp">동적으로 변경되는 내용</div>
<div>고정된 내용</div>
<script>
//ajax를 이용해서 data.txt 파일의 내용을 읽어서 disp 영역에 출력
//여러번 사용할 필요 없다.
var disp = document.getElementById("disp");
//ajax 객체 생성
var request;
if(window.ActiveXObject){
request= new ActiveXObject("Microsoft.XMLHTTP");
}else{
request = new XMLHttpRequest();
}
//요청 옵션을 생성 - data.txt를 GET 방식으로 요청
request.open('GET', 'data.txt');
//30초마다 계쏙 수행되는 타이머
setInterval(function(){
//요청을 전송
request.send('');
}, 10000);
//요청을 전송
request.send('');
//비동기는 언제 종료될지 모르기 때문에 종료 된 후에 어떤 동작을 수행하고자 하면 콜백 메소드에 작성
//callback:어떤 이벤트가 발생하면 호출되는 메소드
//파일을 읽는 부분도 마찬가지 -파일을 읽어주세요 요청 - 파일을 전부 읽으면(LOAD) 동작을 수행
//콜백 메소드를 등록
request.onreadystatechange = function(){
//응답을 정상적으로 받은 경우
if(request.readyState == 4 && request.status >= 200 && request.status < 300){
//읽어온 데이터를 disp에 출력
disp.innerHTML = request.responseText;
}
}
</script>
</body>
</html>
**json파싱
자바스크립트에서는 json문자열은 json.parse()에 대입하면 파싱을 수행해서 자바스크립트 객체로 리턴을 해줍니다.
[{"name" :"javascript" , "rank" :1} , {"name":"javascript","rank":2}]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - json</title>
</head>
<body>
<div id ="disp"></div>
<script>
//1.ajax요청 객체 생성 -반드시 1번
var request;
//IE와 다른 브라우즈가 ajax 요청 객체 생성 방법이 다름
if(window.ActiveXObject){
request= new ActiveXObject("Microsoft.XMLHTTP");
}else{
request = new XMLHttpRequest();
}
//alert(request);
//2.ajax요청 옵션을 생성 - 1번 이후이 3번보다 먼저 나오면 됨
request.open("GET","data.json");
//alert(request);
//3.ajax 요청
//2와 3은 순서가 있다. 만들고 보내야 하기 때문이다.
request.send('');
//alert(request);
//4.상태변화가 생겼을 때 호출될 콜백 메소드를 등록 - 1번 이후에 아무곳에서 작성해도 됨
//콜백(이벤트 처리) 메소드는 순서와 상관 없이 이벤트가 발생했을 때 호출되는 메소드1111
request.onreadystatechange = function(){
//정상적으로 받아오는 경우
if(request.readyState == 4 & request.status >= 200 && request.status < 300){
//받아온 문자열
var res = request.responseText;
//json파싱 - 객체의 배열이 만들어집니다.
var result = JSON.parse(res);
//alert(result);
//출력할 영역 찾기
var disp = document.getElementById("disp");
html = "";
//배열 순회
for(var idx in result){
//alert(result[idx]);
html += "<p>" + result[idx].name +":"+result[idx].rank+"</p>";
}
disp.innerHTML = html;
}
};
</script>
</body>
</html>
**jquery
=>크로스 브라우징 지원을 위한 자바스크립트 라이브러리
=>jquery를 이용하면 ie와 다른 브라우저를 구분하는 코드를 만들 필요가 없습니다.
=>ajax 사용이나 애니메이션 같은 처리를 쉽게 처리해 줍니다.
=>다양한 플러그인들이 개발되어 있어서 복잡한 ui처리 등을 단순하게 처리할 수 있도록 해줍니다.
=>실무에서 많이 사용하기는 하지만 절다적이지는 않습니다.
=>jquery 의 링크를 먼저 실행하고 jquery를 사용해야 하고 서로 다른 버전의 링크를 만들면 안되고 동일한 파일의 링크를 2개 이상 작성해도 안됩니다.
1.사용방법
1)CDN(Content Delivery Network - 필요한 자원을 모아놓은 네트워크)의 링크를 이용
=>네트워크가 연결되지 않으면 사용할 수없습니다.
2)다운로드 받아서 프로젝트에 복사한 후 사용
open source
직접 link를 걸어서 사용할 수 있다. 여러개 사용할 경우에는 link가 복잡해진다.
open source
여러개의 open source를 받아서 repository에 담는다.
link는 repository의 것을 사용한다.
1) 실수를 줄일 수 있다. lincese문제
2) 일일이 링크를 알 필요없다. 네트워크의 영향을 받지 않는다. 나한테 가까운 것을 사용하는 게 유리하다.
같은 소스여도 무료인것 있고
2.//로 시작하는 url은 상황에 따라 http://나 https://로 연결한다는 의미
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js주소를 browser에 해보면
3.javascript파일의 이름에 min이 포함되어 있으면 이 파일은 용량을 줄이기 위해서 공백을 최소화한 파일입니다이파일 경로에서 min.을 지우면 공백이 포함된 파일의 경로입니다.
공백이 포함된 파일은 학습용이고 공백이 제거된 파일은 개발용입니다.
min이 있으면 지워도 된다.
jquery차트 plugin
http://www.jqplot.com/examples/kcp_area.php
https://jqueryui.com/download/
https://getbootstrap.com/docs/4.4/getting-started/introduction/
다운로드 받아서 link설정해서 사용해야 한다.
4.jquery 플러그 인을 사용할 때는 다운로드 받아서 링크 부분을 수정해야 합니다.
**html5
=>플로그인 설치 없이 웹 애플리케이션을 만들기 위한 api가 추가된 html4 의 다음 버전
1.semantic tag 추가
=>의미전달을 위한 태그 - 이전에는 div로 생성
<article></article> 눈으로만 보면 div 와 아무런 차이가 없습니다.
로봇이 보면 div 는 그냥 영역이라고 판단하지만 article은 기사의 본문이라고 판단
이전에는 div 를 만들고 class속성을 추가해서 의미를 전달
이런 요소로 <header>,<section>,<article>,<aside>,<nav>,<footer>가 추가됨
nav 제목이구나 눈으로는 확인할 수 없다.
2.WebStorate
=>브라우저 안에 자바스크립트 객체를 저장
WEB저장소 API가 추가됬다.(session, cookie로 )
3.WebSQL
=>관계형 데이터베이스 사용
4..IndexedDB
=>데이터베이스 NoSQL과 유사한 데이터베이스 사용
5.Drag& Drop추가
6.geoLocation: 브라우저에서 위치 정보 사용 가능
(어디에서 로그인하는지 )
7.canvas: 2D나 3D 드로윙 가능
=>3d는 webgl을 이용
8.webWorkr:스레드 api
웹브라우저 가운데도 백그라운드에서 인식 가능하다.
9.wEB Socket: http나 https는 한 번 데이터를 전송받으면 연결 해제되는데 WebSocket은 연결을 유지하는 것이 가능한데 프로토콜은 ws (채팅서비스)
10. Web Push:클라이언트의 요청없이 서버가 클라이언트에게 메시지를 전송하는 기술
WebSocket과 WebPush는 서버없이는 데스트가 불가능
HTML5는 semantic tag가 전부가 아님
**자바 웹 프로젝트의 실행
1.eclipse에서 실행
=>프로젝트가 자신의 워크스페이스의
C:\project\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps 디렉토리에 프로젝트가 복사되서 실행
tmp는 바꿀 수 있다.
실행이 되는 프로젝트는 복사된 프로젝트인지 소스 코드를 작성하고 있는 프로젝트가 아닙니다.
.이 붙는 디렉토리는 unix(mac os x), linux에서는 숨김 디렉토리입니다.
Mac에서 단축키가 shift +command+. 을 누르면 숨김 디렉토리가 보여집니다.
프로젝트에 어떤 파일을 만들어주고 읽을려고 헀는데 실행을 하할 때 실수로 만들지 않은 경우 프로젝트에 새로 만들어도 반영이 안되는 경우가 있습니다.
이런 경우에는 실행이 되는 프로젝트에 파일을 만들어 주면 됩니다.
실행하고 있을 떄는 이 위에 경로에것 사용한다. 데이터를 변경해도 변경하지 않는다.
[{"name" :"javascript" , "rank" :1} , {"name":"javascript","rank":2}]
대괄호가 배열
중괄호가 객체
동기 : 순서가 존재하다.
비동기 : 순서 가 없다.
스레드는 비동기이다.
'Study > html,css, javascript' 카테고리의 다른 글
| frontEnd-5 (0) | 2020.10.15 |
|---|---|
| frontEnd-4 (0) | 2020.10.12 |
| frontEnd-3 (0) | 2020.10.12 |
| frontEnd-2 (0) | 2020.10.12 |
| frontEnd-1 (0) | 2020.10.10 |