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