본문 바로가기

CLASS/AJAX18

AJAX 정리-2 (javascript,ECMA,jquery,axios / async~await) jquery 엔진 가져옴https://www.jsdelivr.com/package/npm/axios 여기서 axios 가져옴 - ajax.htmlJavascript - AJAX데이터값 : ECMA - AJAX데이터값 : Jquery - AJAX데이터값 : Axios - AJAX데이터값 : html은 동일axos 원래 npm으로 설치 👀 ①. javascript - ajax.js/* javascript ajax 통신 */function js_ajax(){ var datainfo = document.getElementById("test").value; var send_data = {name : "datainfo"}; var ajax = new XMLHttpRequest(); ajax.onread.. 2024. 9. 27.

AJAX 정리-1 👀 Front-end (송신 - 파일,배열,문자,숫자 => 수신)XMLhttprequest $.ajax(jquery) - $.get (ajax의 get), $.post(ajax의 post)fetch (ES, Vue, React)axios (Post,Get....) 👀 Back-end (Rest API 구축 , 수신 => 재송신) REST annotation @RestController - class에 사용하여 Controller 명시@Responsebody - jsp view에 전달되는 사항이 아니며 , data 자체를 송신 시 사용@PathVariable - url 경로에 대한 파라미터 값을 추출시 사용@CrossOrigin - CORS 문제 해결@RequestBody - JSON 데이터를 원하는 .. 2024. 9. 27.

#21-1 / front에서 JSON 전송 => Ajax , @ResponseBody ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐@ResponseBody값을 다시 되돌려 보낼땐 이걸 꼭 mapping 아래 작성 해야함!!!!!!! ❗ post : data를 front에서 보내고 다시 돌려받을게 없는 경우get : 주고 받아서 front에서 출력해야하는 경우엔 필히 get 사용 ❗ ajax 통신 - CORS방식 무조건 넣어줘야함! (CORS 무조건 핸들링해야함)@CrossOrigin(origins="*", allowedHeaders = "*") 👀 @GetMapping- jsp => join : JSON.stringfy 형태로 변화 - controller@CrossOrigin(origins="*", allowedHeaders = "*")@GetMapping("/ajaxok.do.. 2024. 7. 26.

#5-6 / ECMA - Ajax 데이터 로드 - ajax5.jsp - ajax5.js ( ajax5.jsp 와 연결 )export let data = { keycode : "a1234", //가상 변수 선언 - 인증키는 요런식으로 쓰면 댐 ajax : function(){ //console.log(this.keycode); //해당 가상변수이며, 출력시 this를 활용함- a1234 출력 //Get일 경우 별도의 method 사용하지 않아도 됨 fetch("http://172.30.1.5:8080/jq/rest_ajax5.do",{ method:"GET", cache:"no-cache", //mode:"no-cors", //이거 쓰면 안됨 - get은 무조건 backend가 처리! (위에 두줄도 안써도 되는듯) }) .. 2024. 7. 19.

#5-5 / Javascript- Ajax 데이터로드(database+인증키 사용) front에서 버튼 클릭 => database에서 select 로 받아온걸 배열에 담아서 ajax로 전송⚡ 보안키를 통한 외부 서버에서 data호출(from database)- ajax4.jsp 쿠폰명 할인율 사용기한 쿠폰이 없습니다 - @controller //javascript ajax MappingPreparedStatement ps = null;ResultSet rs = null;@CrossOrigin(origins="*", allowedHeaders = "*")@GetMapping("/jq/rest_ajax4.do")public String rest_ajax4(String keycode,HttpServletResponse res) throws Exception { res.se.. 2024. 7. 19.

#5-4 / Jquery Ajax & 외부 서버 통신(CORS) ⚡ CORSspring - @CrossOrigin(origins = "*", allowedHeaders = "*") 해당 annotaion 추가=> origins에 특정 ip 작성시 - 해당 ip에서만 대응하겠다 (* : 전체)=> allowedHeaders 에 "GET" 작성시 get일 경우만 대응하겠다 (* : 전체 , "application/json" 처럼 type을 작성하는 경우도 있음)res.addHeader("Access-Control-Allow-Origin","*"); res.addHeader("Access-Control-Allow-Credintials","true");=> class내에 요걸로 작성으로 대체 가능 (retrun에 경로 넣어줘야함)json으로 받는다면@GetMappi.. 2024. 7. 19.

