온라인이든 책이든 모든 튜토리얼에 있습니다. 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>
<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; ?>
<h1>请输入姓名:</h1> <input type="text" id="name"> <button onclick="submit()">提交</button> <div id="text"></div>
function submit(){ var name=document.getElementById('name').value var text=document.getElementById('text') var XHR=new XMLHttpRequest(); XHR.open("GET","handle.php?name="+name); XHRsend(); XHR.onreadystatechange=function(){ text.innerHTML=XHR.responseText }
...... XHR.onreadystatechange=function(){ if(XHR.readyState==4){alert(XHR.responseText)}; } ......
var XHR=new XMLHttpRequest();
XHR.open("GET","handle.php",true); XHR.send();
XHR.responseText; XHR.responseXML;
5. 이벤트에 응답 - 데이터는 언제 반환될 수 있나요?
onreadystatechange 事件 两个属性: readyState status
每当 readyState 改变时,就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。
XHR.onreadystatechange=function(){ console.log(XHR.readyState) console.log(XHR.responseText)
위 내용은 Ajax 입문 튜토리얼 30분 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!