$.ajax({ /*{} 객체를 의미함 key: value값을 ,로 구분하여 객체의 속성이 만들어짐 */
			url : '/client/start.kh', /* url파일로 접근, 컨트롤러에서 대기중인 url주소 */
			dataType : 'json', /* 검사/net/응답을 보면{'result',true:,'msg':'보낸 메세지...input의 text임'}) 받은걸 자바스크립트가 알아서 변환해준다. */
			type : 'POST', /* 폼에서 메소드형식을 생각하면됨 */
			data : msg, /* 서버로 부터 받은 msg의 val를 메세지변수에 넣음 */
			success : function(result) { /* 이벤트 핸들러 result에 서버가 보낸준 값이 리턴됨. */
				console.log('채팅전송성공:' + result);				
				printer = setInterval(collList, 500);
			},
			error : function(e) {
				alert('error:' + e);
			},
		});

 처음 채팅프로그램 한다고 하고 공부하면서 하나하나 기록한것이다.

ajax이 너무 어려워서 이게 뭔소리가 하며 이것저것 찾아가 보며 한것이다....

그중 기본 양식 쓰는 설명은 역시나 생활코딩이 짱이다!!!!!!!!

여기서 주의점......입력한 대화 내용을 어떻게 불러오나 고민하다가

setInterval로 하면 설정시간 만큼 반복해서 출력한다고 해서...써봤다....

