아약스를 만나보세요-JS 튜토리얼-php.cn

아약스를 만나보세요

coldplay.xixi

풀어 주다： 2020-09-19 09:09:01

앞으로

2075명이 탐색했습니다.

아약스를 만나보세요

추천 관련 기사: ajax 비디오 튜토리얼

1.1 ajax란 무엇입니까:

Ajax는 "비동기 JavaScript 및 XML"입니다 ,는 다음을 가리킨다. 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다. Ajax = 비동기식 JavaScript 및 XML(Standard Universal Markup Language의 하위 집합) Ajax는 웹 페이지를 사용하여 백그라운드에서 서버와 소량의 데이터를 교환함으로써 비동기 업데이트를 수행할 수 있습니다. 즉, 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있습니다(새로 고침 기술 없음) . Ajax를 사용하지 않는 기존 웹 페이지는 콘텐츠를 업데이트해야 하는 경우 전체 웹 페이지를 다시 로드해야 합니다.

1.2Ajax 애플리케이션 시나리오:

1.2.1 사용자 이름이 등록되었는지 확인:

많은 사이트의 등록 페이지에는 사용자 이름이 존재하는지 자동으로 감지하는 친숙한 프롬프트가 있습니다. 전체 페이지에서는 새로 고침이 없지만 여전히 서버와 비동기식으로 데이터를 교환하고 사용자가 입력한 사용자 이름이 데이터베이스에 존재하는지 쿼리할 수 있습니다.

1.2.2 시/군 단위 드롭다운 박스 연동:

많은 사이트에서 주소 입력을 완료하면 사용자의 시/도가 드롭다운 박스로 되어 있습니다. 다른 지방 선택 다른 도시 지역에 대한 선택이 있을 것이며 이는 지방과 도시의 가장 일반적인 연결 효과입니다.

1.2.3 콘텐츠 자동완성 :

검색에 주력하는 바이두나 사이트 내 상품을 검색하는 타오바오 모두 i 검색창에 검색어를 입력하면 검색 기능이 있습니다. 전체 페이지는 새로 고쳐지지 않지만 관련 쿼리 메모는 키워드를 기반으로 표시됩니다. 이 프로세스는 비동기식입니다.

바이두의 검색 완성 기능:

타오바오의 검색 완성 기능:

1.3 동기식과 비동기식의 차이점 :

동기식으로 요청 보내기: 요청을 보내세요. 필요 다음 요청을 보내기 전에 응답이 반환될 때까지 기다리십시오. 요청에 대한 응답이 없으면 다음 요청을 보낼 수 없으며 클라이언트는 항상 대기 프로세스에 있게 됩니다.

비동기식으로 요청 보내기: 응답이 반환될 때까지 기다리지 않고 요청을 보낼 수 있습니다. 즉, 기다릴 필요가 없이 언제든지 다음 요청을 보낼 수 있습니다.

1.4 Ajax 원리 분석:

AJAX 엔진은 브라우저 주소 표시줄을 새로 고치지 않고 비동기 메시지를 보냅니다. 요청 :

JavaScript를 사용하여 브라우저의 내장 AJAX 엔진(XMLHttpRequest 객체) 가져오기

js를 사용하여 요청 경로 및 요청 매개변수 결정

AJAX 엔진 객체는 요청 경로 및 요청 매개변수를 기반으로 요청을 보냅니다.

서버가 수신합니다. Ajax 엔진 요청이 처리됩니다:

서버가 요청 매개변수 데이터를 얻습니다

서버가 요청 비즈니스를 처리합니다(비즈니스 계층 코드 호출)

서버가 Ajax 엔진에 데이터로 응답합니다

Ajax 엔진은 서버 응답 데이터를 얻고, JavaScript 콜백 함수를 실행하여 브라우저 페이지의 특정 위치에 대한 데이터를 업데이트합니다.:

Ajax로 설정된 콜백 함수를 설정하여 서버 응답 데이터를 가져옵니다. 엔진

JavaScript를 사용하여 지정된 위치에 응답 데이터를 표시합니다. 이러한 방식으로 페이지의 데이터를 부분적으로 수정하여 부분 새로 고침 목적을 달성할 수 있습니다.

2.1js 기본 Ajax:

js 기본 Ajax 개발 단계:

Ajax엔진 개체
만들기

Ajax 엔진 객체 수신 바인딩(수신 서버가 엔진에 데이터를 응답했습니다)

제출 주소 바인딩

요청 보내기

모니터링 응답 데이터는 내부에서 처리됩니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css"></style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //同步请求点击事件
        function sendRequest() {
            //js刷地址栏请求服务器端
            location.href = "Ajax1Servlet?name=admin&password=123abc";
        }
        
        //异步请求点击事件
        function sendAsynRequest() {
            //1.创建ajax引擎对象
            var xmlHttp = new XMLHttpRequest();
            //2.设置回调函数，目的是处理服务器完全返回的数据
            xmlHttp.onreadystatechange = function () {
                /**
                 * 这个回调函数什么调用呢？是ajax引擎对象与服务器通信状态码改变的时候调用
                 * ajax引擎对象与服务器通信状态码xmlHttp.readystate，范围0~4
                 * 0：请求未初始化
                 * 1：服务器连接已建立
                 * 2：请求已接收
                 * 3：请求处理中
                 * 4：请求已完成，且响应已就绪
                 * 这个回调函数一共被调用4次，但只有状态码4的时候才代表服务器响应完成数据完成。
                 * ajax引擎通信转态码为4和http通信转态码为200
                 */
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //获取响应数据
                    var content = xmlHttp.responseText;
                    alert(content);
                }
            }
            //3.设置请求路径和请求参数
            /**
             * xmlHttp.open(method,url)
             * method,请求方法，get或post请求
             * url：请求路径
             */
            xmlHttp.open("get","Ajax1Servlet?name=admin&psw=abc123");
            //4.发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
<input type="button" value="发送同步请求" onclick="sendRequest();"/>
<input type="button" value="发送异步请求" onclick="sendAsynRequest();"/>
</body>
</html>

로그인 후 복사

package com.sunny.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "Ajax1Servlet", urlPatterns = "/Ajax1Servlet")
public class Ajax1Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        //打印出来
        System.out.println("name="+name);
        System.out.println("password="+password);
        //输出数据前端
        response.getWriter().write("hello js ajax");
    }
}

로그인 후 복사

2.2 Ajax 엔진 연결 상태 ReadyState 값 0~4 변경 프로세스:

XMLHttpRequest 상태가 저장됩니다. 0에서 4로 변경됩니다.
0: 요청이 초기화되지 않았습니다
1: 서버 연결이 완료되었습니다
2: 요청이 수신되었습니다
3: 요청이 처리 중입니다
4: 요청이 완료되었으며 응답은 Ready

여기서 상태 값은 4뿐입니다. 서버의 응답을 수신하고 서버가 Ajax 요청 처리를 완료했음을 의미할 수 있지만 서버의 응답을 올바르게 얻었음을 의미하지는 않습니다. 필요합니다. http 상태 코드 200과 일치하려면 서버 응답이 올바르게 획득되었음을 표시하는 두 가지 조건이 필요합니다. 이 두 가지 조건이 충족되는 경우에만 xmlhttp.responseText가 올바른 응답 데이터를 얻을 수 있습니다.

xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4){
				if(xmlhttp.status == 200){
					alert("响应数据" + xmlhttp.responseText);
				}
			}
		};

로그인 후 복사