jquery 1_jquery의 Ajax 연구 노트

AJAX에 대한 간략한 소개:
AJAX는 Asynchronous JavaScript And XML(Asynchronous JavaScript And XML)을 말하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말합니다. AJAX를 사용하면 JavaScript가 JavaScript의 XMLHttpRequest 개체를 사용하여 서버와 직접 통신할 수 있습니다. 이 개체를 사용하면 JavaScript가 페이지를 다시 로드하지 않고도 웹 서버와 데이터를 교환할 수 있습니다.
jQuery는 이해하기 쉬운 JavaScript를 경량으로 캡슐화한 JavaScript 프레임워크입니다.
Ajax는 xml javascript와 결합된 비동기 요청 기술로 동적 새로 고침을 수행할 수 있습니다.
ajax 준비:
1.jquery 다운로드:
공식 홈페이지 최신 다운로드 주소: http://blog.jquery.com/2011/09/01/jquery- 1- 6-3-released/
다운로드 시 jQuery 1.6.3 Minified 또는 jQuery 1.6.3 Uncompressed를 선택하고 마우스 오른쪽 버튼을 클릭한 후 "Download using Thunder"를 선택하세요
2. 주요 지식 소개
2.1. Ajax 비동기 전송 단계:
1. dom을 사용하여 텍스트 상자에서 속성 값을 가져옵니다.
document.getElementById("id name").value
2. XMLHttpRequest 객체를 만듭니다. 브라우저에는 XMLHttpRequest, ActiveXObject 두 종류의 객체가 있습니다
3. 콜백 함수 등록 콜백 함수 등록 시 함수 이름만 필요하며 괄호는 추가하지 마세요
콜백 함수 등록 시 반환되는 데이터는 다음과 같습니다.
첫 번째 방법: 클라이언트에서 서버 일반 텍스트 데이터 출력 가져오기
두 번째 방법: responseXML을 사용하여 XML 데이터 개체의 DOM 개체를 허용합니다
4. 연결 정보
5. 데이터 전송 및 서버와의 상호 작용 시작
Post 메서드/get 메서드

2.2.ajax 기본 메서드:
(1).getElementById("id 속성 값" ):
지정된 id 속성 값에 따라 객체 가져오기
(2 ).getElementsByTagName(tagname):
전체 HTML 문서에서 HTML 요소를 검색하여 지정된 요소의 컬렉션을 반환합니다. 이름
(3) 선택자:
선택자에는 기본 선택자, 계층적 선택자, 속성 선택자 등이 있습니다. 이 프로그램에는 다음과 같은 기본 선택기 #id만 있습니다.
$("#myDiv"): ID가 "myDiv"인 요소를 찾습니다.
2.3.XMLHttpRequest 개체:
XMLHttpRequest는 없이 기능을 제공할 수 있습니다. 페이지가 로드되면 웹페이지가 업데이트되고, 페이지가 로드된 후 클라이언트가 서버에 데이터를 요청하고, 페이지가 로드된 후 서버가 데이터를 수신하고 백그라운드에서 클라이언트에 데이터를 보냅니다.
2.3.1. 방법:
(1)overrideMimeType("text/html"):
서버로 전송된 헤더를 재정의하여 text/xml을 MIME 유형으로 지정합니다.
(2 ) open(method, url, async, 사용자 이름, 비밀번호):
URL 및 HTTP 메소드와 같은 HTTP 요청 매개변수를 초기화하지만 요청을 보내지는 않습니다.
method 매개변수는 GET, POST 및 HEAD를 포함하여 요청에 사용되는 HTTP 메서드입니다.
url 매개변수는 요청의 본문입니다.
async 매개변수는 요청이 동기식인지 비동기식인지를 나타내며 false 요청은 동기식입니다. , true 요청은 다음과 같습니다. 비동기
사용자 이름 및 비밀번호 매개변수는 선택사항이며 URL에 필요한 인증에 대한 인증 자격을 제공합니다. 지정된 경우 URL 자체에서 지정한 모든 자격을 재정의합니다.
(3)send(body):
open() 메소드에 전달된 매개변수와
send(body) 메소드에 전달된 선택적 요청 본문을 사용하여 HTTP 요청을 보냅니다. () ) 지정된 HTTP 메소드는 POST 또는 PUT이고 body 매개변수는 요청 본문을 문자열 또는 Document 객체로 지정합니다. 요청 본문이 필요하지 않은 경우 이 매개변수는 null이 됩니다.
이전에 호출된 open()의 async 매개변수가 false인 경우 이 메서드는 차단되고 ReadyState가 4가 되고 서버의 응답이 완전히 수신될 때까지 반환되지 않습니다.
비동기 매개변수가 true이거나 이 매개변수가 생략된 경우 send()는 즉시 반환되며 나중에 설명하는 것처럼 서버 응답은 백그라운드 스레드에서 처리됩니다.
(4)setRequestHeader(name, value):
열렸지만 전송되지 않은 요청에 HTTP 요청을 설정하거나 추가합니다.
name 매개변수는 설정할 헤더의 이름입니다. 이 매개변수에는 공백, 콜론 또는 개행 문자가 포함되어서는 안 됩니다.
값 매개변수는 헤더의 값입니다. 이 매개변수에는 개행 문자가 포함되어서는 안 됩니다.
2.3.2 속성:
(1)onreadystatechange:
readyState 속성이 변경될 때마다 호출되는 이벤트 핸들러 함수입니다. ReadyState가 3인 경우에도 여러 번 호출될 수 있습니다.
(2)readyState:
HTTP 요청의 상태입니다. XMLHttpRequest가 처음 생성되면 완전한 HTTP 응답이 수신될 때까지 이 속성의 값은 0부터 시작하여 4로 증가합니다.
5개 상태 각각에는 연관된 비공식 이름이 있습니다. 다음 표에는 상태, 이름 및 의미가 나열되어 있습니다.

