본문 바로가기

Ajax20

jquery ajax 요청 절대경로 다른도메인 ajax 요청 절대경로 다른도메인 ajax 요청하기 위 포스팅에서 ajax로 요청하는 방법을 보았다. 문제는 상대경로는 문제없이 읽어들일수 잇는데. 절대경로 즉 다른 도메인이나 서비스를 제공하진 않는 사이트라면 그렇지않다. 이는 대부분의 브라우저가 페이지를 다운로드한 서버외에 다른 서버에 HTTP요청하는 것을 막고있기 때문이다. 즉 보안적으로 브라우저의 당연히 갖춰야할 조취라 할수있다. XSS 크로스 사이트 스크립팅(Cross-Site Script) 앞서 말한 ajax요청등을 악의적으로 사용하는경우를 말한다. 예로들자면 나쁜코드가 다른사용자의 브라우저에서 수행되도록 하는공격,게시판이라든가 쿠키에 접근가능한 일이 가능해진다.요즘 거의 이런일이 없고 보안상 잘준비되있다. 절대경로, 다른도메인에서 읽기 하지만.. 2010. 3. 16.
jquery ajax 요청 함수 jquery ajax 요청 함수 여러 예제를 봤겠지만 요청방식에는 다음과 같은 종류가 있다. getJSON get post ajax 위의 방식으로 요청하는 파라메터는 ajax빼고는 비슷하다 url 데이타 함수 이순서로 입력.예제를 참고하자 $.get('/stest.php', {'param':'jquery'}, function(data) { ...}); 가장간단한 방식은 load이다. load 어떤 위치의 test.html을 불러온다면 $('#test').load('/test.html'}); load는 가장간단한 방식니다. 데이타형식이 객체라면 post 아니면get 방식으로 불러온다. 또 차이점은 문서의 일부분을 불러올수있다는점 $('#test').load('/test.html' #part}); 위의 소스.. 2010. 3. 15.
Ajax로 구현 가능한 예제 Ajax로 구현 가능한 것들은 무엇이 잇는가? Ajax로 구현 가능한 것들은 무엇이 있는지 살펴 보자 간단한 채팅솔루션 틀별히 회원 가입이나 별도 인증없이 바로 채팅가능하게 할수있다 폼입력 유효성검사 폼입력에 대하여 올바르게 입력했는지 확인하는 유효성검사를 할 수있다. 실시간 단어제안과 자동완성 포털사이트의 필수가 되는 항목이다. 대표적인 네이버,다음. 구글등 이미 경함해봤겠지만 글자를입력하면 아래에 간단하게 자동완성되도록 해준다. RSS리더기 rss리더기도 작성할수있다.대표적인 구글리더기와 같이구현한다 드래그&드롭 기능 드래그, 드롭으로 화면의 UI를 컨트롤 할 수 있게 한다. 필수적이진 않다, 대표적인것으로 BBC홈페이지에 가보면 알수있다. 2010. 2. 18.
ajax 테이블 페이징 ajax 테이블 페이징 jquery를 이용한 ajax 테이블 페이징 테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다. 여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5 1Q84 무라카미 하루키 문학동네 14,800원 6 마법의 돈관리 고득영 국일미디어 12,000원 7 박철범의 하루공부법 박철범 다산에듀 12,000원 8 엄마를 부탁해.. 2010. 2. 17.
jquery를 이용한 ajax 테이블 정렬 순서변경 jquery를 이용한 ajax 테이블 정렬 순서변경 오름차순과 내림차순 방법으로 모두 정렬하려면 이번엔 다른 키코드를 삽입해야 한다. 이제까지는 오름차순만 사용했지만 이번에 변수를 넣어서 클릭시 차순이 변화되도록 해보자. if (a.sortKey b.sortKey) return 1; return 0; 저번에 보았던 비교 값을 이용한 정렬이다. 만약 숫자가 작다면 -1 값을 반환 크다면 1을 반환 상관없으면 0을 반환하도록 되어있다. 이를이용하여 오름차순으로 정렬되게 했다. 자그럼다음코드를 보자 if (a.sortKey b.sortKey) return -1; retu.. 2010. 2. 17.
자바스크립트 메모리 누수 자바스크립트 메모리 누수 C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다 테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자 $.each(rows, function(index, row) { row.sortKey = $(row).children('td').eq(column) //별도로 sortKey 로 지정해주고 .text().toUpperCase(); }); rows.sort(function(a, b) { //여기서 따로 수행처리하도록 if.. 2010. 2. 17.
jquery를 이용한 ajax 테이블 정렬 수행속도 jquery를 이용한 ajax 테이블 정렬 수행속도 테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자 테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬 위의포스팅에서 정렬처리구문은 다음과 같았다. rows.sort(function(a, b) { var keyA = $(a).children('td').eq(column).text() .toUpperCase(); var keyB = $(b).children('td').eq(column).text() .toUpperCase(); if (keyA keyB) return 1; return 0; }); $.each(rows, function(index, row) { 위와같은경우는 비교할때 key.. 2010. 2. 17.
jquery를 이용한ajax 테이블 정렬 jquery를 이용한ajax 테이블 정렬 여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자 네이버에 올라와있는 베스트셀러를 참조했다. 다음과같은 이미지를 모델로 할것이다 html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록 긴 소스기에 접어놓았다 베스트셀러 순위 책제목 저자 출판사 가격 1 덕혜옹주 권비영 다산책방 11,800원 2 삼성을 생각한다 김용철 사회평론 22,000원 3 죽을 때 후회하는 스물다섯 가지 오츠 슈이치 21세기북스 12,000원 4 시크릿 두 번째 이야기 폴 해링턴 살림 12,000원 5.. 2010. 2. 12.
jquery를 이용한 Ajax html데이터 일부분 로드 jjquery를 이용한 Ajax html일부분 로드하기 Ajax 데이터로드하기 html편에서 이미 html 전체를 로드하는 방법을 봤다. 이번에는 일부분을 로드하는 방법을 살펴보자 html데이타 파일 데이타 파일 안에 두가지로 분류해놓자 클래스명을 하나는 part 또다른 하나는part02 로 정해주었다. Part one 어쩌고 저쩌고 Part tow 이러히 저러히 메인페이지 jquery를 이용한 ajax 데이터로드 html일부분 html 일부분_01 html 일부분_02 로드된 데이터가 들어올자리 리스트에 두가지로 나누었다 하나는 아이디 one을 주었고 하나는 아이디 tow를 주었다. 이제 각각클릭시 part, part02를 부르도록 스크립트를 짜보자 jquery 스크립트 $(document).ready.. 2010. 2. 10.
jquery를 이용한 Ajax 로딩중 알리기 jquery를 이용한 Ajax 로딩중 알리기 흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자 html로딩 소스 짜기 html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다. now loading html과 css로 짜준다면 now loading css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다. div#loading{height:80px; width:80px; background:#999; border:10px #000 solid;} div#loadin.. 2010. 2. 9.