제이쿼리 비동기 방식 연계

Ajax

 

- 화면 전체를 리로딩

 

 

- 화면이 고정된 상태에서  데이터만 변환

 

Ajax 관련 메서드

 

- $ajax() 메서드를 거의 만능처럼 사용

 

<예제>

 

- jquery_ajax_news.html

 

 

- jquery_ajax_1.html

 

news의 내용을 불러와서 1에서 실행시키는 것인데 저기서 VS에서 실행하면 오류 발생

위의 파일을 이클립스에 복사해서 실행해보면 

 

 

이렇게 내용을 불러와서 출력하는 것을 확인 가능하다.

이클립스에서 실행할 때 주의할 점은 js파일도 가져와야한다는 것

 

$ajax() 메서드

 

JSON

 

(비동기 방식)AJAX와 XMLHttpRequest의 차이점

XMLHttpRequest는 XML뿐만 아니라 모든 유형의 데이터를 검색하는 데 사용할 수 있으며 파일 및 ftp를 포함한 HTTP 이외의 프로토콜을 지원합니다.

AJAX는 비동기 JavaScript 및 XML을 나타냅니다. XMLHttpRequest를 사용하여 서버와 통신합니다.
JSON, XML, HTML 및 텍스트 파일을 포함한 다양한 형식으로 정보를 보내고 받을 수 있습니다.

 

<예제 -XMLHttpRequest>

- main.jsp

- request_ajax.jsp

 

 

- 버튼을 클릭하면 내용을 받아올 수 있음

 

<예제 - ajax방식>

 

 

- ajax를 사용하기 위해서는 제이쿼리 파일 경로 넣어줘야 함

 

Ajax로 JSON 데이터 바인딩

 

<예제 - json데이터>

 

- 타입을 JSON으로 해서 ip address없애고 다운

 

 

- js폴더에 json파일 붙여넣기

 

 

 

- 설정한 1000개의 행을 모두 불러옴

 

<예제 - xml데이터>

 

- 이번에는 xml파일로 가상 데이터 생성