집 >웹 프론트엔드 >JS 튜토리얼 >Ajax를 사용하여 사용자 이름이 중복되었는지 비동기적으로 확인하는 방법

Ajax를 사용하여 사용자 이름이 중복되었는지 비동기적으로 확인하는 방법

php中世界最好的语言원래의: 2018-03-30 16:55:271942검색

이번에는 Ajax를 사용하여 사용자 이름이 중복되었는지 비동기적으로 확인하는 방법을 보여 드리겠습니다. Ajax를 사용하여 사용자 이름이 중복되었는지 비동기적으로 확인하는 주의 사항은 다음과 같습니다. .

모든 웹사이트에 사용자를 등록할 때 사용자가 이미 존재하는지 확인됩니다. 오래 전 처리 방법은 확인을 위해 모든 데이터를 서버에 제출하는 것이었지만 나중에 사용자가 사용자 이름 입력을 마치고 계속해서 Ajax 및 비동기식 상호 작용을 수행하면 이 방법의 사용자 경험이 매우 나빴습니다. 기타 정보를 입력하면 Ajax는 해당 정보를 서버로 보내 사용자 이름이 등록되었는지 확인하므로 해당 사용자 이름이 이미 존재하는 경우 사용자가 모든 데이터를 제출할 때까지 기다리지 않고 프롬프트를 표시할 수 있습니다. 이 방법을 사용하면 사용자 경험이 크게 향상됩니다. 오늘은 이 상호 작용 방법에 대해 설명하겠습니다.

다음은 JS를 이용하여 사용자 ID를 알아낸 후 user_validate.jsp 페이지로 보낸 후 콜백 메소드를 통해 페이지에서 반환한 메시지를 받아 사용자에게 알리는 것입니다.

function validate(field) { 
  if (trim(field.value).length != 0) { 
    //创建Ajax核心对象XMLHttpRequest 
    createXMLHttpRequest(); 
     
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    //将方法地址复制给onreadystatechange属性 
    //类似于电话号码 
    xmlHttp.onreadystatechange=callback; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
  } 
} 
 
function callback() { 
  //alert(xmlHttp.readyState); 
  //Ajax引擎状态为成功 
  if (xmlHttp.readyState == 4) { 
    //HTTP协议状态为成功 
    if (xmlHttp.status == 200) { 
      if (trim(xmlHttp.responseText) != "") { 
        //alert(xmlHttp.responseText); 
        document.getElementById("spanUserId").innerHTML = "<font color=&#39;red&#39;>" + xmlHttp.responseText + "</font>"; 
      }else { 
        document.getElementById("spanUserId").innerHTML = ""; 
      } 
    }else { 
      alert("请求失败，错误码=" + xmlHttp.status); 
    } 
  } 
}

user_validate.jsp 페이지에서는 사용자 ID를 받아 해당 ID를 기준으로 존재 여부를 쿼리합니다. 존재하지 않으면 아무것도 반환하지 않습니다.

<% 
  String userId = request.getParameter("userId"); 
  if(UserManager.getInstance().findUserById(userId) != null) { 
    out.println("用户代码已经存在"); 
  } 
%>

커서가 사용자 코드 텍스트 상자를 벗어나면 검사 방법이 실행됩니다.

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

Rendering

사용자 ID를 기준으로 존재 여부를 확인하는 방법은 너무 간단해서 게시하지 않겠습니다. 대역폭을 모두 게시하면 낭비가 될까 두렵습니다.

웹 개발을 할 때는 사용자 경험에 더 많은 주의를 기울여야 합니다. 더 많은 클라이언트 측 확인(물론 보안을 위해 서버 확인이 필요함)과 비동기식 상호 작용을 사용하면 사용자 경험을 효과적으로 향상시킬 수 있습니다. 사용자가 편안하게 사용하고 우리가 만든 것을 사용하고 싶어할 때에만 우리의 작업은 사용자를 만족시키는 것입니다.

세부 사항이 성공 또는 실패를 결정합니다. 이러한 작은 세부 사항을 과소평가하지 마십시오. 제대로 수행되지 않으면 사용자가 사용을 중단할 수 있습니다. 프로그래머는 사용자가 웹 경험에 빠지게 만들기 위해 세부 사항에 주의를 기울입니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!