Ajax原理介绍（结合php示例）

最新推荐文章于 2024-08-14 09:01:55 发布

diligentkong

最新推荐文章于 2024-08-14 09:01:55 发布

阅读量4.7k

点赞数 5

分类专栏： Ajax 文章标签： ajax 异步 php

本文链接：https://blog.csdn.net/diligentkong/article/details/72833577

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

    Ajax = Asynchronous JavaScript and XML （异步的JavaScript和XML），Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
    传统的网页（不使用Ajax）如果需要更新内容，必须重新加载整个网页。
现在大部分网页都是使用ajax ，比如，我在百度输入Ajax的时候，下面会出现很多有关ajax的内容，这其中用到的就是ajax知识。还有新浪微博（在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新）、Google地图等等。
                                     百度中的ajax运用示例
这里写图片描述
         ajax是与服务器进行交互的，这里我们使用后台语言php进行演示，再演示之前需要配置php的环境，这里选用wamp 作为学习环境，wamp的安装包：

       这个安装方法，可以上网百度，这里暂不做介绍，但是需要注意的是：
        1.当你运行网页的时候，一定要保证服务器是开启的，即启动完成能够在任务栏的右下角看到这个图标即表示成功。
这里写图片描述
       2.php文件一定要放在配置的网站目录下，即www文件下(具体视你安装的情况而定)。
打开浏览器输入127.0.0.1查看显示的内容,如果是第一次安装,默认显示的应该是如下图片：

127.0.0.1含义: 127.0.0.1是回送地址，指本地机，一般用来测试使用。
在进入正题之前，我们还需要了解浏览器是如何与服务器进行通信的。

浏览器与服务器通信遵循HTTP协议

浏览器向服务器提交数据的两种方式是post 和get方式。
在这里我们用form表单元素演示get 与post方式。
Get方式，get.html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get方式向服务器提交数据</title>

</head>
<body>
<h1>get请求</h1>
   <form action="get.php" method="get">
        <input type="text" name="userName" placeholder="请输入姓名...">
        <br>
        <input type="password" name="pass" placeholder="请输入密码">
        <br>
        <input type="submit" value="提交">
   </form>

</body>
</html>

get.php

<?php
    // 规范编码格式 utf-8 
    header('content-type:text/html;charset=utf-8');
    //echo '';输出语句 
    //$_GET 是php中定义的全局变量，userName是input中的name属性值 name="userName"
    //.是php中的拼接符合 相当于js中的+
    echo $_GET['userName'].'欢迎你！';

?>

界面展示：
这里写图片描述
需要注意：url地址栏：

当我提交数据之后:

url地址栏：

会发现在请求的页面后面多了我提交的内容即userName=Sugar以及pass=123 (多么隐私的信息都暴漏了)
利用调试工具，找到Netwrok ，会发现，其代表的含义：
这里写图片描述
我们再来看post方法：
post.html （只是把请求的页面action改为post.php 请求方法method改为post）

<form action="post.php" method="post">
        <input type="text" name="userName" placeholder="请输入姓名...">
        <br>
        <input type="password" name="pass" placeholder="请输入密码">
        <br>
        <input type="submit" value="提交">
   </form>

post.php页面

<?php
    header('content-type:text/html;charset=utf-8');
    echo $_POST['userName'].'你好！你的密码是'.$_POST['pass'];
?>

注意：请求方法是post 方法，所以php页面的全局变量用的是$_POST
页面展示：
这里写图片描述
url地址栏：

提交数据之后，返回的页面是：

url地址栏：
这里写图片描述
会发现：用post提交数据，地址栏url中不会拼接提交的数据

通过对比：了解到get与post提交数据的方式：
    get提交数据，会把提交的数据拼接在url之后，其他人可以看到
    post提交数据，在url中看不到，但仅仅也比get提交安全一点点，因为利用抓包工具还是可以查看提交的数据的（这个自行百度了解）
    在每次提交数据的时候，用调试工具查看时，会发现，不管是get还是post方式，在NETWORK ->Header中都会有请求头、响应头、提交的数据与请求的地址url 、请求方法、以及状态码。
    这是因为浏览器向服务器请求数据，服务器给浏览器返回数据，这之间是遵循HTTP协议的。一个完整的HTTP请求有两部分组成：请求报文(浏览器发出) 响应报文(服务器接收到请求以后，返回给浏览器的)

