Ajax full data plus code

What is Ajax?

A: Ajax is a technology that can update some web pages and interact with the background without loading the whole web page.

The advantages of Ajax?

Answer: can maintain data without updating the entire page. This allows Web programs to respond more quickly to user actions without loading unnecessary data.

The disadvantages of Ajax?

Answer: it may damage the browser's back and bookmark functions.

How does Ajax work?

Answer: in the browser, we provide a javascript core class -- XMLHttpRequest, which can help us send HTTP requests and receive Server responses.

Ajax learning objects?

Answer: learn the properties and methods of the XMLHttpRequest core class.

Case 1: GET of Ajax

demo1.html

<!DOCTYPE html>
<html lang="zh" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            //User name: < input type = "text" name = "name" value = "" ></span>
        </p>
    </body>
    <script>
        //Get DOM object
        var ipt = document.getElementsByName('name')[0];
        ipt.onblur = function(){
            var xhr = new XMLHttpRequest();
            xhr.open('get','demo1.php?name='+ipt.value,true);
            console.log(ipt.value);
            xhr.send(null);

            var sp = document.getElementById('rep');
            xhr.onreadystatechange = function(){
                //Judge request status
                if(this.readyState == 4){
                    if(this.responseText == 1) {
                        sp.innerHTML = 'Yes';
                    } else {
                        sp.innerHTML = 'No';
                    }
                }
            }
        }
    </script>
</html>

demo1.php

<?php
    if($_GET['name'] == 'jack') {
        echo 1;
    } else {
        echo 0;
    }
 ?>

Case 2: POST of Ajax

demo2.html

<!DOCTYPE html>
<html lang="zh" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            //User name: < input type = "text" name = "name" value = "" ></span>
        </p>
    </body>
    <script>
        //Get DOM object
        var ipt = document.getElementsByName('name')[0];
        ipt.onblur = function(){
            var xhr = new XMLHttpRequest();
            xhr.open('post','demo4.php',true);
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            var data = 'name='+this.value;
            xhr.send(data);

            var sp = document.getElementById('rep');
            xhr.onreadystatechange = function(){
                //Judge request status
                if(this.readyState == 4){
                    if(this.responseText == 1) {
                        sp.innerHTML = 'Yes';
                    } else {
                        sp.innerHTML = 'No';
                    }
                }
            }
        }
    </script>
</html>

demo2.php

<?php
    if($_POST['name'] == 'jack') {
        echo 1;
    } else {
        echo 0;
    }
 ?>

Posted by intercampus on Mon, 09 Dec 2019 01:02:09 -0800

Programmer Group

Ajax full data plus code

Hot Keywords