본문 바로가기

Ajax20

jquery 이용한 Ajax 폼으로 검색하기 Ajax 데이터로드하기 폼(form) 검색편 데이타가 여러개 있다면 앞서해본것은 클릭시 로드되는데이타였다.이번에는 폼을 이용하여 그중 검색할때 원하는 결과가 나오도록 해보자 기본적인 폼 간단한 검색용 폼을 만들어보자 위와같이하면 흔히 보는 검색 박스하나와 검색버큰이 나올것이다. php데이터 다시보기 데이타는 저번과 같다 다만 검색으로 하기에 php를 조금 수정해줄필요가있다 찬찬히보자 저번에 포스팅한 데이터를 보려면 여기http://siana.tistory.com/entry/Ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0.. 2010. 2. 9.
Ajax 데이터로드하기 서버로 데이터 전달 php Ajax 데이터로드하기 서버로 데이터 전달 php 앞서본 포스팅한것들을 정적인 파일들이였다. html,스크립트 파일 단순한 텍스트(text)등으로 이정도는 ajax방법이 아니고도 가능하다.이번엔 동적인 데이타 전송을 살펴보자 동적 데이타파일 ajax를 이용한것은 동적데이타의 경우 브라우저에서 받은 입력값에따라 비동기적으로 되돌려주게 되어있다. 이런 동적파일은 php,java,asp가 있다.여기서 가장 편히 쓰이고 쉽게 할수있는 php로 예를들어보겠다. php 데이타요청 먼저데이타 파일을 보자 내용은 하나가아닌 여러가지로 분류되어 있다 $entries = array( 'HTML'=> array( 'definition' => 'HyperText Markup Language', 'explantion'=> '어.. 2010. 2. 8.
jquery 이용한 Ajax 데이터로드하기 간단한 스크립트파일편 Ajax 데이터로드하기 스크립트편 자바스크립트를 사용하면서 과다량의 사용으로 한번에 로드가 요구되어 과부하가 걸리는수가있다.이런경우 html생성부분을 로드하는 파일에 넣어서 처리할 수 있다.JSON의 예를보면서 확인해보자 앞서 포스팅한 부분(아래참조)을 되돌려보면 데이타를 로드하는 부분 그리고 html코드를 만들어주는 부분이 같이 포함된것을 볼수있다.이 스크립트만 사용한다면 문제없지만 다른 스크립트 소스와 많이 사용하게된다면 복잡하고 문제발생우려가 크다. $(document).ready(function() { $('#part02').click(function() { $.getJSON('./ajax_part/aboutJSON.json' ,function(data) { //여기까지 데이타로드하는코드 $('#.. 2010. 2. 7.
jquery 이용한 Ajax 데이터로드하기 xml편 Ajax 데이터로드하기 xml편 xml은 가장 널리알려지고 호환성좋은 데이터 형식이다.현재 웹상에서 보편적으로 통용되기에 부담없이 사용가능하다.이번엔 xml파일을 로드해보자 xml 어쩌고 저쩌고~~ 위와같은 파일을 로드해볼것이다. term이라지정된Xml을 h2 엘리멘트로 part의extensible markup language를 h3엘리먼트로 그리고 definition의 내용은 div엘리먼트로 로드해보자 이번엔먼저 만들어질 html 소스부터 생각해보자.앞서 설명한대로라면 다음과같이 나와야 할것이다. Xml extensible markup language 어쩌고 저쩌고~~ 두번 설명한 기본적인페이지 소스를다시보자 이번엔 part03로 아이디주고 list에 xml삽입이라고 텍스트를 입렸해줬다. jquery를.. 2010. 2. 6.
jquery 이용한 Ajax 데이터로드하기 JSON편 Ajax 데이터로드하기 JSON편 가장간단한 html을 로드해봤다면 이번엔 JSON파일을 로드해보겠다. JSON이란? JavaScript Object Notation으로 xml데이터를 대신하기위해 사용되기도 한다.중괄호 대괄호 등을 사용하여 표현한다. 예제를 보자 [ { "listN" : "JSON ", //변수지정 기리고 값설정 "sunmmary" : "JavaScript Object Notation", "definition" : [ "JSON (JavaScript Object Notation) is a lightweight data-interchange format.", "It is easy for humans to read and write.", "It is easy for machines to p.. 2010. 2. 5.
jquery 이용한 Ajax 데이터로드하기 html편 Ajax 데이터로드하기 html편 ajax는 여러기능이 있지만 그중 기본적인것이 비동기방식으로 데이터를 전송하는것이다.가장간단하게 jquery를 이용하여 html파일을 불러오는 것을 살펴보자 아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 html 데이타를 부를것이다. 기본적인페이지 소스 jquery를 이용한 ajax 데이터로드_01 html 삽입 로드된 데이터가 들어올자리 그리고 약간꾸며줄 css소스. 간단하게 양쪽으로 float해주고 명확히 하기위해 border를 주었다.마진 패딩 초기화등은 귀찮아서 패스. body{ width:960px; text-align:center;} #wrapper{ text-align:left;} #siadebar{ float:left; border:1px #00.. 2010. 1. 30.
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.
Ajax란 무엇인가? Ajax의 정의 Ajax란 무엇인가? jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자. Ajax 의 정의 초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다. 비동기(Asynchronous) 자바스크립트(javascript) 그리고 and XML 이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다. 위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운.. 2009. 12. 8.