前面铺垫了辣么多，正式进入正题：
Ajax通过与后台服务器通信，实现异步刷新，遵循的也是HTTP协议。回想一下一个完整的http请求包括：
（1）请求的网址url，方法：get/post
（2）提交请求内容数据，请求主体等
（3）接收响应的内容
那么Ajax实现异步更新数据的方式也应该是首先发出http请求（请求报文），这包括
请求的url，请求的方法，把请求发出去
接收http请求(响应报文)：通过注册事件的方式接收返回的值
完整的描述一下，ajax的工作过程
1. 创建XMLHTTPRequest对象
2. 设置请求的url等参数
3. 发送请求
4. 注册事件
5. 在注册事件中获取返回的内容，并修改页面显示，实现局部刷新
原理知道了，实践一下吧：（还是通过get和post方式）
get_ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get方式</title>

</head>
<body>
    <h1>使用get方式发送数据</h1>
    <input type="text"  name="content" class="con"></input>
    <input type="button" value="提交" id="btn"></input>

</body>
</html>
<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#btn').onclick= function(){
        // 发送ajax请求的5个步骤
        //1.创建异步对象
        var ajax = new XMLHttpRequest();

        //2.设置请求的url等参数
        /*参数1：请求的方法
        参数2：请求的url ，get提交的数据是直接追加在url后面的
        格式为xxx.php?xxx=xxx
        这里动态传递参数
        getAjax.php?content='+document.querySelector('.con').value
        */

        ajax.open('get','getAjax.php?content='+document.querySelector('.con').value);
        //3.发送请求
        ajax.send();
        //4.注册事件
        ajax.onreadystatechange = function(){
            // 为了保证数据完整的回来，我们一般会判断两个值
            if (ajax.readyState ==4 && ajax.status==200) {
                // 如果能够进入这个判断，说明请求的页面存在，且返回数据
                //5.在注册事件中 获取返回的内容，并修改页面的显示
                // 数据是保存在异步对象的属性中
                console.log(ajax.responseText);
                document.querySelector('h1').innerHTML = ajax.responseText;
            };

        }

    }
</script>

get_ajax.php

<?php
        header('content-type:text/html;charset=utf-8');
        echo $_GET['content'].'我是通过ajax请求回来的数据';

?>

提交数据之前
这里写图片描述
获取数据之后，实验过程观察页面并未刷新

post_ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post方式发送数据</title>

</head>
<body>
    <h1>注册名字</h1>
    <input type="text" name="userName" id="btnName"><label id="tishi" style="display:none"></label>

</body>
</html>
<script>

    //绑定失去焦点事件
    document.querySelector('#btnName').onblur=function(){
      // 发送ajax请求到服务器
      //1.创建异步对象
      var ajax = new XMLHttpRequest();
      //2.设置请求的url等参数
      ajax.open('post','post_ajax.php');
      /*如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：*/
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // 3.发送请求
      ajax.send('Name='+document.querySelector('#btnName').value);

      // 4.注册事件
      ajax.onreadystatechange = function(){
        if (ajax.readyState ==4&&ajax.status==200) {
            // 5.在注册事件中接收返回的内容并修改数据
            console.log(ajax.responseText);
            var show = document.querySelector('#tishi');
                show.style.display='block';
            if (ajax.responseText =="exist") {

                show.innerHTML='该用户已经注册了！'

            } else{
                show.innerHTML='你可以使用该名字！'
            }
        }
      };

    }
</script>

post_ajax.php

<?php
    header('content-type:text/html;charset=utf-8');
    $name=$_POST['Name'];


    // 准备一个数据 模拟已经存在的用户
    $nameArray = array('jack','kong','rose','ice');

    // 检验是否存在，并且接受返回值
    $result=in_array($name, $nameArray);
    // 通过if else返回不同的值给浏览器
    if($result){
        echo "exist";
    } else{
        echo "not exist";
    }

?>