Ajax完整资料加代码

最新推荐文章于 2021-08-14 17:27:52 发布

weixin_34245749

最新推荐文章于 2021-08-14 17:27:52 发布

阅读量80

点赞数

文章标签： php javascript ViewUI

原文链接：https://yq.aliyun.com/articles/689263

版权

什么是Ajax？

答：Ajax是一种无需加载整个网页，就能够更新部分网页，与后台交互的技术。

Ajax的优点？

答：能够在不更新整个页面的前提下，维护数据。这使得Web程序可以更快速的回应用户的动作，而无需加载不必要的数据。

Ajax的缺点？

答：可能会破坏浏览器的后退和加入收藏书签等功能。

Ajax实现原理？

答：在浏览器中，提供了一个javascript的核心类--XMLHttpRequest，该类提供的方法可以帮我们发送HTTP请求，并接收Server的响应。

Ajax学习对象？

答：学习XMLHttpRequest核心类的属性和方法。

案例一：Ajax之GET

demo1.html

<!DOCTYPE html>
<html lang="zh" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            用户名:<input type="text" name="name" value=""><span id='rep'></span>
        </p>
    </body>
    <script>
        //获取DOM对象
        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(){
                //判断请求状态
                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;
    }
 ?>

案例二：Ajax之POST

demo2.html

<!DOCTYPE html>
<html lang="zh" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            用户名:<input type="text" name="name" value=""><span id='rep'></span>
        </p>
    </body>
    <script>
        //获取DOM对象
        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(){
                //判断请求状态
                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;
    }
 ?>

案例三 jQuery之Ajax实现方法

demo3.html

<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="./jq.js"></script>
    </head>
    <body>
        <input type="text" name="name" value="" />
    </body>
</html>
<script type="text/javascript">
    $('input:text').mouseout(function(){
        var data ={
            'name':this.value
        }
        console.log(data);
        $.POST/GET('demo3.php',data,function(res){
            if(res == 1) {
                console.log('Yes');
            } else {
                console.log('No');
            }
        });
    });
</script>

 ?>

demo3.php

<?php
    echo $_GET/POST['name'] =='jack'?1:0;
?>

weixin_34245749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax完整资料加代码

什么是Ajax？答：Ajax是一种无需加载整个网页，就能够更新部分网页，与后台交互的技术。Ajax的优点？答：能够在不更新整个页面的前提下，维护数据。这使得Web程序可以更快速的回应用户的动作，而无需加载不必要的数据。Ajax的缺点？答：可能会破坏浏览器的后退和加入收藏书签等功能。...
复制链接

扫一扫