집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 입문 튜토리얼 30분 데모

Ajax 입문 튜토리얼 30분 데모

云罗郡主원래의: 2019-01-25 13:15:362742검색

온라인이든 책이든 모든 튜토리얼에 있습니다. 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>请输入姓名：</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript css ajax html for 事件异步 innerHTML alert input phpstudy

성명：

이전 기사：js를 발전시키려면 어떤 책이나 튜토리얼을 읽어야 하나요?다음 기사：js를 발전시키려면 어떤 책이나 튜토리얼을 읽어야 하나요?