Ajax 기술 구성 과 핵심 원리 분석
1、Ajax
특징:부분 새로 고침,사용자 의 체험 도 향상,데 이 터 는 서버 에서 불 러 옵 니 다.
2.AJax 의 기술 구성
신기 술 이 아니 라 이전 기술 의 통합 이다.
Ajax: Asynchronous Javascript And Xml;（비동기 자 바스 크 립 트 와 XML)
포 함 된 기술:JavaScript,XML,CSS,XML HttpRequest
비동기:요청 을 보 낸 후 결 과 를 기다 리 지 않 고 리 셋 함수 로 처리 합 니 다.
자바 스 크 립 트:서버 에 요청 을 보 내 결 과 를 되 돌려 받 고 페이지 를 업데이트 합 니 다.
XML:데 이 터 를 봉인 하 는 데 사용 합 니 다.
3.Ajax 핵심 원리
XML HttpRequst 대상:이 대상 을 통 해 서버 에 요청 을 보 냅 니 다.
이것 은 비동기 요청 기술 로 모든 현대 브 라 우 저 를 지원 합 니 다(Chrome,IE5+)
1)XMLHttpReuest 대상 만 들 기
비 IE 브 라 우 저(Mozilla/Safari):var xhr=new XML HttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
낮은 버 전 IE:xhr=new ActiveXObject("Microsfot.XML HTTP");
2)XML HttpRequest 대상 의 속성 과 방법
a)방법:open("GET/POST",URL,true/false):서버 에 연결 하기
세 개의 인자 가 있 습 니 다:
인자 1:제출 방식,post 또는 get
인자 2:요청 한 URL
인자 3:동기 화 또는 비동기 요청 을 표시 합 니 다.true:비동기 요청 을 표시 합 니 다.
false:동기 화 요청 표시
send(data):요청 보 내기
인자:제출 한 내용.
POST 방식:data 는 제출 한 매개 변수 입 니 다.send(username=root&password=abc 123);
GET 방식:send(null)
b)속성:
onreadystatechange:상태 가 바 뀌 었 을 때의 리 셋 함 수 를 설정 하고 리 셋 함 수 는 서버 데 이 터 를 가 져 옵 니 다.
onreadystatechange=function(){
｝
readyState:서버 상태 응답
상태 코드:
0:초기 화 되 지 않 음
1:불 러 오 는 중
2:로드 완료
3:진행 요청 중
4:요청 완료
responseText:서버 에서 돌아 온 데이터(텍스트 형식)
responseXML:서버 에서 되 돌아 오 는 데이터(XML 형식)
요약:
XML HttpRequest 를 사용 하 는 단계:
1)XMLHttpRequest 대상 생 성
2)요청 한 방법 및 URL 설정
xhr.open("GET/POST","url",true/false),true 는 비동기 요청 을 표시 하고 false 는 동기 요청 을 표시 합 니 다.
3)상태 변경 시 반전 함수 설정
xhr.onreadystatechange=function(){}
0:초기 화 되 지 않 음
1:불 러 오 는 중
2:로드 완료
3:진행 요청 중
4:요청 완료
4)송신 요청
xhr.send(data),
post 에 제출 하면 data 는 제출 한 데이터 이 고 get 에 제출 하면 인 자 는 null 이면 됩 니 다.
사용자 로그 인 을 판단 하 는 HTML 페이지:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
</head>
<body>
：<input type="text" name="username" id="username"><br>
:<input type="password" name="password" id="password">
<a href="javascript:chkUser();"> </a>
<div id="res"></div>
</body>
<script type="text/javascript">
var xhr;
/**
* XMLHttpRequest
*/
function createXMLHttpRequest(){
//1、 XMLHttpRequest
if(window.XMLHttpRequest){
// IE
xhr=new XMLHttpRequest();
}else{
//IE
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
/**
* ， 、
*/
function chkUser(){
//1、 XMLHttpRequest
createXMLHttpRequest();
//2、 、
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//3、 ：open
var url="login?username="+username+"&password="+password;
// 1：get
//xhr.open("GET",url,true);
// 2：post
var url2="login";
xhr.open("POST",url2,true);
//4、 ，
xhr.onreadystatechange=function(){
/*
readyState ：
0：
1：
2：
3：
4：
*/
if(xhr.readyState==4){
//status,200
if(xhr.status==200){
//alert(" ："+xhr.responseText);
var res=xhr.responseText;
if(res=='0'){
document.getElementById("res").innerHTML=" ";
}else{
document.getElementById("res").innerHTML="<font color='red'> </font>";
}
}else{
alert(" :"+xhr.response.Text);
}
}
}
//5、
// 1：get
//xhr.send(null);
// 2:post ：
//Post http
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("username="+username+"&password="+password);
}
</script>
</html>
package com.newer.login.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.newer.login.bean.User;
import com.newer.login.service.UserService;
/**
* Servlet implementation class LoginServlet
*/
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
UserService userService = new UserService();
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 1、
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(" username:"+username);
System.out.println(" password:"+password);
// 2、 User
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 3、 ， 、
User u = userService.login(user);
/*
* if(u!=null){ // request.setAttribute("user", user);
* // ... }else{ // ，
*
* }
*/
// ajax
PrintWriter out = response.getWriter();
if (u != null) {
//0 ，1
out.print(0);
}else{
out.print(1);
}
out.close();
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
