집 > 기사 > 웹 프론트엔드 > AJAX를 처음부터 배우고 자동 확인 양식 만들기

AJAX를 처음부터 배우고 자동 확인 양식 만들기

亚连원래의: 2018-05-25 14:06:151314검색

이 글에서는 자동 확인 양식을 생성하기 위한 AJAX의 제로 기반 학습을 주로 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

기존 웹 페이지에서는 등록 중에 사용자 이름이 사용되고 있는지 감지합니다.

Ajax가 등장하면서 이 경험이 크게 개선되었습니다. 사용자가 양식을 작성할 때 서명된 양식 항목이 서버로 전송된 다음 사용자가 작성한 내용을 기반으로 데이터 쿼리가 수행되기 때문입니다. 페이지를 새로 고치지 않고도 쿼리 번호가 자동으로 표시됩니다. 이와 같은 응용 프로그램은 사용자 경험을 크게 향상시킵니다. 이 섹션에서는 자동 확인 양식을 만드는 방법을 간략하게 소개합니다. Ajax의 역할을 원칙적으로 분석합니다.

1. 프레임워크 구축

먼저 html 프레임워크 구축

<form name="register">
<p><label for = "User">输用户名<input type="text" name="User" id="User"></label><span id="UserResult"></span></p>
<p><label for = "passwd1">输入密码<input type="password" name="passwd1" id="passwd1"></label></p>
<p><label for = "passwd2">重复输入<input type="password" name="passwd2" id="passwd2"></label></p>
<p><input type="submit" value="注册"></p>
<p><input type="reset" value="重置"></p>
</form>

2. 비동기 요청 설정

사용자가 "사용자 이름" 입력을 마치고 다른 양식 입력을 시작하면 백그라운드 확인을 수행합니다. 코드는 다음과 같습니다.

사용자 이름 입력dfe166b1d5b692b343e5eac7f90c243d
startCheck() 함수에서 this를 직접 보냅니다. 매개변수로 전달된 함수 자체는 먼저 사용자 입력이 비어 있는지 여부를 확인하고, 비어 있으면 직접 반환하여 사용자 이름 텍스트 상자에 초점을 맞추고 해당 프롬프트를 제공합니다.

function startCheck(oInput){
//判断是否有输入，没有输入则直接返回。
if(!oInput.value){
oInput.focus();//聚焦到用户名文本框
document.getElementById("User").innerHTML="用户名不能为空";
return;
}
//创建异步请求
//....
}

사용자가 사용자 이름을 입력하면 toLowerCase()를 사용하여 이를 소문자로 변환하고 비동기 요청을 설정합니다.

showResult() 함수는 서버 처리에서 반환된 responseText 텍스트를 표시하는 데 사용됩니다.

<script type="text/javascript">
var xmlHttp;
function createXMLHttprequest() {
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startCheck(oInput) {
//判断是否有输入，没有输入则直接返回。
if (!oInput.value) {
oInput.focus(); //聚焦到用户名文本框
document.getElementById("User").innerHTML = "用户名不能为空";
return;
}
//创建异步请求
createXMLHttpRequest();
var sUrl = "1-9.aspx?user=" + oInput.value.toLowerCase() + "&timestamp=" + new Date().getTime();
xmlHttp.open("GET", sUrl, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
showResult(xmlHttp.responseText); //显示服务结果
}
xmlHttp.send(null);
}
</script>

3. 서버 처리

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
if(Request["user"]=="isaac")
Response.Write("Sorry, " + Request["user"] + " already exists.");
else
Response.Write(Request["user"]+" is ok.");
%>

4. 비동기 쿼리 결과 표시

사용자가 양식에 다른 항목을 입력하면 백그라운드에서 비동기 반환 결과가 자동으로 완료됩니다.

function showResult(sText) {
var oSpan = document.getElementById("UserResult");
oSpan.innerHTML = sText;
if (sText.indexOf("already exists") >= 0)
//如果用户名已被占用
oSpan.style.color = "red";
else
oSpan.style.color = "black";
}

위 코드는 서버에서 반환한 결과를 표시합니다.

이 사례의 전체 코드











输用户名




输入密码




重复输入

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

AJAX를 처음부터 배우고 자동 확인 양식 만들기

관련 기사