Ajax를 통한 Servlet3.0과 순수 JavaScript 간의 상호 작용 사례에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Ajax를 통한 Servlet3.0과 순수 JavaScript 간의 상호 작용 사례에 대한 자세한 설명

亚连

May 29, 2018 pm 03:20 PM

서블릿은 Ajax를 통해 순수 자바스크립트와 상호작용하는데, 이는 많은 사람들에게 간단할 것입니다. 하지만 후발자가 Ajax를 더 쉽게 배울 수 있도록 적어보겠습니다

많은 사람들에게 매우 간단할 것입니다. 하지만 그래도 Ajax를 배우고 있는 후발주자들을 돕기 위해 적어봅니다.

js.html은 순전히 정적 페이지이지만 Ajax 상호 작용을 구현하려면 Tomcat 서버에 다음 프로그램을 실행해야 합니다. 그렇지 않으면 효과가 표시되지 않습니다.

Javaee용 Eclipse. Tomcat을 실행하기 전에 완료된 프로젝트를 Tomcat에 걸어두세요.

이 프로젝트에서는 JSP에 필요한 서블릿 패키지 외에 다른 것을 소개할 필요가 없습니다. 사실 이 프로젝트를 JSP 페이지를 직접 이용해서 완성하고 싶은데, 요즘은 기본적으로 JSP에 종사하는 사람이 .jsp 파일에 직접 내용을 쓰는 경우가 없잖아요? 모든 백그라운드 작업은 .java에 포함됩니다.

1. 기본 목표

프런트엔드 js.html 입력 상자의 입력을 ajaxRequest라는 이름과 /ajaxRequest 주소를 사용하여 백엔드 Servlet.java에 전달합니다. 그런 다음 Servlet.java 배경은 해당 정보를 프런트 엔드 js.html로 반환합니다. js.html은 새로 고치거나 점프하지 않고 즉시 응답합니다.

2. 기본 개념

서블릿 3.0이기 때문에 애너테이션을 사용하여 서블릿을 작성할 수 있습니다. 웹에서는 아무것도 작성할 필요가 없습니다.

1 . Servlet.java를 먼저 작성하든 js.html을 먼저 작성하든 상관없습니다. 어쨌든 Ajax 상호작용에서는 이 둘이 통합되어 분리될 수 없습니다. 먼저 js.html을 보세요. HTML 레이아웃은 양식도 없고 입력 상자가 두 개뿐입니다. Ajax 객체 XMLHttpRequest를 생성할 때 XMLHttpRequest 키워드를 Ajax 객체 XMLHttpRequest의 이름으로 사용하지 않도록 주의하세요. 그렇지 않으면 일부 브라우저에서 이를 처리할 수 없습니다.

<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
  version="3.0"> 
</web-app>

2. 다음은 Servlet.java입니다. 실제로 doGet과 doPost는 모두 페이지에 인쇄하지만 형식이 다릅니다. PrintStream은 이전 JDK의 출력 스트림이고, PrintWriter는 JDK1.4 이후의 출력 스트림인 것 같습니다. 그런데 이 부분은 너무 간단합니다. 입출력 스트림은 모두 자바에서 필수 과정이겠죠?

js.html은 param1과 param2를 이 Servlet.java에 전달한 후 이 Servlet.java가 해당 내용을 인쇄할 때까지 기다린 다음 프런트 데스크의 XMLHttpRequest1.responseText 변수를 통해 직접 읽습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js</title> 
</head> 
 
<body> 
  <input type="text" id="param1" /> 
  <input type="text" id="param2" /> 
  <button onclick="ajax()">Go!</button> 
