PLOD

[Javascript] jQuery와 Ajax 본문

개발 공부/Javascript

[Javascript] jQuery와 Ajax

훌룽이 2023. 11. 17. 10:15

jQuery

HTML 요소들을 조작하는 편리한 JavaScript 라이브러리이다. JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것이다 직겁 JS 코드를 작성하여 모든 기능을 구현할 수도 있짐나, 이 경우에 코드가 복잡하고, 개발 환경과 다른 브라우저에서 잘 작동을 안하는 등 브라우저 간 호환성을 직접 고려해야하느 등의 문제가 있기 때문에 전문 개발자가 작성한 라이브러리를 가져와서 사용하면 편하다. 

jQuery를 사용하기 위해서는 미리 작성된 JavaScript 코드를 임포트 해와야 하는데 부트스트랩 CSS 파일을 가져올 때와 마찬가지로 내 컴퓨터에 해당 파일을 저장해서 사용할 수도 있지만 온라인 상의 파일을 참조할 수 있다. 

HTML의 <head>...</head> 부분에 다음과 같은 코드를 import 하면 된다. 

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>

CSS와 마찬가리로 jQuery를 쓸 때 특정 요소를 가리켜야 조작할 수 있다. CSS에서는 선택자로 class를 주로 사용했는데, jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다. 

Ajax

Asynchronous JavaScript and XML에서 따온 말로, 비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법이다.

Ajax는 jQuery를 import한 페이지에서만 동작 가능하다. jQuery를 포함하지 않은 페이지에 Ajax를 사용하면 다음과 같은 에러가 뜬다. 

Uncaught TypeError: $.ajax is not a function

위에서 앞서 설명했던 jQuery 코드를 임포트한 페이지여야지 Ajax를 사용할 수 있다 .Ajax의 기본 골격은 다음과 같다. 

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

미세먼지 OpenAPI 데이터를 가지고 JQuery에 있는 원하는 데이터를 출력해보자.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

type : "GET" -> "GET" 방식으로 요청한다.

url : 요청할 url 주소를 입력한다. 

data : 요청하면서 함께 줄 데이터(GET 요청시엔 비운다)

리마인드 GET 요청은, url뒤에 아래와 같이 붙여서
데이터를 가져간다.
ex) http://naver.com?param=value&param2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져간다.
data: { param: 'value', param2: 'value2' },

 

'개발 공부 > Javascript' 카테고리의 다른 글

[Javascript] Javascript 기본 문법  (0) 2023.04.24
[Javascript] Web 기본 입출력  (0) 2023.04.24
'개발 공부/Javascript' Related Articles more
Comments