Ajax

웹페이지를 다시 리로딩하지 않아도 된다

특정 영역의 데이터만 수정가능! --> js

innerHTML , dom API를 이요해서 데이터 변경가능

xmlHttpRequest 엔진이 있다 -> 사용하기 힘들고 복잡

이걸 쉽게 변환 한게 fetch라는 ajax이다. --> 위의 엔진을 사용

jquery 방식은 겁나 어렵

axios node.jsㄴ에서사용

fetch - > 자바 스크립트 6부터 내장 라이브러리로 있고 가볍고 빠름

IE11에서는 지원하지 않는다.

 

타이머 설정해서 프로그래머가 제한 걸수 있다

전송 방식 설정해줘야함

fetch(전달할 주소, 전달할 데이터)

.then(위에께 성공하면 받아옴(텍스트면 text(), json))

.then(위에께 성공하면 변수명=> 실행문해서 넘겨받은 데이터 접근 가능

 

응답은 then으로 받고 또는 await라고 있는데 그거는 동기화과정이 필요하다

 

then(실행문)

응답 데이터를 읽을때는 text 또는 json으로 읽는다.

response. text() response.json() response.blob()(이미지데이터)

 

 

fetch 로 crud 만들기

http method 종류(Rest API라고 한다.)

post, get 

put 데이터 수성

delete 데이터 삭제

 

하나의 url을 통해서 4가지 기능을 동작 시킬수 있다.

 

 

아이디 중복을 화면을 바꾸지 않고 실행하기

 

 

 

const dupIdCheck = document. querySelector("#dupIdCheck");
dupIdCheck.addEventListener(()=>{
e.preventDe

fetch(동작할 서블릿명)

headers : 서블릿에 전송할때 json으로 
body에 태워보냄

 

 

f12 network -> payload 가면 post : body get:

 

payload : formdata - > 소켓열어서 주고받는 데이터에 처음에 이 데이터가 열림

소켓을 request에서 불러들일수 ㅣㅇㅆ다

소켓 입력 : request.getInputStream(); InputStream return함

bufferedInputStream으로 읽ㅇ르 수있음 우에를

 

1byte씩 읽음

 

한번에 읽을 수있음 : int available = in available() 전체 사용가능한 양

이양을 한방에 읽기 위해 변수 선언

String str - new String(data,"utf-8")

 

이 데이터는 json이다.

키값 쌍으로 구성중

JSON.jar를 추가해주고

JSONObject를 사용한다.

 

서버에서 수행된 jsn 데이터

JSONObject jsonObject = new JSONObject(str);

r결과 데이터

JSONObject jsonResult = new JSONObject(str);

josn으로받아온거랑같은지 확인

if("aaa".equals())

true

false 리턴

 

 

스트림으로 날아가야하기 때문에 

버퍼 초기화하기

response.reset() 기존에 출력되던거 없애기

response.setContentType("json으로 받아온 값의 MIME값을 작성해준다.")

servletOutputStream out = response.getOutputStream();함수로 전달해준다.

out.println("보낼 데이터 "+jsonResult.toString())

출력버퍼를 지울때는 out.flush()로 다 클라이언트로 보냄

200이 응답성공 http 프로토콜의 

200이어야 읽을 수있다 response.json()으로 읽는다 이때 비동기로 읽는다.

읽은 데이터를 니가 알아서 해!! 가 다음 then이다.

 

network를 확인하면 보낸 데이터를 확인할수잇다.

request.getContentLength() -> 전체내용의 길이 json에대한

 

response 에 가면 읽어들인데이터 나옴ㅁ

setContentType에 charset=utf=8로 줄수 있다. -> 이거로 캐릭터셋을 설정할수있다.

 

 

ISO 8859-1로 내부적으로 바꿔줘야하는 오류발생 --> 영어로 전송하면 오류안남 메세지를

 

다음 then에서 처리함

중복된 아이디 입니다. 를 띄울 수있도록함

 

alert 창을 띄워줘야하는 html에서의 script 내용이다.

<script type="text/javascript">
//중복확인 버튼을가져온다.
const dupIdCheck = document.querySelector("#dupIdCheck");
//input태그에 넣었던 id값을 가져온다.
const id = document.querySelector("#id");
//중복확인 버튼을 누르면 
dupIdCheck.addEventListener("click", (e) => {
    //이벤트를 막고 "페이지 변환"을 막음
    e.preventDefault();//안해도 상관 없음
    //fetch를 통해서 post방식으로 전달해줌
    fetch("dupIdCheck", {//servlet 이름
          method: "POST", // POST
          headers: { // 헤더 조작
            "Content-Type": "application/json",//json형식으로 전달한다고 말함
          },
          body: JSON.stringify({ // 자바스크립트 객체를 json화 한다.
            id: id.value
          }),
    }) //posts의 id 1인 엘리먼트를 가져옴 
    .then((response) => response.json())//servlet에서 넘겨준 json 값을 받아온다.
    //json을 이제 원하는 값으로 정제하는 과정이다.
    .then((data) => {
            //json에서 키 result를 가져와서 true로 중복된 아이디로 판명되면
            if (data.result) {
                //alert 창을 띄운다.
                alert("중복된 아이디 입니다");
            }
        }
    );
});
    	
</script>

 

servlet에서 비동기 처리를 해주기 위해 작성해줘야하는 코드이다.

 

protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //request 객체에서 http InputStream을 가져옴 
    BufferedInputStream in = new BufferedInputStream(request.getInputStream());
    //request 객체에서 내용의 길이를 가져온다.
    int available = request.getContentLength();

    System.out.println("str -> [" + available + "]");
    //내용의 길이만큼 byte 배열을 만들어준다
    byte [] data = new byte[available];

    //InputStream에서 내용의 길이만큼 data를 가져온다
    in.read(data);
    //data를 byte로 받아온걸 String의 utf-8로 받아온다.
    String str = new String(data, "utf-8");
    System.out.println("str -> [" + str + "]");

    //받아온 데이터를 json 형식으로 변환한다.
    JSONObject jsonObject = new JSONObject(str);
    System.out.println("jsonObject.id = " + jsonObject.getString("id"));

    //이제 OutputStream에 전달해줄 json 객체를 생성해준다.
    JSONObject jsonResult = new JSONObject();


    //만약에 받아온 json의 id값이 aaa와 동일하다면 
    if ("aaa".equals(jsonObject.getString("id"))) {
        //result키에 true를 등록해주고
        jsonResult.put("result", true);
        //message키에 "exist id"메세지를 등록해준다.
        jsonResult.put("message", "exist id");
    } else {//일치하지 않으면 
        //result에 false를 등록해준다.
        jsonResult.put("result", false);
        //message키에 "not exist id"를 등록해준다.
        jsonResult.put("message", "not exist id");
    }

    //출력해서 나가던 HttpOutputStream을 초기화해준다. 텅비워줌
    response.reset();
    //출력해서 나가는 캐릭터 셋을 utf-8로 설정해준다.
    response.setContentType("Content-Type: application/json; charset=utf-8");
    //response객체로부터 받아온 OutputStream을 ServletOutputStream 넣어준다. 이제 출력스트림 사용가능
    ServletOutputStream out = response.getOutputStream();
    //출력 스트림에 json을 문자열로 바꾸고 이 문자열의 byte의 문자셋을 8859_1 에서 utf-8로 바꿔준다.
    out.println(new String(jsonResult.toString().getBytes("utf-8"), "8859_1"));
    //받아주는 js의 then으로 넘겨준다.
    out.flush();
}