readyState의 값은 요청이 처리되는 동안을 제외하고 감소되지 않습니다. 또는 프로세스 중에 open() 메소드가 호출됩니다. 이 속성의 값이 증가할 때마다 onreadystatechange 이벤트 핸들러가 트리거됩니다.
(3)상태:
서버에서 반환한 HTTP 상태 코드입니다(예: 성공의 경우 200, '찾을 수 없음' 오류의 경우 404). ReadyState가 3보다 작을 때 이 속성을 읽으면 예외가 발생합니다.
(4)responseText:
지금까지 서버로부터 받은 응답 본문(헤더 제외)이거나, 아직 데이터가 수신되지 않은 경우 빈 문자열입니다.
readyState가 3보다 작은 경우 이 속성은 빈 문자열입니다.ReadyState가 3인 경우 지금까지 수신한 응답 부분을 반환하는 속성입니다. ReadyState가 4인 경우 이 속성은 전체 응답 본문을 보유합니다.
응답에 응답 본문의 문자 인코딩을 지정하는 헤더가 포함되어 있는 경우 해당 인코딩을 사용하세요. 그렇지 않으면 유니코드 UTF-8이 가정됩니다.
(5)responseXML: 요청에 대한 응답, XML로 구문 분석되고 문서 객체로 반환됩니다.

코드 예:
참고: 이 예는 프런트엔드로 구성됩니다. 및 백엔드, 백엔드는 서블릿 구현을 사용하지만 데이터를 확인하기 위해 데이터베이스로 이동하지 않습니다. 프론트 데스크는 html과 자바스크립트로 구성되는데, 하나는 jquery로 캡슐화된 ajax를 사용하여 양식의 동적 검증을 구현하는 것입니다. 두 가지 확인 방법의 차이점은 단지 자바스크립트 스크립트가 다르고, 프론트 페이지와 백그라운드 서블릿이 동일하다는 것입니다.

프런트엔드 ajax.html

코드 복사 코드는 다음과 같습니다.

"http://www.w3.org/TR/html4/loose.dtd"

백그라운드 AJAXServer.java:

코드 복사 코드는 다음과 같습니다. import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletResponse;

import java. io.IOException;
import java.io.PrintWriter;
public class AJAXServer 확장 HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType ("text/html;charset=utf-8");
PrintWriter out= response.getWriter()
//1. 매개변수 가져오기
String old=request.getParameter("name");
//2. 문제가 있는지 확인
if(old==null ||old.length()==0){
out.println("사용자 이름은 비워둘 수 없습니다.");
}else{
//3. 확인 작업
String name= old;
if(name.equals("pan")){
//4. 이 단계에서는 사용자가 관심 있는 데이터를 새 페이지가 아닌 페이지로 반환해야 합니다.
out.println("Username[" name "] 이미 존재합니다")
}else{
out .println("Username[" name "] 사용 가능");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(요청,응답);
}
}


