Home >Web Front-end >JS Tutorial >Ajax introductory tutorial 30 minutes demonstration
Ajax introductory tutorial 30 minutes demonstration
- 云罗郡主Original
- 2019-01-25 13:15:362898browse
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>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;
?>3. Change to Ajax writing method!
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('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
}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)};
}
......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();
2. Send a request to the server
XHR.open("GET","handle.php",true);
XHR.send();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;
5. Respond to events - when can data be returned? onreadystatechange 事件 两个属性： readyState status
每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。
XHR.onreadystatechange=function(){
console.log(XHR.readyState)
console.log(XHR.responseText)
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!