//종료 버튼 누를경우
	function chatfinish() {
		var titleNo= ${param.titleNo};
		if (confirm("정말로 종료하시겠습니까?")) {			
			var csResult=prompt('상담결과를 입력하세요.');		
			$.ajax({
				url : "/consult/finish.kh",
				type : "post",		
				dataType:"json",
				data : {
				 titleNo : titleNo,
				 csResult:csResult				
				},
				success : function(data) {				
						//data = JSON.stringify(data);  //종료시 object에러가 나서 첨부
						if(data.result>0){
							clearInterval(printer);							
							self.close();
							
						}else {							
							alert("종료 되지 않았습니다. 다시 해주세요");		
						
						};
				},					
				error: function(e) {
					alert('error : ' + e.statusText);
				}
			});	
		};

그걸 종료 하는 구문이다........

script 들어오자 마자 var printer=' '; 를 선언하고

반복시킨다음 종료 버튼 누르면 clearInterval()로 종료하는건데.....

이넘이 종료는 되긴하는데 계속 에러가 발생하는 것이다.

object object에러....뭔지도 모르겠는데 계속 난다...찾아지지도 않는다.

DB는 저장되고 종료도 되는데 왜그런거야!!!!!!!!!

 

알고 봤더니 Setinterval로 각각의 출력문이 있는것이였다. 전체 데이터를 가져오는데다가

계속 printer에 덮여지는게 아니고 참조변수니깐 계속 연결되어 쌓이고 있던것이다.

그런데 clearinterval로 일하고 Serinterval은 무시하고 막 지혼자 나간다고 한것이였던 것이다....

일하던 녀석들이 어이가 없어서 욕을 하 는 것 이 였 다 !!!!!!!!!!미안혀라....

이럴경우. 

clearInterval(printer);
setTimeout(function() {
self.close();
}, 50)

종료도 하고.....

if(!printer){
printer = setInterval(collList, 500);
}

앞서서 조건을 달면 될것 같다........

모르면 무식하게 쓴다!!!!!! 공부하자!! 조심하자!!!

 

 

 .append("<button><a href='javascript:void(0);' onclick='removeReplyAjax("+rList[i].replyNo+")'>삭제</a></button>");

링크 안걸리게 하는 거 한가지 더.....javascript:void(0),

append드로 할때 전달받은 값 넣기 역시 ++임...onclick='removeReplyAjax("+rList[i].replyNo+")'

 

//댓글 삭제
	function removeReplyAjax(replyNo){
		$.ajax({
			url:"/board/replyDelete.kh",
			data:{"replyNo":replyNo},
			type:"get",
			success:function(data){
				if(data=="success"){
					getReplyList();
				}else{
					alert("댓글 삭제 실패!");
				}				
			},
			error:function(){
				alert("error");
			}
		});
	}
//댓글 삭제- Ajax 버전!!
		@ResponseBody
		@RequestMapping(value="/board/replyDelete.kh", method=RequestMethod.GET)
		public String boardReplyDelete(
				@RequestParam("replyNo") Integer replyNo) {		
			int result=bService.deleteReply(replyNo);			
			if(result>0) {
				return "success";
			}else {		
				return "fail";
			}
		}

	<table align="center" width="500" border ="1">	
		<tr>
			<td>
				<textarea rows="3" cols="55"  name="replyContents" id="replyContents"></textarea>
			</td>
		 	<td>
		 		<button id="rSubmit">등록하기</button>
		 	</td>
<%-- 		<form action="/board/addReply.kh" method="post">	
			<input type="hidden" name="refBoardNo" value="${board.boardNo }">
			<input type="hidden" name="page" value="${page }">		 	
		</form> --%>
		</tr>
	</table>

원래는 form태그로 보냈는데 ajax으로 보낸다....

//댓글 등록
	$("#rSubmit").on("click",function(){
		var replyContents=$("#replyContents").val();
		var refBoardNo="${board.boardNo }";		
		$.ajax({
			url : "/board/replyAdd.kh",
			data:{
				"refBoardNo" :refBoardNo,
				"replyContents":replyContents,
			
			},
			type:"post",
			success:function(data){
				if(data=="success"){
					alert("댓글등록완료");
				}else{
					alert("댓글등록실패");
				};
			},
			error:function(){
				console.log("에러");
			}			
		});
	})

form에는 있던 page가 없다.

@ResponseBody
	@RequestMapping(value="/board/replyAdd.kh", method=RequestMethod.POST)
	public String boardReplyAdd(
			@ModelAttribute Reply reply) {
		reply.setReplyWriter("admin");
		int result=bService.registerReply(reply);
		if(result>0) {
			return "success";
		}else {
			return "fail";
		}
		
	}

 

Jackson과 Gson 모두 Java에 대한 JSON 데이터 바인딩 지원을 제공하는 완전한 라이브러리입니다.

 

Jackson은 Spring 프레임 워크에 내장되어있지만

Gson은 pom.xml에 따로 추가해 줘야 한다

직렬화, serializing, marshal : java 객체 -> json

역직렬화, deserializing, umarshal : json -> java 객체

	<dependency>
		<groupId>com.google.code.gson</groupId>
		<artifactId>gson</artifactId>
		<version>2.8.5</version>
	</dependency>

빈있어야 한다...

	@ResponseBody
	@RequestMapping(value="/ajax/ex6.kh", produces="application/json;charset=UTF-8", method=RequestMethod.GET)
	public String exerciseAjax6() {
		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		
		
		//JSONArray jsonArr= new JSONArray();
		/*  GSON을 쓰면 필요 없어진다.
		 * for(Member mOne : mList) { JSONObject jsonObj=new JSONObject();
		 * jsonObj.put("memberId", mOne.getMemberId());
		 * jsonObj.put("memberPwd",mOne.getMemberPwd()); jsonArr.add(jsonObj);
		 * 
		 * } retrun jsonArr.toString();
		 */
		
		Gson gson=new Gson();
		return gson.toJson(mList);
	}

 

/* 7번 GSON 이용한것  */
	$("#jq-btn7").on("click", function(){
		
		$.ajax({
			url:"/ajax/ex6.kh",
			type:"get",			
			success:function(data){
/* 				data.forEach((member,i)=> {				
				$("#p6").append('<p>'+member.memberId +member.memberPwd+'</p>');	
				});	 */	
				var htmlSTR='';
				for(var i=0;i<data.length;i++){
					htmlSTR+=data[i].memberId +","+ data[i].memberPwd+"<br>";
				}
					$("#p7").html(htmlSTR);
			},
			error:function(){
				console.log("처리실패");
			}
		})
	})
<h4>7. GSON을 이용한 List 변환</h4>
	<p>전체리스트 가져오기</p>
	<p id="p7"></p>
	<button id="jq-btn7">실행 및 결과확인</button>

 

'AJAX' 카테고리의 다른 글

ajax 3일차 : 댓글 삭제  (0) 2022.10.06
ajax 2일차 : 댓글달기  (0) 2022.10.05
AJAX 2일차 : 제이슨 배열출력방법  (0) 2022.10.05
ajax. json으로 데이터 전송  (1) 2022.10.04
ajax. jquary로 주고받기  (0) 2022.10.04

기본 방법은 밑에 있다...중요한것은 받은걸 화면 출력...나는 FOR문이 약하다..ㅠㅠ

<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>
/* 6번 */
	$("#jq-btn6").on("click", function(){
		var idNum=$("#find-num").val();
		$.ajax({
			url:"/ajax/ex5.kh",
			type:"get",
			data:{"idNum":idNum},
			success:function(data){
/* 				data.forEach((member,i)=> {				
				$("#p6").append('<p>'+member.memberId +member.memberPwd+'</p>');	
				});	 */	
				var htmlSTR='';
				for(var i=0;i<data.length;i++){
					htmlSTR+=data[i].memberId +","+ data[i].memberPwd+"<br>";
				}
					$("#p6").html(htmlSTR);
			},
			error:function(){
				console.log("처리실패");
			}
		})

화면 출력시 forEach문 돌리는 것도 주의 해야함!

@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(@RequestParam("idNum") String idNum){

		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray(); 
		Boolean check=false;
		for(Member mOne : mList) {	
			if(mOne.getMemberId().equals(idNum)) {
				JSONObject jsonObj=new JSONObject();
				jsonObj.put("memberId", mOne.getMemberId());
				jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
				jsonArr.add(jsonObj);
				check=true;
				break;
			}
		} 
		if(!(check)) {
				for(Member mTwo : mList) {	
					JSONObject jsonObj=new JSONObject();   
					jsonObj.put("memberId", mTwo.getMemberId());
					jsonObj.put("memberPwd",mTwo.getMemberPwd());	
					jsonArr.add(jsonObj);
				}				
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

 

여기서 중요한것은 값을 받아서 없으면 전체 출력 데이터인데 FOR안에 ELSE로 진행했더니 배열값이 5번 출력된다.

밖으로 뽑아서 진행해야 한다. CHECK값으로 부분을 출력한것!!

 

 

	<h4>6. 서버로 전송값을 보내고 JSONArray로 결과 받아서 처리</h4>
	<p>유저 번호를 보내서 해당 유저를 가져오고, 없는 경우 전체리스트 가져오기</p>
	유저 번호 입력 :
	<input type="text" id="find-num">
	<br>
	<p id="p6"></p>
	<button id="jq-btn6">실행 및 결과확인</button>
	@ResponseBody
	@RequestMapping(value = "/ajax/ex5.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax5(){
		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		JSONArray jsonArr= new JSONArray();        //======> [ ]  배열 생성
		for(Member mOne : mList) {			
			JSONObject jsonObj=new JSONObject();   //======>{ } 객체 생성 / 배열에 전달후 초기화
			jsonObj.put("memberId", mOne.getMemberId());
			jsonObj.put("memberPwd",mOne.getMemberPwd());	//======>{"memberId":"khuser01","memberPwd":"pass01"}
			jsonArr.add(jsonObj);                  //======>[{},{"memberId":"khuser01","memberPwd":"pass01"}.{},...]
		}
		
		//return jsonArr.toJSONString();
		return jsonArr.toString();

	}

 

기본 배열 출력

 

 

'AJAX' 카테고리의 다른 글

ajax 2일차 : 댓글달기  (0) 2022.10.05
ajax : GSON 엄청간단하게 보이나 이해안됨.^^  (0) 2022.10.05
ajax. json으로 데이터 전송  (1) 2022.10.04
ajax. jquary로 주고받기  (0) 2022.10.04
ajax 개요  (0) 2022.10.04
	<h1>JSON 개요</h1>
	<p>
		Ajax 서버 통신시 데이터 전송을 위한 포맷 <br> JSON(Javscript Object Notation) :
		자바스크립트 객체 표기법 <br> JSON을 사용하면 모든 데이터형을 서버와 주고 받을 수 있다.(사용목적) <br>
		숫자, 문자열, boolean, 배열, 객체, null <br> '{'으로 시작하여 '}'로 끝나며 그 속에 데이터를
		표기하고 'key : value(값)' 쌍으로 구성된다.
		
	<pre>
		{
			"name" : "이순신",
			"age" : 27,
			"birth" : "1990-01-01",
			"gender" : "남",
			"marry" : true,
			"address" : "서울특별시 중구 인사동",
			"family" : {  
						"father" : "아버지",
						"mother" : "어머니",
						"brother" : "동생"
					}
		}
	</pre>
	</p>
<!-- GSON : List 데이터를 JSON 데이터로 변환해주는 라이브러리 -->
	<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
	<dependency>
		<groupId>com.google.code.gson</groupId>
		<artifactId>gson</artifactId>
		<version>2.8.5</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
	<dependency>
		<groupId>com.googlecode.json-simple</groupId>
		<artifactId>json-simple</artifactId>
		<version>1.1.1</version>
	</dependency>​

제이슨을 할때 저장시켜야할 것/pom.xml에다 붙여 넣기

2가지로 다른 것이다.  저장 시킨다음 alt +f5로 적용시킬 프로젝트 연결

아니면 프로젝트 우클릭 ->Maven->update project  해주면 된다...

 

<h4>5. 서버로 전송값 보내고 결과 JSON으로 받아서 처리</h4>
	유저 번호 입력 :
	<input type="text" id="user-num">
	<br>
	<p id="p5"></p>
	<button id="jq-btn5">실행 및 결과확인</button>
	$("#jq-btn5").on("click", function(){
		var userId=$("#user-num").val();
		$.ajax({
			url:"/ajax/ex4.kh",
			type:"get",
			data:{"userId" : userId},
			dataType: "json",
			success:function(result){
				console.log(result);
				$("#p5").html(result.memberPwd);
			},
			error:function(){
				console.log("처리실패");
			}
		})
	})
@ResponseBody
	@RequestMapping(value = "/ajax/ex4.kh",produces="application/json;charset=UTF-8", method = RequestMethod.GET)
	public String exerciseAjax4(
			@RequestParam("userId") String userId){
		JSONObject jsonObj=new JSONObject();  //json 객체생성 ->{}생성완료
		//{"userNo": 1, "userName":"일용자", "userAddr":"서울시 중구"}

		ArrayList<Member> mList=new ArrayList<Member>();
		mList.add(new Member("khuser01", "pass01"));
		mList.add(new Member("khuser02", "pass02"));
		mList.add(new Member("khuser03", "pass03"));
		mList.add(new Member("khuser04", "pass04"));
		mList.add(new Member("khuser05", "pass05"));
		Member member=null;
		for(int i=0;i< mList.size();i++) {
		Member mOne = mList.get(i);		
			if(mOne.getMemberId().equals(userId)) {
				member=mList.get(i);
			}
		}
			jsonObj.put("memberId", member.getMemberId());
			jsonObj.put("memberPwd",member.getMemberPwd());			
		
		return jsonObj.toJSONString();
   }

Member 클래스에 생성자 기본값이 있어야한다.

		//로그인 할때 id와 pwd만 쓰기위해서 한개더 만듬...
	public Member(String memberId, String memberPwd) {
		super();
		this.memberId = memberId;
		this.memberPwd = memberPwd;
	}

요렇게...^^

 

for문으로 맞는지 확인하는데 문자열이니깐 == 보다는 equals가 맞다......

추가 하자////for문의 다른 표현식

결과는 같음.

'AJAX' 카테고리의 다른 글

ajax : GSON 엄청간단하게 보이나 이해안됨.^^  (0) 2022.10.05
AJAX 2일차 : 제이슨 배열출력방법  (0) 2022.10.05
ajax. jquary로 주고받기  (0) 2022.10.04
ajax 개요  (0) 2022.10.04
ajax...기초...생활코딩에서..  (0) 2022.09.16

데이터 전송

	@ResponseBody
	@RequestMapping(value = "/ajax/ex1.kh", method = RequestMethod.GET)
	public void exerciseAjax1(@RequestParam("msg") String msg) {
		System.out.println("전송 받은 데이터 : " + msg);

	}
	<h3>Ajax 구현(jQuery)</h3>
	<h4>2. ajax(jQuery)로 서버에 전송값 보내기</h4>
	<p>버튼 클릭시 전송값을 서버에서 출력</p>
	<input type="text" id="msg-2">
	<button onclick="jqueryFunc();">보내기(jQuery)</button>
		function jqueryFunc(){
			var message=  $("#msg-2").val();
			$.ajax({
				url:'/ajax/ex1.kh',
				type : 'get',
				data : {'msg' :message},
				
				success : function(){
					console.log('서버 전송 성공');
				},
				error : function(e){
					console.log('서버 전송 실패 :' +e.toString);
				}
			});
		
		}

@ResponseBody가 들어가야한다...

데이터 수신

<h3>3. 버튼 클릭시 서버에서 보낸 값 수신</h3>
	<button id="jq-btn3">서버에서 보낸값 확인</button>
	<p id="confirm-area"></p>
$("#jq-btn3").on("click",function(){
			$.ajax({
				url:"/ajax/ex2.kh",
				type:"get",
				success: function(result){
					$("#confirm-area").html(result);
				},
				error:function(){
					console.log("처리실패");
				}
			});
		})
@ResponseBody
	@RequestMapping(value = "/ajax/ex2.kh", produces="application/text;charset=UTF-8", method = RequestMethod.GET)
	// 인코딩 에러시에  produces="text/plaint;charset=UTF-8"로 기재해도 된다.
	public String exerciseAjax2(){
		//response.setCharacterEncoding("utf-8");
		return "서버에서 왔습니다.";

	}

 

인코딩 3가지...

1.  본문에..response.setCharacterEncoding("utf-8");

2.  produces="text/plaint;charset=UTF-8"로 기재해도 된다. 샘이 알려주신거

3.  produces="application/text;charset=UTF-8" 검색해서 알아낸것......json타입의 데이터 전송이면 text를 json으로 변경해야 할듯

 

데이터 전송 수신 같이하기.

<h4>4. 서버로 전송값 보내고 결과 문자열 받아서 처리</h4>
	<p>숫자 2개를 전송하고 더한 값 받기</p>
	첫번째 수 :
	<input type="text" id="num-1">
	<br> 두번째 수 :
	<input type="text" id="num-2">
	<br>
	<button id="jq-btn4">전송 및 결과확인</button>
	<p id="p4"></p>
$("#jq-btn4").on("click",function(){
			var num1=$("#num-1").val();
			var num2=$("#num-2").val();
			$.ajax({
				url:'/ajax/ex3.kh',
				typel:'get',
				data:{
					"num1":num1,
					"num2":num2
				},				
				success:function(sum){
					$("#p4").html("연산결과 : "+sum);
					
				},
				error : function(){
					console.log("처리실패");
				}
					
			});
		});
	@ResponseBody
	@RequestMapping(value = "/ajax/ex3.kh", method = RequestMethod.GET)
	public String exerciseAjax3(
			@RequestParam("num1") Integer num1
			,@RequestParam("num2") Integer num2
		){
		
		Integer sum=num1+num2;
		return String.valueOf(sum); 

	}

'AJAX' 카테고리의 다른 글

ajax : GSON 엄청간단하게 보이나 이해안됨.^^  (0) 2022.10.05
AJAX 2일차 : 제이슨 배열출력방법  (0) 2022.10.05
ajax. json으로 데이터 전송  (1) 2022.10.04
ajax 개요  (0) 2022.10.04
ajax...기초...생활코딩에서..  (0) 2022.09.16
	<h1>Ajax 개요</h1>
	<p>
		Ajax는 Asynchronous Javascript And XML이란 용어로<br> 서버로부터 데이터를 가져와 전체
		페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법<br> 비동기식 요청을 함.
	</p>
	<h3>동기식/비동기식이란?</h3>
	<p>
		동기식은 서버와 클라이언트가 동시에 통신하여 프로세스를 수행 및 종료까지 같이하는 방식<br> 이에 반해 비동기식은
		페이지 리로딩없이 서버요청 사이사이 추가적인 요청과 처리 가능
	</p>

핵심임...^^

 

이제 연습해보자....

script 방법임.

<input type="text" id="msg-1">
	<button onclick="jsFunc();">보내기(JS)</button>
	<script >
		function jsFunc(){
			//1. XMLHttpRequest객체 생성
			var xhttp = new XMLHttpRequest();
			var msg=document.querySelector("#msg-1").value;
			//2. 요청정보 설정
			xhttp.open("GET","/ajax/ex1.kh?msg="+msg,true);
			//3. 데이터 처리에 따른 동작 함수 설정
			xhttp.onreadystatechange = function(){
				if(this.readyState=4 && this.status==200){
					//status -> 200(요청성공), 404(페이지,url없음), 500(서버오류발생),403(접근거부),400(쿼리스트링 갯수오류)
					console.log("서버 전송 성공");
				}else if(this.readyState==4 && this.status ==400){
					console.log("서버 전송 실패");
				}
			}
			//4.전송
			xhttp.send();
			
		}
	</script>
	@ResponseBody
	@RequestMapping(value="/ajax/ex1.kh", method=RequestMethod.GET)
	public void exerciseAjax1(
			@RequestParam("msg") String msg) {
		System.out.println("전송 받은 데이터 : " + msg);
		
	}

http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest 

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

참고하면 훨씬 도움됨.^^

 

비동기 방식의 ajax를 생활코딩 강의로 배워봤다.

앞서 말한다면 왜 다들 생활코딩 이야기 하는지 알것같다.... 완전 무뇌한이고 어려워서 들어도 모르겠더니....쉽고 잘 설명해주신 덕분에 조금 나아진것 같다..

 

 fetch('css').then(function(response){
      response.text().then(function(text){
        alert(' css');

       });

    });

 

css파일의 내용을 화면에 띄어준다.

 

<!--fetch('css') css를 바꾸면 경고창의 내용이 바뀐다. 
 text에 서버가 응답한 결과가 들어가 있다. 결국은 실제 받은 값이다.
 화면에 내용을 바꾸고 싶다면 input을 article로 감싸고. 
 alert(text)을 document.querySelector('article').innerHtml=text; 화면출력함.
 css이후  then이하는 한절인데 일끝나면 내가 시킨 일을 해줘...함수를 처리해줘... callback함수를 기재해서 일을 시키는 것임.
 //이런걸 Asynchronous라고 함.//// 

 

fetch('html').then(callbackme);
 console.log(1);
 console.log(2);이러면 html파일 화면 출력하고 1, 2, 콘솔출력하고 그다음 callbackme함수를 처리한다.

이런걸 비동기!! 방식 순차적으로 끝날때 까지 기다리지 않고 먼저 되는것 먼저하기.....^^
 
 fetch('html').then(callbackme);
 function callbackme(){}함수나
 callbackme = function{} 나 같은 것이다.그래서 이름 없이 쓴다고 쓰는 익명함수!!!
 fetch('html'), then(function(){}) 이렇게 쓸수 있다.


 function(response)){의 response는  response라는 객체가 오고 그중 status:값을 주는데 정상이면 200, 

404를 주면 not found 찾을수가 없다는 값이다.
 확인원하면 response.status라고 alert안에 기재하면 값이 나온다.  
 fetch('css').then(function(response)){
 if(response.status=='404'){
 alert('Not found')
 }
 }); 

이런 방식도 있다.
 
 ///////////////////////////////////

 반복되는 경우 당연히 스크립트로 함수 재활용 하면 된다.
 function fecthPage(name){
   fetch('name').then(function(response){
   response.text().then(function(text){
   document.querySelectior('article').innerHTML = text;   
   })
  });
  }
  name변수 값을 전달받은 fecthPage메서드를 호출하면

name파일로 값요청을 하고 서버로 부터 response 응답하면 text:값을 받아 article 태그안에 text값을 넣어주는 것이다.

///////////////////////////////////////////////////////
  북마크.....
  내가 원하는  p태그에 id값을 준다. ex: id=three
  그럼 주소창 localhost:8000/hash.html#three라고 하면 스크롤이 id가 있는 곳으로 이동을 한다.
  
  또는  a 태그 에 href="#three" 라고 하고 화면에 a태그 글자를 입력하며 마찬가지로 스크롤이 이동한다.
  시작하는 페이지를 우리가 선택할수 있다.
  <script>
   if(window.location.hash){
   console.log(location.hash);
   // 이러면 해시값 #three가 출력된다...
   //#값을 없애고 싶으면 location.hash.substr(1)); 로 기재하면 된다.(window 은 생략가능함)
   }
   }
   a  태그를 클릭하면 주소창에는 
  </script>
   localhost:8000/hash.html#three 이렇게 나옴..
  
   <a href="#!javascript" onclick="fetchPage('javascript')">HTML</a> // #해쉬기호라 !뱅을 관습처럼 붙여서 해쉬뱅이라고 하기도 함
   a 태그를 클릭하면
   주소창은 
   localhost:8000/hash.html#javascript 라고 나옴
   
   if(location.hash){ //해시태그가 있다면
    fetchPage(location.hash.substr(2)); // 2번째를 자르고
    }else{ //없으면
    fetchPage('welcome'); // welcome파일로 가라
    }
    그런데 이것은 새로고침이 아니라서 데이터 검색에서는 좋치 않아 좀더 보완한 pjax를 한다.
    ////////////////////////////////////////////////
    홈페이지를 고치는 것보다 뒷배경의 파일의 정보만 추가하면되는 ...화면에 내용이 바꿀때....
    해더부분 추가할때 처럼 말이다.

 예를 들어보자.!!!!!
    실제 html이나 jsp에는 <ol id="nav"></ol> 밖에는 없었다.
   
   fetch('list').then(function(response){      // 리스트의 파일의            
   response.text().then(function(text){              //text값을 받아온다.
   //<li> <a href="#!javascript" onclick="fetchPage('javascript')">HTML</a></li> 
   //이렇게 너무 많아서 중복된게 너무 많다.....그래서 list파일에 html,css,jsvascript만 남기고 모두 삭제한다면
   var items= text.split(',')                                       //,를 기준으로 값을 배열화 시킨다.   
   var i=0;                                                                  //for문의 변수
   var tags='';                                                            //태그를 담을 그릇
 
 
   while( i< items.length){                                         //배열이니깐 for문 돌린다.
    var item=items[i];                                                //각각의 배열값을 담을 변수
    item=item.trim();                                                //변수에 혹시 빈칸같은것이 있다면 삭제해라.
    i=i+1;
    var tag='<li> <a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
    tags += tag;
   }
   //document.querySelectior('#nav').innerHTML = text;  // id nav라는 태크안에 넣어라.란 뜻이다.
   document.querySelectior('#nav').innerHTML =tags;    //링크까지 붇은 구문이 출력된다.
   })
  });
/////////////////////////////////////////////////////////////////////////////////////////////  
   polyfill 

  == 신기능을 브라우저가 예전버전에서 지원하지 않기 때문에 대신 지원해주는 기능이다.
   fetch기능도 18년도 촬영기준으로 IF11버전은 미지원했다...
   그래서 fetch.js라는 파일을 다운로드하여 저장함 그럼 크롬 말고 IF도 가능해서 호환성 확보 한것이다.
  -->

'AJAX' 카테고리의 다른 글

ajax : GSON 엄청간단하게 보이나 이해안됨.^^  (0) 2022.10.05
AJAX 2일차 : 제이슨 배열출력방법  (0) 2022.10.05
ajax. json으로 데이터 전송  (1) 2022.10.04
ajax. jquary로 주고받기  (0) 2022.10.04
ajax 개요  (0) 2022.10.04

+ Recent posts