제이쿼리 기초 (4)

Coosla·2021년 1월 11일
0
post-thumbnail

1. Ajax(Asynchronous javascript and XML)

Ajax란?

클라이언트(사용자) 가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버측에 자료(텍스트, XML, HTML, JSON 등)를 요청할 때 사용합니다.

2. Ajax 관련 메서드

  • load() 메서드
    외부 콘텐츠를 가져올 때 사용합니다.

    기본형

    ("요소 선택").load(URL, data, 콜백함수);
    • URL : 데이터를 받아올 URL 주소
    • data : URL 요청을 보낼 때 같이 보낼 데이터
    • 콜백함수 : 요청이 완료되면 호출될 함수
  • $.post() 메서드
    데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용합니다.

    기본형

    $.post(URL, data, 콜백함수);
  • $.get() 메서드
    데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용합니다.

    기본형

    $.post(URL, 콜백함수);
  • $.getJSON() 메서드
    데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용합니다.

    기본형

    $.getJSON(URL, data, 콜백함수);
  • $.getScript() 메서드
    Ajax를 이용하여 외부 자바스크립트를 불러옵니다.

    기본형

    $.getScript(URL, success(response, status));
    • success(response, status) : 요청이 성공하면 실행하는 기능 지정,
    • response : 요청으로부터의 결과 데이터 포함
    • status : 요청의 상태
  • .ajaxStop(function(){ ... }) 메서드
    비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수가 실행됩니다.

    기본형

    $(document).ajaxStop(function(){ ... });
  • .ajaxSuccess(function(){ ... }) 메서드
    ajax 요청이 성공적으로 완료되면 함수가 실행됩니다.

    기본형

    $(document).ajaxSuccess(function(event, xhr, options){ ... });
    • event : 이벤트 객체
    • xhr : XMLHttpRequest 객체
    • options : Ajax 요청에서 사용하는 옵션
  • .ajaxComplete(function(){ ... }) 메서드
    ajax 통신이 완료되면 함수가 실행됩니다.

    기본형

    $(document).ajaxComplete(function(event, xhr, options){ ... });
  • $.ajax() 메서드
    데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, HTML, XML, Json, 텍스트 형태에 데이터를 요청할 수 있는 통합적인 메서드입니다. 즉, $.post(), $.get(), $getJSON() 메서드의 기능을 하나로 합쳐놓은 메서드입니다.

    기본형

    $.ajax({
        url : "전송 페이지",
        type : "전송 방식",
        data : "전송할 데이터",
        datatype : "요청한 데이터 형식" (html, xml, json, text, jsonp)
        success : function(data) {
             전송에 성공하면 실행될 코드;
        }
        error : function(){
             전송에 실패하면 실행될 코드
        }
    })

1-1 $.ajax() 메서드 옵션 종류

종류설명
async통신을 동기 또는 비동기 방식으로 설정하는 옵션으로 기본값은 비동기 통신인 true로 설정되어 있다
beforeSend요청하기 전에 함수를 실행하는 이벤트 핸들러입니다.
cache요청한 체이지를 인터넷에 캐시(저장)할지의 여부를 설정합니다. 기본값은 true
completeAjax가 완료되었을 때 함수를 실행하는 이벤트 핸들러입니다.
contentType서버로 전송할 데이터의 content-type을 설정합니다.
data서버로 전송할 데이터를 지정합니다.
dataType서버에서 받아올 데이터의 형식을 지정합니다. 생략하면 요청한 자료에 맞게 자동으로 형식 설정됩니다.
error통신에 문제가 발생했을 때 함수를 실행합니다.
successAjax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행합니다.
timeout통신시간을 제한합니다.
type데이터를 전송할 방식을 설정합니다.
url데이터를 전송할 페이지를 설정합니다. 기본값은 현재 페이지
usernameHTTP 액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정합니다.

1-2 ajax 전송 데이터 가공 메서드 동류

종류사용법설명
serialize()$("요소").serialize()사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을
'name1=value1 & name2=value2'와 같은 쿼리 스트링 형식의
테이터로 변환해 반환합니다.
serializeArray()$("요소").serializeArray()사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을
[{name1:value1},{name2:value2}]와 같은 배열 객체로 변환해 반환합니다.
$.param()$.param(Object){name1:value1,name2:value2}와 같이 작성된 객체를 가공해
'name1=value1 & name2=value2'와 같은 쿼리 스트링 형식의
데이터로 변환해 반환합니다.
JSON.parse()JSON.parse({"name":"value"})객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환합니다.
JSON.stringify()JSON.stringify({"name1":"value1", ... })객체를 문자열 데이터로 가공하여 반환합니다.

3. 기타 추가 설명들

  • 동기처리와 비동기처리

    동기 처리

    한 작업이 실행되는 동안 다른 작업은 먼춘 상태를 유지하고 자신의 차례를 기다리는 것입니다. 그리고 자바스크립트는 동기식 언어 입니다.

    비동기 처리

    어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식입니다.

  • 웹서버와 웹호스팅

    웹서버

    사용자가 직접 컴퓨터에 서버를 구축하여 웹 서비스를 제공하므로 웹 서버에 대한 전문 지식이 있어야하며, 전용 회선을 갖추고 있어야 사용 할수 있습니다.

    웹호스팅

    이미 서버가 구축된 외부 컴퓨터에 다수의 사용자가 소량의 저장 공간을 나눠 임대하여 사용하는 것을 말합니다. 장점으로 전문 지식이 없어도 사용할 수 있다는 편리성이 있고 단점으로 저장 공간의 용량 제한이 있습니다.

  • JSON

    JSON이란?

    자바스크립트의 객체 표기법을 JSON(JavaScript Object Notation)이라 부르고 데이터를 전달 할 때 사용하는 표준 형식 입니다.

    JSON 기본형

    var a = { 
               "속성1" : "값1",
               "속성2" : "값2",
                ...
            }
  • XML

    XML이란?

    확장성 마크업 언어(eXtensible Martup Language)로 특정 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 데이터를 배포할 목적으로 사용합니다.

    XML 기본형

    <?xml version="1.0" encoding="UTF-8">
    <tag1>
        <tag2>내용</tag2>
    </tag1>
profile
프로그래밍 언어 공부 정리

0개의 댓글