ajax 작은 예 예제 간단 한 응용 방법
이 예 에 서 는 ajax 의 기본 개념(예 를 들 어 XML HttpRequest,ready State)을 상세 하 게 설명 하지 않 습 니 다.참고 할 수 있 습 니 다.http://www.w3school.com.cn/ajax/,안에서 말 하 는 것 이 느 리 고 좋다.
다음 부터 이 사용자 이름 을 검사 하 는 작은 예 를 들 어 jsp 페이지 두 개 만 새로 만 들 면 이 실험 을 완성 할 수 있 습 니 다.편 의 를 위해 이 인증 사용자 이름 은 데이터 베 이 스 를 조회 할 필요 가 없 으 며,제출 한 사용자 이름 이 admin 일 때 사용자 이름 이 이미 존재 하 는 지 알려 줍 니 다.그렇지 않 으 면 사용자 이름 을 알려 줍 니 다.
ajax.jsp 원본 코드:
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax </title>
<script type="text/javascript">
var req;
function validate() {
var idField = document.getElementById("userid");
var url = "Validate.jsp?userid=" + idField.value;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if(req.readyState == 4) {
if(req.status == 200) {
//alert(req.responseText);
var msg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg);
setMsg(msg.childNodes[0].nodeValue);
}
}
}
function setMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg == "invalid") {
mdiv.innerHTML = "<font color='red'>username exists</font>";
} else {
mdiv.innerHTML = "<font color='green'>congratulations! you can use this username!</font>";
}
}
</script>
</head>
<body>
<form method="post" action="###" onSubmit="###">
<table align="center" cellpadding="4" cellspacing="1">
<tr>
<td colspan="2" > - </td>
</tr>
<tr>
<td colspan="2" ><span id="usermsg"></span></td>
</tr>
<tr>
<td> :</td>
<td><input id="userid" name="userid" type="text" onblur="validate()"></td>
</tr>
<tr>
<td> :</td>
<td ><input name="password" type="password"></td>
</tr>
<tr>
<td > :</td>
<td ><input name="password2" type="password"></td>
</tr>
<tr>
<td colspan="2" align="center"><input value=" " type="submit"></td>
</tr>
</table>
</form>
</body>
</html>Validate.jsp 소스 코드:
<%
String userid=request.getParameter("userid");
userid=new String(userid.getBytes("ISO8859_1"),"gb2312");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server
if(userid.equals("admin")){
response.getWriter().write("<msg>invalid</msg>");
}else{
response.getWriter().write("<msg>valid</msg>");
}
%>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
