Ajax 기초 및 등록 강좌

Ajax 는 Asynchronous JavaScript and XML 의 줄 임 말이다.
Ajax 의 장점:
장점:서버 의 부담 을 줄 이 고 필요 에 따라 데 이 터 를 추출 하여 불필요 한 요청 을 최대한 줄인다.
부분 적 으로 페이지 를 새로 고침 하여 사용자 의 심리 와 실제 대기 시간 을 줄 이 고 더 좋 은 사용자 체험 을 가 져 옵 니 다.
xml 기반 표준화 및 광범 위 한 지원,플러그 인 설치 등 필요 없 음
페이지 와 데이터 의 분 리 를 더욱 촉진 하 다.
Ajax 는 다음 기술 을 포함 합 니 다:
웹 표준(standards-based presentation)XHTML+CSS 표시 기반;
DOM(Document Object Model)을 사용 하여 동적 디 스 플레이 와 상호작용 을 합 니 다.
XML 과 XSLT 를 사용 하여 데이터 교환 및 관련 작업 을 진행 합 니 다.
XML HttpRequest 를 사용 하여 비동기 데이터 조회,검색 하기;
자 바스 크 립 트 를 사용 하여 모든 것 을 연결 합 니 다.　　
즉,Ajax 의 가장 큰 특징 은 동적 으로 갱신 되 지 않 는 것 을 실현 할 수 있다 는 것 이다.
Ajax 사용:
예:
데이터베이스 에 있 는 표:

클릭 하여 사용자 이름 이 사용 가능 한 지 확인 하기:
홈 페이지 코드:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
  </head>
  <body>
           ：<input type="text" id="zhang" />
    <span id="tishi"></span>
  </body>
</html>
<script>
  //        
  $("#zhang").blur(function(){
    //1   
    var zhang = $(this).val();
    //val      、   
    //2              
    //  Ajax
    $.ajax({
      type:"POST",
      //    
      url:"chuli.php",
      //     php  （    ）
      data:{yhm:zhang},
      // zhang  yhm，   ，   json
      //               ，       
      dataType:"TEXT",
      //         :TEXT    JSON,JSON，XML，      
      success:function(data){
        //    
//        data     
        //          
        if(data==0)
        {
          //   0
          $("#tishi").text("     0；  ！");
          $("#tishi").css("color","green");
        }
        else
        {
          $("#tishi").text("       ；   ！");
          $("#tishi").css("color","brown");
        }
      }
    });
    //3    
  })
</script>

다음 처리 페이지:


<?php
$zhang = $_POST["yhm"];
//  
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = '{$zhang}'";
$arr = $db->Query($sql);
echo $arr[0][0];
//         
?>

그림:
존재 하 는 사용자 이름 입력:

존재 하지 않 는 사용자 이름 입력:

로그 인
페이지 에 로그 인 할 코드:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>    </h1>
<div>  <input type="text" id="zhang"/></div>
<div>  <input type="text" id="mi"/></div>
<input type="button" id="btn" value="  "/>
</body>
</html>
<script>
  $("#btn").click(function(){
    //1   
    var zhang = $("#zhang").val();
    var mi = $("#mi").val();
    //2    
    $.ajax({
      url:"drcl.php",
      data:{zhang:zhang,mi:mi},
      type:"POST",
      dataType:"TEXT",
      success:function (data) {
        //    
        //     
        if(data=="ok")
        {
          window.location.href = "zym.php";
        }
        else
        {
          alert("        ");
        }
      }
    });
    //  
  })
</script>

다음은 처리 페이지 에 로그 인 합 니 다:


<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//  
$sql = "select mi from mydb WHERE zhang = '{$zhang}'";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
  echo "ok";
}
else
  {
    echo "no";
  }
?>

그림 을 보 세 요.입력 이 잘못 되면 이 페이지 에서 힌트 를 드 립 니 다.

입력 한 것 이 맞 으 면 점프:

Ajax 로 로그 인 하 는 장점 은 오 류 를 알 릴 때 다른 페이지 로 뛰 지 않 아 도 된다 는 것 이다.
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Ajax 기초 와 등록 강좌 입 니 다.여러분 께 도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript Ajax에 대한 간단한 연습

저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Ajax 기초 및 등록 강좌

좋은 웹페이지 즐겨찾기