</body> 
</html> 
<script> 
  //创建Ajax对象，不同浏览器有不同的创建方法，其实本函数就是一个简单的new语句而已。  
  function createXMLHttpRequest() { 
    var XMLHttpRequest1; 
    if (window.XMLHttpRequest) { 
      XMLHttpRequest1 = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
      try { 
        XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
    } 
    return XMLHttpRequest1; 
  } 
  function ajax() { 
    //param1与param2就是用户在输入框的两个参数 
    var param1=document.getElementById("param1").value; 
    var param2=document.getElementById("param2").value; 
    var XMLHttpRequest1 = createXMLHttpRequest(); 
    //指明相应页面  
    var url = "./ajaxRequest"; 
    XMLHttpRequest1.open("POST", url, true); 
    //这里没法解释，你所有JavaScript的请求头都这样写就对了，不会乱码  
    XMLHttpRequest1.setRequestHeader("Content-Type", 
        "application/x-www-form-urlencoded"); 
    //对于ajaxRequest，本js.html将会传递param1与param2给你。  
    XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2); 
    //对于返回结果怎么处理的问题  
    XMLHttpRequest1.onreadystatechange = function() { 
      //这个4代表已经发送完毕之后  
      if (XMLHttpRequest1.readyState == 4) { 
        //200代表正确收到了返回结果  
        if (XMLHttpRequest1.status == 200) { 
          //弹出返回结果  
          alert(XMLHttpRequest1.responseText); 
        } else { 
          //如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。  
          alert("网络连接中断！"); 
        } 
      } 
    }; 
  } 
</script>

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

js+canvas는 슬라이딩 퍼즐 검증 코드 기능을 구현합니다.

레드-블랙 트리 삽입에 대한 자세한 설명 및 Javascript 구현 방법 예시

js는 중복 제거 및 수치 최적화를 위한 이진 트리를 구성합니다. 배열 자세한 설명

위 내용은 Ajax를 통한 Servlet3.0과 순수 JavaScript 간의 상호 작용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

jQuery 날짜가 유효한지 확인하십시오Mar 01, 2025 am 08:51 AM

간단한 자바 스크립트 함수는 날짜가 유효한지 확인하는 데 사용됩니다. 기능 isValidDate (s) { var 비트 = s.split ( '/'); var d = 새로운 날짜 (비트 [2]/'비트 [1]/'비트 [0]); return !! (d && (d.getmonth () 1) == 비트 [1] && d.getDate () == 숫자 (비트 [0]); } //시험 var

jQuery는 요소 패딩/마진을 얻습니다Mar 01, 2025 am 08:53 AM

이 기사에서는 jQuery를 사용하여 DOM 요소의 내부 마진 및 마진 값, 특히 요소의 외부 마진 및 내부 마진의 특정 위치를 얻고 설정하는 방법에 대해 설명합니다. CSS를 사용하여 요소의 내부 및 외부 마진을 설정할 수는 있지만 정확한 값을 얻는 것이 까다로울 수 있습니다. // 설정 $ ( "div.header"). css ( "margin", "10px"); $ ( "Div.Header"). CSS ( "패딩", "10px"); 이 코드는 생각할 수 있습니다

10 JQuery Accordions 탭Mar 01, 2025 am 01:34 AM

이 기사는 10 개의 탁월한 jQuery 탭과 아코디언을 탐구합니다. 탭과 아코디언의 주요 차이점은 콘텐츠 패널이 표시되고 숨겨진 방식에 있습니다. 이 10 가지 예를 살펴 보겠습니다. 관련 기사 : 10 JQuery Tab 플러그인

10 JQuery 플러그인을 확인할 가치가 있습니다Mar 01, 2025 am 01:29 AM

웹 사이트의 역학 및 시각적 매력을 높이기 위해 10 개의 탁월한 jQuery 플러그인을 발견하십시오! 이 선별 된 컬렉션은 이미지 애니메이션에서 대화식 갤러리에 이르기까지 다양한 기능을 제공합니다. 이 강력한 도구를 탐색합시다. 관련 게시물 : 1

노드 및 HTTP 콘솔로 HTTP 디버깅Mar 01, 2025 am 01:37 AM

HTTP-Console은 HTTP 명령을 실행하기위한 명령 줄 인터페이스를 제공하는 노드 모듈입니다. 웹 서버, 웹 서비스에 대해 만들어 졌는지 여부에 관계없이 HTTP 요청과 함께 어떻게 진행되고 있는지 정확하게 보는 데 유용합니다.

사용자 정의 Google 검색 API 설정 자습서Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

jQuery div에 스크롤 바를 추가합니다Mar 01, 2025 am 01:30 AM

다음 jQuery 코드 스 니펫은 DIV 내용이 컨테이너 요소 영역을 초과 할 때 스크롤 바를 추가하는 데 사용될 수 있습니다. (데모 없음, FireBug에 직접 복사하십시오) // d = 문서 // w = 창 // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrolltop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ( '#c

See all articles