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

Home

Web Front-end

JS Tutorial

Ajax introductory tutorial 30 minutes demonstration

云罗郡主

Jan 25, 2019 pm 01:15 PM

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 id="请输入姓名">请输入姓名：</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
        }

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;

Ajax introductory tutorial 30 minutes demonstration

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)

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Custom Google Search API Setup TutorialMar 04, 2025 am 01:06 AM

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

Example Colors JSON FileMar 03, 2025 am 12:35 AM

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

10 jQuery Syntax HighlightersMar 02, 2025 am 12:32 AM

Enhance Your Code Presentation: 10 Syntax Highlighters for Developers Sharing code snippets on your website or blog is a common practice for developers. Choosing the right syntax highlighter can significantly improve readability and visual appeal. T

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

10 JavaScript & jQuery MVC TutorialsMar 02, 2025 am 01:16 AM

This article presents a curated selection of over 10 tutorials on JavaScript and jQuery Model-View-Controller (MVC) frameworks, perfect for boosting your web development skills in the new year. These tutorials cover a range of topics, from foundatio

What is 'this' in JavaScript?Mar 04, 2025 am 01:15 AM

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

See all articles