$$config title: [블로그]?Let's JavaScript keywords: - AJAX 란 무엇입니까? $$ `src >> https://yoojin99.github.io/js/Ajax/ https://myjamong.tistory.com/17 ` # 개념 - 비동기식 자바스크립트와 xml 의 약자 - 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용 - 전체 페이지를 새로 고침하지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 - JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 # 왜 쓰는가? - HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고 ----> Server에서 response를 받으면 이어졌던 연결이 끊기게 되어있다 - 그래서 화면의 내용을 갱신하기 위해 다시 request-response를 하면서 페이지를 갱신 - 페이지의 일부분만 갱신할 때도 페이지 전체를 다시 로드해야 하는데 자원, 시간 낭비가 발생 - ajax는 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록함 - ***XMLHttpRequest 객체를 통해 서버에 request*** - Json이나 xml 형태로 필요한 데이터만 받아 갱신할 수 있다 # 장점 1. 웹페이지의 속도향상 2. 서버의 처리가 완료될때까지 기다리지 않고 처리 가능하다. 3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다. 4. 기존 웹에서는 불가능했던 다양한 UI를 사용할 수 있게 한다. 예를들어 Flickr라는 사이트에서는 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다. # 단점 1. 히스토리 관리가 안 되기 때문에 보안을 신경 써야 한다. 2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다. 3. XMLHttpRequest를 통해 통신하는 경우 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 요청이 완료되지 않은 상태에서 사용자가 페이지를 떠나거나 오작동할 우려가 있다. # 제이쿼리를 쓰자 - jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 된다 - Jquery ajax를 사용하면 HTTP Get과 HTTP Post 방식 모두를 사용해서 원격 서버로에 데이터를 요청할 수 있다 # AJAX 기본문법 ## 기본문법 예제 1-1 ```js // ? DTO 클래스 public class Jamong { String name; int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } } // ? 에이젝스 $('#btn1').on('click', function(){ var form = { name: "jamong", age: 23 } $.ajax({ url: "requestObject", type: "POST", data: form, success: function(data){ $('#result').text(data); }, error: function(){ alert("simpleWithObject err"); } }); }); // ? 컨트롤러 @RequestMapping(value="/requestObject", method=RequestMethod.POST) @ResponseBody public String simpleWithObject(Jamong jamong) { //필요한 로직 처리 return jamong.getName() + jamong.getAge(); } // ? 뷰

``` ## 기본문법 예제 1-2 ```js // ? 에이젝스 $('#btn2').on('click', function(){ $.ajax({ url: "serialize", type: "POST", data: $("#frm").serialize(), success: function(data){ $('#result').text(data); }, error: function(){ alert("serialize err"); } }); }); // ? 컨트롤러 @RequestMapping(value="/serialize", method=RequestMethod.POST) @ResponseBody public String serialize(Jamong jamong) { //필요한 로직 처리 return jamong.getName() + jamong.getAge(); } // ? 뷰

``` ## 기본문법 예제 1-3 ``` ``` - 기본문법 예제 2 ```js $.ajax({ type : "post", // 타입 (get, post, put 등등) url : "/requestUrl", // 필수 옵션임. 요청할 서버url async : true, // 동기, 비동기 지정(boolean) (default : true) headers : { // Http header "Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST" }, contentType: 'application/json', // 서버로 보내는 데이터의 타입은 contentType dataType : "json", // dataType은 통신의 결과로 넘어올 데이터 type data : JSON.stringify({ // 보낼 데이터 형식 (Object , String, Array) "id" : 아이디, "변수명" : 변수, "변수명" : 변수, "변수명" : 변수, "변수명" : 변수, }), mimeType: 'application/json', cache : false, success : function(result) { // 결과 성공 콜백함수 console.log(result); }, error : function(req, status, error) { // 결과 에러 콜백함수 console.log(error); }, complete : function(){ console.log("ajax끝"); } }); ```