Ajax 입문 튜토리얼 30분 데모-JS 튜토리얼-php.cn

请输入姓名：

집

웹 프론트엔드

JS 튜토리얼

Ajax 입문 튜토리얼 30분 데모

云罗郡主

Jan 25, 2019 pm 01:15 PM

온라인이든 책이든 모든 튜토리얼에 있습니다. Ajax를 배우려면 html+css+javascript를 미리 배워야 한다고 하더군요. 그러다가 많은 프론트엔드 초보자들이 배우기 시작했지만 오랫동안 예제를 따라해봐도 반응이 없다는 것을 알게 되었고, 결국 과감히 포기~ [추천 튜토리얼 :AJAX 영상 튜토리얼]

사실.. 백엔드 환경을 아직 설정하지 않았네요~

1 먼저 백엔드 환경을 설정해 주셔야겠죠? 예를 들어 php

프론트엔드 초보자인 우리가 어떻게 PHP를 집중적으로 배울 수 있을 정도로 많은 에너지와 시간을 가질 수 있을까요? 따라서 PHP 환경인 phpstudy를 구축하는 것을 권장합니다. 다음 단계에서 설치만 하면 괜찮습니다.

D 드라이브에 PHPStudy를 설치했으므로 D 드라이브로 가서 phpstudy 폴더에 있는 WWW 폴더를 찾으세요

WWW 폴더는 우리 컴퓨터의 서버에 해당합니다. 앞으로 작성될 모든 내용은 WWW에 저장될 것입니다. 폴더 중간.

WWW 폴더 아래에 index.html과 handler.php라는 두 개의 파일을 만듭니다.

이를 테스트하고 새로 생성된 index.html에 일부 코드를 작성해 보겠습니다. 브라우저를 열고 localhost를 입력한 후 Enter 키를 누르세요. 방금 작성한 웹 페이지가 열리면 성공적으로 구축되었음을 의미합니다. 실패하면 포트 충돌이거나 phpstudy가 실행되지 않을 수 있습니다.

2. PHP로 간단한 백엔드 애플리케이션을 작성해 보겠습니다~

index.html
<body>
<form action="index.html" method="GET">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form> 
</body>

로그인 후 복사

폼을 얼마나 잘 배웠는지 모르니 몇 마디만 말씀드리겠습니다. GET은 우리가 사용하려는 전송 방법을 나타내고, 해당하는 것은 POST입니다.

입력 태그의 id는 label 태그의 for 속성에 해당합니다.

입력 태그의 name 속성은 나중에 PHP에서 사용됩니다

handle.php

<meta charset="utf-8">
<!--其实我的这个写法有点取巧了,先凑合着看-->
<?php 
$student=array(
    array("name"=>"张三","sex"=>"男","age"=>"20"),
    array("name"=>"李丽","sex"=>"女","age"=>"19"),
    array("name"=>"王二","sex"=>"男","age"=>"21")
    );
$str="没有找到这个学生";
$name=$_GET["name"];
foreach ($student as $value) {
    if($value["name"]==$name){
        $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
        break;
    };
};
echo $str;
 ?>

로그인 후 복사

3. Ajax 글쓰기로 바꿔보세요!

index.html

html:

<h1 id="请输入姓名">请输入姓名：</h1>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>

로그인 후 복사

javascript:

function submit(){
        
        var name=document.getElementById(&#39;name&#39;).value
               var text=document.getElementById(&#39;text&#39;)
        var XHR=new XMLHttpRequest();
               XHR.open("GET","handle.php?name="+name);
               XHRsend();
               XHR.onreadystatechange=function(){
            text.innerHTML=XHR.responseText
        }

로그인 후 복사

참고:

누군가 소스 코드의 text.innerHTML=XHR.responseText를 경고(XHR.responseTXT)로 변경하면 다음 명령을 찾을 수 있습니다. 여러 번 실행됩니다. 이때 코드를 약간 변경해야 합니다. (이유는 나중에 기사에서 찾아볼 수 있습니다.)

   ......
    XHR.onreadystatechange=function(){
             if(XHR.readyState==4){alert(XHR.responseText)};
                                     }
   ......

로그인 후 복사

4. 예제가 성공적이므로 본격적으로 학습을 시작하겠습니다~

Ajax의 장점

첫 번째 예에서는 제출 버튼을 통해 PHP 백그라운드에 제출된 다음 데이터가 처리됩니다.

이 작업에는 전체 데이터 페이지를 동시에 백그라운드에 제출해야 한다는 단점이 있습니다.

예를 들어주세요

웹사이트에 등록하고 닉네임, 비밀번호, 성별, 나이 및 기타 정보를 입력하고 제출하면 배경에 닉네임이 사용되었다고 표시됩니다. 확인을 변경하겠습니다. 닉네임, 비밀번호, 성별, 나이 등을 모두 다시 작성하여 다시 제출하면 해당 닉네임이 계속 사용중이라고 나옵니다. 이번에는 별 문제 없을 거라 생각하면서 아주 아주 LOW 이름을 선택하셨죠? 결과가 제출된 후 백엔드는 비밀번호가 너무 짧으므로 정보를 다시 입력해야 한다고 알려줍니다. 자~ 포기하세요!

Ajax 기술을 사용한다면 어떨까요? 데이터를 하나씩 백엔드에 제출할 수도 있고, 언제 어디서나 제출할 수도 있습니다. 예를 들어 닉네임을 입력하면 백엔드에서 닉네임이 사용되었다고 즉시 알려줍니다. 변경하면 됩니다~.

AJAX 사용

1. AJAX 만들기

  var XHR=new XMLHttpRequest();

로그인 후 복사

2. 서버에 요청 보내기

XHR.open("GET","handle.php",true);
XHR.send();

로그인 후 복사

open에는 데이터 전송 방법, 파일 전송, 비동기 여부

전송 방법이 POST인 경우 때가 되면 send()를 사용하게 됩니다. GET 방식이라면 send에 null을 쓰는 걸 추천합니다

3. GET vs POST

한 문장으로 말하면 get이 더 빠르고, post가 더 강해요

4. 서버 응답—— 값을 전달했으니 뭔가를 다시 전달해야겠죠?

XHR.responseText;
XHR.responseXML;

로그인 후 복사

5. 이벤트에 응답 - 데이터는 언제 반환될 수 있나요? Ajax 입문 튜토리얼 30분 데모

onreadystatechange 事件
两个属性：
readyState
status

로그인 후 복사

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

로그인 후 복사

XHR.onreadystatechange=function(){
                console.log(XHR.readyState)
                console.log(XHR.responseText)

로그인 후 복사

Ajax 입문 튜토리얼 30분 데모

위 내용은 Ajax 입문 튜토리얼 30분 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7549

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.