집 > 기사 > 웹 프론트엔드 > Ajax는 사용자 이름 등록의 전체 프로세스를 실현합니다.

Ajax는 사용자 이름 등록의 전체 프로세스를 실현합니다.

php中世界最好的语言원래의: 2018-04-03 11:39:463152검색

이번에는 Ajax에 사용자 이름을 등록하는 전체 과정을 알려드리겠습니다. 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('Microsoft.XMLHTTP');
      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 .XMLHT TP '); //XMLHTTP 객체 생성, 호환성 고려

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

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

참고:

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

AJAX encapsulation

실제 프로젝트 개발에서는 AJAX 비동기 요청이 여러 곳에서 쓰이겠지만, create object 코드가 너무 길어서 복사해서 붙여넣기가 힘들고, 프로젝트에도 영향을 미치게 됩니다. 코드를 이해해야 하므로 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('Microsoft.XMLHTTP');
      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 = "可以使用";
        }
      })
      }
    }

이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목해 주세요. PHP 중국어 웹사이트에서!