#5-3 / Jquery Ajax & API 서버통신 (XML 로드) ⚡ XML 로드xml파일 강제루 미리 제작해둠- data.xml 홍길동 hong hong@nate.com 25 이순신 lee sunsin@daum.net 33 - ajax2.jsp 2024. 7. 19.

#5-2 / Jquery Ajax & API 서버통신 (URL JSON 로드) ⚡ URL JSON 로드$("#btn3").click(function(){ $.ajax({ url : "./rest_json2.do", cache : false, type : "GET", dataType : "JSON", success : function($data){ console.log($data); }, error : function($data){ console.log($data); } });}) //produces : 해당 mapping에 속성을 변환 시키는 데이터 타입 (기본은 html)@GetMapping(value="/jq/rest_json2... 2024. 7. 19.

#5-1 / Jquery Ajax & API 서버통신 (JSON) / JSONArray,JSONObject 사용 ecma랑 jquery 는 사실 매칭이 잘 안됨.. 버그 생김ㅋ ❓ API 서버REST ( get,post )xml,json 로드받는 역할아키텍처 구조RESTful ( get,post,put,delete ) - url 파라미터로 세팅CDN ( get,post ) - Image,VideoSOAP ( xml만 사용 )나중에 공부해보길 추천ㅋ , REST보다 어려움REST와 특성이 비슷함금융권에서 많이 사용 - 보안 좋아서프로토콜 구조(서버와 서버간의 DATA 교환)❓ 아키텍처 , 프로토콜아키텍처 : 데이터의 구조 형태프로토콜 : 서버와 서버간의 통신1. html로 받아서 json으로 변경하는 방식2. 처음부터 json파일로 받는 형식⚡ REST (JSON 이니까) - (dataType : "HTML" 로 받.. 2024. 7. 19.

#4-3 / Ecma + 배열로 Ajax(fetch)로 전송 혼돈.. 방법이 굉장히 상당히 많다/... ⚡ ModelATtribute(dao) or RequestParam 으로 받을 경우 - ecma_11.jsp@PostMapping("/ecma/ecma11ok.do")public String ecmall( @RequestParam String mid, HttpServletResponse res, HttpServletRequest req ) throws Exception {//public String ecmall(@ModelAttribute data_dao dao,HttpServletResponse res, HttpServletRequest req) throws Exception{//publ.. 2024. 7. 17.

#4-2 / ECMA + Ajax (POST통신) post통신은 method을 post로 적용 및 headers에 application~으로 작성(배열이 아닐 경우 ?를 이용하여 GET과 비슷한 형태로 전송)가상의 변수를 이용하여 Backend가 받는 파라미터 이름을 이용하여 body 속성에 값을 적용하여 보내는 방식도 있음단,배열값 전송시에 body : {} 필수임 ⚡ 아이디 중복확인- ecma_9.jsp 아이디 : - ecma_9.jsexport class logins { ajax_idck(id){ this.mid = id; fetch("./ecma9ok.do",{ method : "POST", headers : {"content-type":"application/x-www-form-urlencoded"}, body : thi.. 2024. 7. 17.

#4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인 ⚡ 아이디 중복확인- @Controller//ecma Ajax (GET통신)@GetMapping("/ecma/ecma8ok.do")public String ecma8ok(@RequestParam String mid, HttpServletResponse res) throws Exception{ this.pw = res.getWriter(); if(mid==null) { this.pw.print("error"); }else { Connection con = dbInfo.getConnection(); String sql = "select count(*) as ctn from login where mid=?"; PreparedStatement p.. 2024. 7. 17.

