API24 Ajax 데이터의 형식 Ajax 데이터의 형식 ajax는 서버에서 사용되는 프로그래밍언어와는 별개이다. 따라서 서버의 언어가 무엇인지는 관계없다. 그럼여기서 데이터 형식으로 어떤것이사용되는지 알아보자. text문서 가장 간단한 것이다 앞서 설명한 예제에서 클릭하면 텍스트 문서내의 내용이 호출되도록 해보았다. HTML 작은코드의 구현으로 일부분을 사용하는것이다. 전체 한페이지에서 우리가 아는HTML이 아닌 재사용할 일부를 만들어놓고 이를호출할수 있다. XML XML은 만들어진지도 오래됬고 그만큼 이미 웹상에서 모든곳에서 통용된다.플리커,등의 사이트등의 사이트에서는 XML 방법으로 데이터를 전송한다. JSON JSON자바스크립트를 기반으로 한다.javascript object notation의 약자이다.간결한구조에 재사용하기쉽고 .. 2009. 12. 11. HttpRequest 객체 자바스크립트객체 HttpRequest 브라우저의 다른 작업을 방해하지않으면서 서버에 데이터를 요청할수 있게하는 HttpRequest..이번엔 그 객체를 직접 만들어보자 인스턴스 만들기 대부분의 브라우저에서는 다음과 같이 간단히 시작할 수 있다 xhr = new XMLHttpRequest(); 여전히 걸림돌은 IE이다.익스플로어의 경우는 액티브X인스턴스를 만들어야된다. xhr = new ActiveXObject("Microsoft.XMLHTTP"); 자 그럼 일반적으로 내장객체지원하는 브라우저 그리고 그렇지않은 익스플로어를 구분하고 그에따라 위에서 생성한 적절한것을 사용하도록 해야할 것이다. 그럼 이때 필요한것은? 당연히 조건문.. //XMLHttpRequest를 지원할 경우 if (window.XMLHt.. 2009. 12. 10. Ajax와 HttpRequest Ajax와 HttpReqyest, 자바스크립트객체 먼저 저번에 둘러봤던 ajax에 대해 다시한번 돌아보자 일반적인 웹어플리케이션 동작 페이지에서 이벤트발생 서버에 요청 일반적으로 HTML로 결과를 응답받는다 페이전체가 리로드(바뀐다)된다 Ajax 웹어플리케이션 동작 페이지에서 이벤트발생 서버에 요청 XML,텍스트 등으로 결과를 응답받는다 필요한 페이지 일부가 리로드(바뀐다)된다 단 다음을 반드시 명시하자 기본적으로 html+css가 페이지를 구성한다 브라우저가 요청과 응답하는것이다. 자바스크립트 객체의 역할은 요청과 응답이 아니라 요청을 동기화시키고 들어온 응답을 처리한다. XMLHttpRequest 앞에서 본 자바스크립트 개체의 역할은 클라이언트와 서버사이통신을 담당한다고 할수 있겠다.이런 객체가 처음.. 2009. 12. 9. jQuery DOM empty clone 메소드 복사하기 jQuery DOM clone 메소드 .clone()은 엘리먼트를 복사하는 메소드이다. 클론은 이벤트 또한 복제하는데 하나하나 살펴보자 아메바...... 위의 엘리먼트를 복제해보자 $('p').clone(); 자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다. $('p').clone().insertAfter('p'); 위와같이하면아래와같이 복사되어 나올것이다 아메바......아메바...... 이벤트까지 복제 이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다. 누르면 버튼이 복제되어 생겨남 위의 버튼을 누르면 복제되도록하려면 $('button').click(fun.. 2009. 11. 28. jQuery DOM empty remove 메소드 제거하기 jQuery DOM empty remove 메소드 제거하기위한 메소드로는 .empty()와 .remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자 empty 메소드 empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다 모두 사라 집니다. 위의 코드에 아래를 삽입하면 아무것도 나오지 않는다. $('p').empty(); //p란 엘리먼트에 접근후 //p엘리먼트의 자식과 텍스트 제거 remove 메소드 이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다. 사라짐 안사라짐 위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다. $('p').re.. 2009. 11. 25. jQuery DOM wrap 메소드 대치하기 text replaceAll, replaceWith 메소드 대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다. text 메소드 .text()메소드는 텍스트를 대치해준다.안녕하세요?를 반갑습니다로 대치해보겠다. 안녕하세요? 이걸 대치하려면 다음과 같다. $('p').text('반갑습니다'); 결과는 안녕하세요? 대신에 반갑습니다가 나올것이다 replaceWith 메소드 이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자. 네이버 간판으로 바뀜 $('p').replaceWith(''); 네이버 간판으로 바뀜 대신에 아래그림이 나올.. 2009. 11. 24. jQuery DOM wrap 메소드 요소를 감싸기 jQuery wrap,wrapAll, wrapInner 메소드 앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자. wrap 메소드 앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다. $('p').warp(' '); //$('내부에 엘리먼트').warp('외부엘리먼트'); $('p').warp(' '); //위와같이 아이디 설정도 가능하다. 위와 같이 해준다면 표현은 다음과 같이 나올것이다 어쩌고 저쩌고........... 주의 할 점은 두가지이다. 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다. 감싸.. 2009. 11. 22. jQuery DOM after, befoer 메소드 요소뒤, 앞에 생성하기 jQuery after, befoer 메소드 .after()은 정해진 엘리먼트 뒤에 생성되고 before()은 앞에 생성된다.예를보자 먼저 html은 다음과 같다. 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 .after() $('p').after('after로 뒤에 생성 '); 결과는 다음과 같다. 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 after로 뒤에 생성 된 것 .before() $('p').before('bfore로 앞에 생성 '); 결과는 다음과 같다. before로 앞에 생성 된 것 여기앞에 그리고 뒤에 어쩌고 저저고 생성됨 insertAfter(), insertBefore() 이 두메소드 역시 Not only A but also B = B as well as A 와 같다고 보면된다. A... 2009. 11. 12. jQuery DOM트리 prepend, prependTo 메소드 jQuery prepend() 메소드 append()메소드와 사용법은 같다. 그럼 차이점은 무언인가? pre-앞이란 뜻이있듯이 preapend는 앞에 생성된다.앞서 포스팅 append() 메소드를 보면 뒤에 생성된것을 볼 수 있다.preapend는 앞에 생성된다. 사용방법은 똑같다. $(document).ready(function() { $('p').preppend('노말'); $('p').prepend('굵게'); $('가늘게').prependTo('p'); }); 결과는 아래와 같다 가늘게굵게노말본문 적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html 2009. 11. 10. jQuery DOM트리 append, appendTo 메소드 jQuery append() 메소드 먼저 DOM이뭔지 다시 잠깐보자 "객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다." jQuery 또한 이런 접근을 통해 모델을 구현한다.엘리먼트안에 새 엘리먼트를 만들거나.엘리먼트를 감싸거나, 엘리먼트 앞뒤에 추가하는 메소드를 지원한다. 그중 append()메소드가 엘리먼트안에 자식엘리먼트를 추가하는 .. 2009. 11. 10. 이전 1 2 3 다음
