제목 : 기본 아약스 사용자 이름 반복적 인 검사를 사용하여 (가)
DATE : 2018년 10월 21일 17시 35분 15초
태그 : 자바 스크립트, 아약스]
---
아약스 검토
아약스 거리가 좀 시간이 될 것이라고 배우고 시작하고 상대적으로 작았 다. 우리는 약간 녹슨 그것은 ¯을 ¯ 이해하고, 지금 바로 아약스를 통해 이동하는 방식으로, 아약스와 반복 기능 테스트를 달성하고자합니다.
아약스 소개
- 역할 : 아약스는 전체 페이지,하지만 업데이트의 일부를 업데이트 할 필요가있을 수 있습니다에 의해, 사용자 경험을 최적화;
- 원리 :
- AjaxEngine , 일반적으로 주제 XMLHtttpRequest를 사용하여 전송을위한 서버와 상호 작용;
를 만들려면
- 비동기 대화 형 객체를 만듭니다
호환되는 다른 브라우저, IE7 +, 파이어 폭스, 크롬, 처리하기 위해 할 오페라, 사파리 와 브라우저, XMLHTTP = 새로운 새로운는 XMLHttpRequest ();는 I E6, XMLHTTP와 IE5는 = 새로운 새 브라우저 ActiveXObject ( "에서는 Microsoft.XMLHTTP"); 설정 모니터 :
반환 된 상태에 따라 선단에 대응한다.
이벤트가 readyState의 속성 XMLHtttpRequest 객체라고 반환 값을 가져온 다음 반응 후에을 onreadystatechange 이벤트가 트리거되면 readyState가 변경, 그것은 트리거합니다. 다섯 개 국가의 readyState의 합계는 다음과 같이
XMLHtttpRequest 객체가 상태 속성 사용 가능한 서버는 HTTP 상태 코드를 반환 호출
요청 성공 : --200가
--404를 : 쿼리 또는 URL 파일을 찾을 수 없습니다
- 400 ~ 499 : 클라이언트 문제를
--500 : 서버 문제- 열기 링크 :
개방 (방법, URL, 비동기)를 사용하여 , 다음과 같은 세 개의 매개 변수 :
- 방법 : 요청의 유형하며 GET 또는 POST
- URL :하여 서버에있는 파일의 위치
- 비동기 : 사실 (비동기) 또는 false (동기) 전송 :
경우 POST 요청, 송신 (문자열)를 사용하여;
코드 섹션
자바 스크립트
<script>
/*
*异步检验用户名是否被注册
*/
function checkUsername(){
//获取用户名
var username = document.getElementById("username").value;
//1.创建异步交互对象
var xhr = createXmlHttp();
//2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("checkReport").innerHTML = xhr.responseText;
}
}
}
//3.打开链接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
//4.发送
xhr.send(null);
}
function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
</script>참고 : 브라우저 캐시의 사용을 방지 할 목적으로이 Ajax 요청, 플러스 한 타임 스탬프를. 브라우저가 캐시의 경우를 열 수 있기 때문에, 동일한 링크의 동일한 매개 변수는 브라우저 캐시를 사용합니다.
양식
<div class="register">
<form action="index.html" onsubmit="return checkForm();">
<ul>
<li>昵 称：
<input type="text" id="username" placeholder="您用户名" onblur="checkUsername();"/>
<span id="checkReport"></span>
</li>
<li>设置密码：<input type="password" id="password" placeholder="至少两种字符组合" /></li>
<li>确认密码：<input type="password" id="repassword" placeholder="再次输入您的密码" /></li>
<li>验证邮箱：<input type="text" id="email" placeholder="输入邮箱" /></li>
<div class="check">
<input type="checkbox" id="accept" onclick="isAccepted()" /> 同意
<a href="index.html" style="text-decoration: none;">《用户注册协议》</a>
</div>
<input class="rbtn" type="submit" id="submit" value="确认注册" disabled="disabled"/>
</ul>
</form>
</div>SHH 백엔드로 사용합니다.