Ajax introductory tutorial 30 minutes demonstration-JS Tutorial-php.cn

Ajax introductory tutorial 30 minutes demonstration

云罗郡主

Release： 2019-01-25 13:16:13

Original

2741 people have browsed it

In all tutorials, whether online or in books. It is said that if you want to learn ajax, you need to learn html css javascript in advance. Then many front-end beginners started to learn, but found that there was no response after writing for a long time according to the example, and finally gave up decisively~ [Recommended tutorial: AJAX Video Tutorial】

Actually...you have not set up a backend environment, dear~

1. Set up a backend environment first, right? For example, php

For us front-end beginners, how can we have so much energy and time to learn PHP intensively, right? Therefore, it is recommended to build a PHP environment: phpstudy. Just install it in the next step and it will be OK.

I installed PHPStudy to the D drive, so go to the D drive and find the WWW folder in the phpstudy folder.

The WWW folder is equivalent to the server on our computer. All future writing Things, put them all into the WWW folder.

Create two files under our WWW folder, index.html and handle.php

Let us test it and write some code in the newly created index.html. Open the browser, enter localhost and hit Enter. If you can open the web page you just wrote, it means we have successfully built it. If it fails, it may be a port conflict, or phpstudy may not be running. Check it yourself. Check and debug it

2. Let’s write a simple backend application in 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>

Copy after login

I don’t know how you learned the form, so I will say a few words: GET means we want to use The transmission method corresponds to POST; the id in the

input tag corresponds to the for attribute in the label tag; the name attribute in the

input tag will be used with PHP later. ;

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;
 ?>

Copy after login

3. Change to Ajax writing method!

index.html

html:

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

Copy after login

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
        }

Copy after login

Note:

If someone puts text. Change innerHTML=XHR.responseText to alert(XHR.responseTXT), you will find that the command will be executed multiple times. At this time, it is necessary to change the code slightly: (for the reason, you will find it later in the article)

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

Copy after login

4. The example has been successful, so let’s officially enter the study~

The advantage of ajax

In our first example, it is submitted to the php background through the submit button, and then the data is processed.

This operation has a drawback, which is that a whole page of data needs to be submitted to the background at the same time.

For example

If we register on a website and fill in the nickname, password, gender, age and other information, after submitting it, the background will tell you that the nickname has been used, OK we will Nickname, password, gender, age, etc., are all rewritten. When you submit it again, you will be told that the nickname is still in use. At this time, you chose a very, very LOW name, thinking to yourself, there won't be any problems this time, right? After the results are submitted, the backend tells you that your password is too short and you need to fill in the information again. Well~ give up!

What if you use ajax technology? We can submit the data to the backend one by one, or submit it anytime and anywhere. For example, after you fill in your nickname, the backend immediately tells you that your nickname is used, OK, just change it~.

Use of AJAX

1. Create AJAX

  var XHR=new XMLHttpRequest();

Copy after login

2. Send a request to the server

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

Copy after login

open has three parameters, which are data transmission methods , transfer files, whether asynchronously

When our transmission method is POST, we will use send(). If it is GET method, it is recommended to write the parameter null in send

3 .GET vs POST

In a word: get is faster, post is stronger

4. Server response——You passed the value, so you have to pass something back, right?

XHR.responseText;
XHR.responseXML;

Copy after login

Ajax introductory tutorial 30 minutes demonstration

5. Respond to events - when can data be returned?

onreadystatechange 事件
两个属性：
readyState
status

Copy after login

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

Copy after login

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

Copy after login

Ajax introductory tutorial 30 minutes demonstration

The above is the detailed content of Ajax introductory tutorial 30 minutes demonstration. For more information, please follow other related articles on the PHP Chinese website!