jQuery ajax_jQuery

Ajax

- XMLHttpRequest 객체를 활용하여 가공된 ajax 메서드 -> $.ajax()

- 비동기화 방식 통신

- text, html, json, xml 을 주로 비동기화 통신 시 사용한다.

- 브라우저에서 ajax 통신 시 같은 도메인에서만 기본 허용하고 있다.

- CORS 정책 위반으로 비동기화 통신 못 할 경우 응답쪽에서 헤더에

   Access-Control-Allow-Origin 값 설정 혹은 요청 서버(서버언어로)에서 비동기화 통신해야한다.

Ajax Possing 해주는 코드

var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

 

http://localhost:8080
↓요청X  다 허용해준다고 작업 해줘야 한다 / 서버에서 비동기화 방식으로 통신
http://localhost:8081

동기화, 비동기화

동기화

요청과 응답이 동시에 일루어 지는방식

클라이언트가 서버에 요청시 서버에서 응답하는 형식

작성된 코드 순서대로 처리를 완료를 하고 이후에 클라이언트에 응답을 하는방식

서버에서 응답이 늦어질 경우 클라이언트에서 화면출력을 대기하는 시간이 길어진다. 

 

비동기화

요청과 응답이 동시에 이루어 지지 않는다.

웹페이지를 리로드하지 않고 서버와 통신하는 방식

클라이언트 먼저 실행 되고, 서버에서 응답왔을 경우 작성된 코드가 실행이 된다.

저장된 파일을 클릭하게 되면 엑셀에 저장된  프로그램을 읽어서 우리 화면에 띄워줌
엑셀 파일을 돌리기 위해 체계가 이미 잡혀있다.
xml, json, txt 방식들에 맞는 방식을 짜줘야한다.
확장자명과 content type 두 개를 확인해서 해당 맞는 프로그램을 실행시켜서 화면에 띄워준다.
사용자가 클릭해서 보려면 확장자명도 필요하다.
응답 할 때 content type만 명시 해주고 응답 comment에 맞도록 코드를 작성해주면된다.
화면에서 possing 자바스크립트에서 쓸 수 있는 방식으로 변환해준다.

 

Ajax 요청과 응답

요청 : 서버상에 존재하는 URL을 호출 

응답 : 최종적인 데이타를 화면에 출력 (클라이언트에게 전달) 

응답 포맷 방식 : 클라이언트(브라우저)에서 표현 가능한 포맷방식을 알아야 그 방식에 맞는

 코드작성과 데이타를 포맷하여 클라이언트에 전달 할 수 있다. 
브라우저에서 표현 가능한 대표적인 포맷방식 : html, xml, json, text 

ajax는 최종적으로 클라이언트에 표현된 데이타를 읽어 사용된다. 

contnetType (MIME-TYPE) : 

  html -> text/html 

  xml -> application/xml 

  json -> application/json 
  text -> text/plain 

 

 

 

content-type 명시를 하지 않으면 기본 text/html 으로 명시가 된다.

 

JSON contentType

application/json   

요새 데이타 주고 받는 방식은 xml보단 json을 많이 사용한다. 

자바스크립트의 Obejct처럼 키와 값으로 이루어져 있다.

구문 : {"key" : "value"}

구문 : [{"key" : "value"}, {"key" : "value"}]

 

XMLHttpRequest

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

브라우저 체크

보내는 파일 무엇인지

XMLHttpRequest 예제

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();//모든 데이터 텍스트로 가져온다.

    if(!httpRequest) {
      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;//서버가 응답이 되면 alertContents 실행
    httpRequest.open('GET', 'test.html');//GET 방식으로 요청
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {//200 정상적인 코드
        alert(httpRequest.responseText);//응답 성공했을 때 httpRequest에 있는 텍스트 모두 가져온다.
      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
  }
})();
</script>

 

 JSON 내장 객체를 이용하여 파싱

function alertContents() {
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      var response = JSON.parse(httpRequest.responseText);//httpRequest.responseText함수는 객체를 txt로 변환해준다.
      //데이터 보내서 요청
      //jSon 방식으로 응답
      //화면 읽어옴
      alert(response.computedString);
    } else {
      alert('request에 뭔가 문제가 있어요.');
    }
  }
}

 

 

jQuery ajax로 비동기화 서버 요청

요청 서술

<button type="button" id="ajaxRequestBtn">요청</button>
<script type="text/javascript">
$(function(){
$('#ajaxRequestBtn').click(function(){
//$.ajax() 호출시 ajax에 관련된 객체를 반환한다.
var request = $.ajax({
url: "<%= request.getContextPath() %>/ajax-response.jsp", //요청 url
method: "POST", //요청 방식
data: { id : 'test' }, //요청하는 곳에 전달될 데이타
dataType: "json" //응답되어 받은 데이타를 parsing 시킬 방식
});
//반환된 객체에는 done메서드가 있으며, 요청과 응답이 정상적으로 
//이루어 졌을 경우 해당 메서드가 실행이 된다.

받아줌

request.done(function( data ) {
	console.log(data);
});
//반환된 객체에는 fail메서드가 있으며,
//응답 중 에러가 발생하거나, 데이타 parsing에러시 해당 메서드가 실행된다.
request.fail(function( jqXHR, textStatus ) {
	alert( "Request failed: " + textStatus );
});

});
});
</script>

 

 

응답 페이지 - ajax-response.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

String id = request.getParameter("id");

System.out.println(id + ">> id");

%>

{"result" : "<%= id%>"}