javascript:verify.js

복사 코드

코드는 다음과 같습니다.

function verify1(){
//1. 텍스트 상자에서
//document.getElementById("username");
var jqueryObj= $("#username")
//노드 값 가져오기
var userName=jqueryObj . val();//2. 텍스트 상자의 데이터를 서버의 서블릿
$.get("AJAXServer?name=" username,null,callback)
}으로 보냅니다. function callback(data){
//3. 서버가 반환한 데이터를 받습니다.
//4. 서버가 반환한 데이터를 페이지에 동적으로 표시합니다.
//정보를 저장하는 노드를 찾습니다.
var resultObj=$("#result");
resultObj.html(data)
}
//검증 방법 2는 메서드에 검증 방법 1을 작성하는 것입니다. 동일, 둘 다 jquery
function verify2(){
$.get("AJAXServer?name=" $("#username").val(),null,function(으로 캡슐화된 Ajax 동적 확인 양식 데이터입니다. data) {
$("#result").html(data);
})
}

var xmlhttp;//전역 변수 정의
function verify3(){
//1. dom을 사용하여 텍스트 상자의 속성 값을 가져옵니다.
var username=document.getElementById("username").value;
//2. XMLHttpRequest 객체 생성
//IE와 다른 객체의 차이점을 기반으로 이 객체를 생성하려면 다양한 방법으로 코드를 작성해야 합니다. 브라우저 유형
if (window. 브라우저의 BUG 수정
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}
} else if (window.ActiveXObject){
// IE6, IE5.5, IE5의 경우
//JS 배열에 저장된 XMLHttpRequest 객체를 생성하는 데 사용되는 두 개의 컨트롤 이름, 전면 버전이 더 최신입니다
var activexName= ["MSXML2.XMLHTTP ","Microsoft.XMLHTTP"];
for(var i=0;i// 컨트롤 이름을 꺼내서 생성합니다. 성공하면 루프를 종료합니다.
/ /생성이 실패하면 예외가 발생합니다. 그런 다음 계속 루프를 만들고 계속해서 생성을 시도할 수 있습니다.
try{
xmlhttp=new ActiveXObject(activexName[ i]);
break;
}catch(e) {
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest 객체 생성에 실패했습니다! ! ");
return;
}
//3. 콜백 함수를 등록합니다. 콜백 함수 등록 시 함수명만 필요하며 괄호는 넣지 마세요
//등록해야 합니다. 함수 이름에 괄호를 추가하면 함수의 반환 값이 잘못 등록됩니다.
xmlhttp.onreadystatechange=callback3
//4. 연결 정보를 설정합니다
xmlhttp.open(" GET","AJAXServer?name =" 사용자 이름,true);
//5. 데이터 전송 및 서버와의 상호 작용 시작
xmlhttp.send(null);//사용자 이름은 GET 메서드 URL에 캡슐화됩니다. , 따라서 데이터를 요청하고 전송하려면 null
//POST 메서드 하나만 보내면 됩니다
>//콜백 함수
function callback3(){
//객체 상태의 상호작용이 완료되었는지 확인
if(xmlhttp.readyState==4){
//http가 완료되었는지 확인 상호작용이 성공했습니다
if(xmlhttp.status== 200) {
//서버에서 반환된 데이터를 가져옵니다
//첫 번째 방법: 서버에서 출력된 일반 텍스트 데이터를 가져옵니다
var responseText=xmlhttp.responseText;
//데이터 표시 dom을 통해 페이지의 div 태그에 해당하는 요소 노드를 찾습니다.
var divNode=document.getElementById("result")//Set the 요소 노드의 html 콘텐츠
divNode.innerHTML=responseText
}
}
}


web.xml




코드 복사

코드는 다음과 같습니다.

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance " xsi:schemaLocation="http://java.sun.com /xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

AJAXServer

AJAXServer >

AJAXServer
/AJAXServer




web.xml




코드 복사


코드는 다음과 같습니다.

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance "
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">

AJAXServer
AJAXServer


AJAXServer
/AJAXServer

웹앱>

1.web.xml 서블릿의 유형

2.AJAXServer.java 包name상关

截图1：

 

截图2：

截图3：

截图4：

截图说明:以上 4个截图url显示的文是一样的,只是为了便于显示我没有把它截下来。