Ajax
2010. 1. 7. 12:41
http://www.parosproxy.org/index.shtml
http://blog.pages.kr/517 보안쪽에서 많이 사용한다함.
http://okjsp.tistory.com/tag/fiddler
피들러 : 통신하는 내용 볼수 있음.프락시 툴 같은 것임.통신하면서 눈에 보이지 않는것까지 모두 다 보면서 개발자들은 디버깅할때 주로 사용.
보안에서도 중간에 값을 변조해서 테스트 하고 자바스크립트로 값을 제어할 경우 자바스크립트로 숫자만 입력되도록 한 경우라면 실제 입력은 숫자뿐 안되겠지만 숫자 입력하고 중간에서 문자로 바꿔치기해서 보내면 받는 쪽에서 검증하지 않으면 통과됨.그런 테스트 할때 쓰이기도 하고 그렇지
왔다 갔다 하는 모든 내용들을 눈으로 보는거고 중간에서 변조도 가능하고 디버깅할때 어디에 문제가 있는지 확인하기도 하고 그렇지
http://blog.pages.kr/517 보안쪽에서 많이 사용한다함.
http://okjsp.tistory.com/tag/fiddler
피들러 : 통신하는 내용 볼수 있음.프락시 툴 같은 것임.통신하면서 눈에 보이지 않는것까지 모두 다 보면서 개발자들은 디버깅할때 주로 사용.
보안에서도 중간에 값을 변조해서 테스트 하고 자바스크립트로 값을 제어할 경우 자바스크립트로 숫자만 입력되도록 한 경우라면 실제 입력은 숫자뿐 안되겠지만 숫자 입력하고 중간에서 문자로 바꿔치기해서 보내면 받는 쪽에서 검증하지 않으면 통과됨.그런 테스트 할때 쓰이기도 하고 그렇지
왔다 갔다 하는 모든 내용들을 눈으로 보는거고 중간에서 변조도 가능하고 디버깅할때 어디에 문제가 있는지 확인하기도 하고 그렇지
Ajax
2009. 5. 18. 00:23
Ajax 입문
Ajax 기본 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=3919
IBM Ajax 강좌 : http://www-128.ibm.com/developerworks/kr/library/wa-ajaxintro1.html
Foundations of Ajax 소스 및 강좌 : http://blog.naver.com/jinoxst/140021512014
참고 사이트 정리 : http://cafe.naver.com/ajaxdev/37
Ajax 기술 정리
Ajax 클라이언트 측 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=3921
Ajax 서버 측 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=3920
Ajax 패턴 정리 : http://ajaxpatterns.org/Patterns
Ajax 읽어볼만한 글
Web 2.0 정리 : http://wiki.javajigi.net/pages/viewpage.action?pageId=4182
Web 2.0과 Ajax 애플리케이션 : http://cafe.naver.com/ajaxdev/4
Ajax의 효용성에 대한 논문 : http://cafe.naver.com/ajaxdev/101
Ajax
2009. 5. 6. 11:19
Ajax란?
Asynchronous JavaScript and XML(비동기 방식의 자바스크립트와 XML)Ajax를 구성하는 요소들
- XMLHttpRequest : 웹 서버와 통신담당. 사용자의 요청을 웹에 전송, 웹서버로부터 받은 결과를 웹 브라우저에 전달
- DOM : 문서의 구조를 나타낸다.
- CSS : 글자 색, 배경색, 위치, 투명도 등등 UI관련 부분
- 자바스크립트 : 사용자로 부터 이벤트(마우스 드래그나 버튼 클릭)를 받아 XMLHttpRequest객체을 통해서 웹서버에 요청 밑 응답을 받아 화면 조작
Ajax와 기존방식의 차이점
- 웹 브라우저가 아닌 XMLHttpReqeust 객체가 웹 서버와 통신
- 웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 텍스트
- 페이지의 이동없이 결과가 화면에 반영
XMLHttpRequest 객체
XMLHttpRequest 프로그래밍 순서
- XMLHttpReqeust 객체 구하기
- 웹 서버에 요청 전송하기
- 웹 서버서 응답이 도착하면 화면에 반영하기
1. XMLHttpRequest 객체 구하기
IE와 나머지 브라우저가 서로 다름. IE는 ActiveX 컴포넌트로 제공하며, 나머지 브라우저들은 XMLHttpRequest클래스를 기본적으로 제공하고 있다.
<script type="text/javascript">
var httpRequest = null;
function getXMLHttpRequest() {
// IE
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
}
}
// FF, Opera...
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
</script>
var httpRequest = null;
function getXMLHttpRequest() {
// IE
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
}
}
// FF, Opera...
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
</script>
2. 웹 서버에 요청 전송하기
- open() 함수 : 요청의 초기화, GET/POST 방식 선택, 접속할 URL
- send() 함수 : 웹 서버에 요청전송
2.1 open()함수의 인자
httpReqeust.open("GET", url, true);순서대로
- HTTP 메소드(GET, POST)
- 접속할 URL
- 동기/비동기 방식 지정
2.2 GET방식 전달의 예
httpRequest =
getXMLHttpRequest();
httpReqeust.open("GET", "/test.jsp?id=2&passwd=1111", true);
httpReqeust.send(null);
httpReqeust.open("GET", "/test.jsp?id=2&passwd=1111", true);
httpReqeust.send(null);
2.3 POST방식 전달의 예
httpRequest =
getXMLHttpRequest();
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");
3. 서버응답 처리하기
3.1 onreadystatechange, 콜백함수
httpRequest =
getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");
// 콜백 함수 function callbackFunction() {
....
}
httpRequest.onreadystatechange = callbackFunction;
httpReqeust.open("POST", "/test.jsp", true);
httpReqeust.send("id=2&passwd=1111");
// 콜백 함수 function callbackFunction() {
....
}
3.2 readStatus
바로위의 httpRequest.onreadystatechange에서 명시한 콜백함수는 readyStatus라는 프로퍼티의 값이 변경 될때마다 호출된다.| 값 | 의 미 | 설 명 |
|---|---|---|
| 0 | UNINITIALIZED | 객체만 생성되고 아직 초기화되지 않은 상태(open메소드가 호출되지 않음) |
| 1 | LOADING | open메소드가 호출되고 아직 send메소드가 불리지 않은 상태 |
| 2 | LOADED | send메소드가 불렸지만 status와 헤더는 도착하지 않은 상태 |
| 3 | INTERACTIVE | 데이터의 일부를 받은 상태 |
| 4 | COMPLETED | 데이터를 전부 받은 상태. 완전한 데이터의 이용 가능 |
function callbackFunction() {
if(httpRequest.readyState == 1 || httpRequest.readyState == 2 ||
httpRequest.readyState == 3) {
// 작업중임
} else if(httpRequest.readyState == 4) {
// 서버에서 완전한 응답이 도착한 경우
// 응답결과에 따라 알맞은 작업 처리
}
}
if(httpRequest.readyState == 1 || httpRequest.readyState == 2 ||
httpRequest.readyState == 3) {
// 작업중임
} else if(httpRequest.readyState == 4) {
// 서버에서 완전한 응답이 도착한 경우
// 응답결과에 따라 알맞은 작업 처리
}
}
readyState 값이 2, 3 인 경우 웹 브라우저에 따라 다르게 처리된다. 따라서 readyState의 값을 사용할 때는 1과 4를 사용하는 것이 크로스브라우저를 지원할 수 있는 가장 알맞은 밥법이다.
3.3 status/statusText
웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야한다. XMLHpptRequest객체는 웹 서버가 전달한 상태코드를 status 프로퍼티에 저장한다.| 값 | 텍스트 | 설 명 |
|---|---|---|
| 200 | OK | 요청 성공 |
| 403 | Forbidden | 접근 거부 |
| 404 | Not Found | 페이지 없음 |
| 500 | Internal Server Error | 서버 오류 발생 |
지금까지의 소스~
function callbackFunction() {
if(httpRequest.readyState == 1 || httpRequest.readyState == 2 || {
httpRequest.readyState == 3) {
// 작업중임
} else if(httpRequest.readyState == 4) {
// 서버에서 완전한 응답이 도착한 경우
// 응답결과에 따라 알맞은 작업 처리
if(httpRequest.status == 200) {
//정상적으로 수행
} else {
alert("문제 발생 : " + httpRequest.status);
}
}
}
if(httpRequest.readyState == 1 || httpRequest.readyState == 2 || {
httpRequest.readyState == 3) {
// 작업중임
} else if(httpRequest.readyState == 4) {
// 서버에서 완전한 응답이 도착한 경우
// 응답결과에 따라 알맞은 작업 처리
if(httpRequest.status == 200) {
//정상적으로 수행
} else {
alert("문제 발생 : " + httpRequest.status);
}
}
}