#3-1 / ajax + .do ajax data 통신do 통신을 할 경우 - 결과에 대해서만 write (배열,문자열,결과값)⚡ ajax .do 파일 data 전송- ajax1.jsp 데이터1 데이터2 데이터3데이터 출력- ajax2.do(servlet)public class ajax2 extends HttpServlet { private static final long serialVersionUID = 1L; //get두 되구 post두 되구 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doPost(HttpServletRequest re.. 2024. 7. 2.

#2-1 / id 중복체크 연습용(ajax) - POST Ajax Get : json 파일을 로드하기 위해but 중복체크는 값을 보내야 하므로 ( Ajax jsp -> do 로 ) => Post 통신 사용( 보내고 받는게 없으면 .do파일은 error뜨는게 맞음 ! )⚡ ajax POST 통신 연습용 : 문자열을 return 시켜서 사용함- jsp아이디 : - jq (js는 하단에 있음)$(function(){ $("#btn").click(function(){ $.ajax({ url : "./jsp1ok.do", cache : false, type : "post", //pot 전송(data type,data,contentType 필요) //json 배열을 리턴받을 경우 : do 파일이라도 json type으로 받아야함 //(걍 문자열만.. 2024. 6. 24.

#1-4 / js, jquery - 외부 data load (CORS 해결) ❌❌ CORS 에러 ❌ ❌ : 도메인(ip)이 서로 다를경우 Access 오류로 인하여 데이터를 로드하지 못하는 상황 localhost일때는 문제발생X해결 : 1. json에서 ajax로 바로 로드가 안됨(CORS) , JSON -> JSP로 변환 후 외부로 송출2. script 통신(script 파일로 CORS JSON로드방식) - ajax안쓰고 jsp파일에 fileReader로 outprint 해주기=> 둘다 backend(상대방)에서 작업해줘야함 ⚡ 1. JSON -> JSP로 변환 후 외부로 송출 json파일을 바로 핸들링하기 어려우므로 jsp파일을 load후 핸들링- 내가 로드할 html파일 - 상대방(backend) 에서 만든 jsp파일trimDirectiveWhitespaces="true".. 2024. 6. 20.

#1-3 / 🌺 ajax(jquery) 🔽 이거갖구 놀거임=> product.json의 대표key : flat_product => 나중에 mysql의 table명이 대표key가 됨 , mysql의 colomn명이 일반 key가 됨 ⚡ ajax(jquery) 기본=> javascript에 반해 parse를 따로 작성하지 않아도 됨!🔽반복문(jquery - each문) 이용한 html 출력//통신이 끝난 후 얘가 실행되어야 함$.fn.htmls = function(){ //jquery each : 2개인자 , js foreach : 3개인자 $.each($data["flat_product"],function($a,$b){ //$a : index번호 / $b : 자기자신 $("#box").app.. 2024. 6. 20.

#1-2 / ajax + json(key가 있는 배열) => 5초에 한번씩 실행 json의 [ ] 안에 { } 로 들어갈 시 key배열 ! => 백엔드가 가장 많이 만드는 형태key배열은 { }에 넣을것!! 나중에 mysql의 coloumn명이 key가 됩니다대표키는 table명[ {"seq": 1,"product":"모니터","price":195000}, {"seq": 3,"product":"냉장고","price":295000}, {"seq": 4,"product":"에어컨","price":395000}, {"seq": 9,"product":"세탁기","price":495000}] 👀 변수 형태의 function => 변수 형태의 function이 먼저 읽힘//일반 functionfunction aaa(){ alert("function")}//변수 형.. 2024. 6. 20.

#1-1 / 🌺 ajax(javascript) 기본 구조 1. javascript ajax2. jquery ajax3. es ajax4. react ajax=> 다 다름 => 다알아야함 ⚡ json 구조원래는 database + java 로 만들어야함 배열 => [ ] (key 없는 배열) or { } (key배열일경우)json파일 내 주석사용 Xdatafile 종류 : xml,json(api서버가 없을 때) / jsp,do (api서버가 있을 때 )[ ["hong","kim","park"], ["22","32","42"]] ⚡ ajax 기본 구조 : ajax는 비동기 통신전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.즉.. 2024. 6. 20.

이전 1 다음

티스토리툴바