집 >웹 프론트엔드 >JS 튜토리얼 >AJAX를 사용하여 페이지 로그인 및 등록된 사용자 이름 확인을 구현하는 간단한 예

AJAX를 사용하여 페이지 로그인 및 등록된 사용자 이름 확인을 구현하는 간단한 예

亚连원래의: 2018-05-23 14:14:013543검색

이제 AJAX를 사용하여 페이지 로그인 및 등록된 사용자 이름 확인을 구현하는 간단한 예를 보여드리겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)의 약자로, 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다. 그 핵심에는 JavaScript 개체 XMLHttpRequest가 있습니다. Internet Explorer 5에서 처음 도입된 이 개체는 비동기 요청을 지원하는 기술입니다. 간단히 말해서 XMLHttpRequest를 사용하면 JavaScript를 사용하여 사용자를 차단하지 않고 서버에 요청하고 응답을 처리할 수 있습니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

등록할 때 등록 정보를 제출하고 몇 초 후에 페이지가 다시 로드되면 "사용자 이름이 사용되었습니다"라는 메시지 상자가 표시된다고 상상해 보세요. 따라서 여기서 AJAX를 사용하여 비동기 요청을 구현하면 페이지를 다시 로드하지 않고도 데이터베이스와 통신할 수 있습니다.

XMLHTTPRequest 개체 만들기

javascript를 사용하여 html 페이지에 XMLHTTPRequest 개체를 만들어 AJAX 비동기 요청을 구현합니다.

<span style="font-size:14px;">    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
      xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);
      xmlhttp.onreadystatechange = function ()
      {
        if (xmlhttp.readyState == 4)
        {
          if (xmlhttp.status == 200)
          {
            alert(xmlhttp.responseText);
          }
          else
          {
            alert("AJAX服务器返回错误！");
          }
        }
      }
      xmlhttp.send(); 


</span>

var xmlhttp = window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP ') ; //XMLHTTP 객체 생성, 호환성 고려

xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true) //서버의 GetDate1로 보내기 위해 "준비" .ashx 게시 요청(GET에 캐싱 문제가 있을 수 있음). 여기에는 아직 요청이 없습니다.

readyState == 4는 서버가 완료 데이터를 반환했음을 의미합니다. 2번(요청이 전송되었으며 처리 중임), 3번(응답의 데이터 일부를 사용할 수 있지만 서버가 응답 생성을 완료하지 않음)을 경험했을 수 있습니다.

참고:

Don (xmlhttp .readyState == 4) 보내기 전에 실행하는 것이 잘못되었다고 생각하면 xmlhttp.send()가 요청 보내기를 시작합니다. 이때 요청이 전송되기 시작하고 서버가 데이터를 반환할 때까지 기다리지 않고 실행이 계속되므로 차단되지 않고 인터페이스가 중단되지 않습니다. 이것이 AJAX에서 "비동기"라는 의미입니다.

AJAX encapsulation

실제 프로젝트 개발에서는 AJAX 비동기식 요청이 여러 곳에서 쓰이겠지만, 객체를 생성하는 코드가 너무 길어서 복사해서 붙여넣기도 귀찮고, 프로젝트 진행에도 영향을 미치게 됩니다. 코드를 이해하므로 AJAX를 캡슐화해야 합니다. 이를 js 함수 파일로 캡슐화하고 참조용으로 웹 페이지로 가져옵니다.

간단한 AJAX 캡슐화 코드:

<span style="font-family:Times New Roman;font-size:14px;">     function ajax(url,onsuccess,onfail)
    {
      var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
      xmlhttp.open("POST", url, true);
      xmlhttp.onreadystatechange = function ()
      {
        if (xmlhttp.readyState == 4)
        {
          if (xmlhttp.status == 200)
          {
            onsuccess(xmlhttp.responseText);//成功时逻辑操作
          }
          else
          {
            onfail(xmlhttp.status);//失败是逻辑操作
          }
        }
      }
      xmlhttp.send(); //这时才开始发送请求
    }</span>

캡슐화가 완료된 후 로그인 판단 코드 작성을 시작할 수 있습니다(저는 .net을 사용하고 있습니다).

먼저 HTML 페이지 login.htm 및 ashx 일반 핸들러 userhandle을 만듭니다. , 요청된 URL은 작업 매개변수를 전달하고 요청은 일반 핸들러에서 처리됩니다.

function Submit1_onclick() {
      var name = document.getElementById("name").value;
      var psw = document.getElementById("psw").value;
      if (psw != "" && name != "") { 
       //调用AJAX
       ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {
          if (resText == "fail") {
            alert("用户名或密码错误！");
            return false;
          }
          else {
            document.write(resText);
          }
        })
      }
      else {
        alert("请输入完整登陆信息！");
        return false;
      }
    }

일반 처리 프로그램에서 요청 작업을 받아 해당 쿼리를 판단 및 실행하고, 요청을 받은 후 프론트 페이지에서 해당 기능을 판단하고 실행합니다.

 public void login(HttpContext context)
    {
      userBLL ub = new userBLL（）；
      string userName = context.Request["userName"];
      string userPsw = context.Request["psw"];   
      bool b = ub.Login(userName, userPsw);//封装好的bll层方法，判断用户名密码是否正确
      if (b == true)
      {
        context.Session["Name"] = userName;
        context.Session["role"] = "user";
        context.Response.Write("success");
       }
      else
      {
        context.Response.Write("fail");
      }
    }

서버가 판단을 완료한 후 성공 여부를 클라이언트에 보냅니다. 이로써 AJAX 비동기 요청을 이용한 로그인이 완료되었습니다.

사용자 이름을 결정하기 위한 등록은 그냥 붙여넣겠습니다:

function check() {
      var userName = document.getElementById("Text1").value;
      if (userName == "" || userName == null) {
        document.getElementById("nameMeg").style.color = "red";
        document.getElementById("nameMeg").innerHTML = "用户名为6-10位英文或数字";
      }
      else { 
      ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) {
        if (resText == "forbid") {
          document.getElementById("nameMeg").style.color = "red";
          document.getElementById("nameMeg").innerHTML = "用户名含有非法词语";
        } else if (resText == "already have") {
          document.getElementById("nameMeg").style.color = "red";
          document.getElementById("nameMeg").innerHTML = "用户名已被使用";
        } else {
          document.getElementById("nameMeg").style.color = "green";
          document.getElementById("nameMeg").innerHTML = "可以使用";
        }
      })
      }
    }

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

AJAX를 사용하여 페이지 로그인 및 등록된 사용자 이름 확인을 구현하는 간단한 예

관련 기사