1. 云栖社区>
  2. PHP教程>
  3. 正文

Ajax原理介绍(结合php示例)

作者:用户 来源:互联网 时间:2017-12-01 17:21:22

ajaxphp原理结合介绍示例

Ajax原理介绍(结合php示例) - 摘要: 本文讲的是Ajax原理介绍(结合php示例),     Ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML),Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数

    Ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML),Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    传统的网页(不使用Ajax)如果需要更新内容,必须重新加载整个网页。
现在大部分网页都是使用ajax ,比如,我在百度输入Ajax的时候,下面会出现很多有关ajax的内容,这其中用到的就是ajax知识。还有新浪微博(在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新)、Google地图等等。
                                     百度中的ajax运用示例
Ajax原理介绍(结合php示例)-
         ajax是与服务器进行交互的,这里我们使用后台语言php进行演示,再演示之前需要配置php的环境,这里选用wamp 作为学习环境,wamp的安装包:
Ajax原理介绍(结合php示例)-
       这个安装方法,可以上网百度,这里暂不做介绍,但是需要注意的是:
        1.当你运行网页的时候,一定要保证服务器是开启的,即启动完成能够在任务栏的右下角看到这个图标即表示成功。
Ajax原理介绍(结合php示例)-
       2.php文件一定要放在配置的网站目录下,即www文件下(具体视你安装的情况而定)。
打开浏览器输入127.0.0.1查看显示的内容,如果是第一次安装,默认显示的应该是如下图片:
Ajax原理介绍(结合php示例)-
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属性值    //.是php中的拼接符合 相当于js中的+    echo $_GET['userName'].'欢迎你!';?>

界面展示:
Ajax原理介绍(结合php示例)-
需要注意:url地址栏:
Ajax原理介绍(结合php示例)-
当我提交数据之后:
Ajax原理介绍(结合php示例)-
url地址栏:
Ajax原理介绍(结合php示例)-
会发现在请求的页面后面多了我提交的内容即userName=Sugar以及pass=123 (多么隐私的信息都暴漏了)
利用调试工具,找到Netwrok ,会发现,其代表的含义:
Ajax原理介绍(结合php示例)-
我们再来看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
页面展示:
Ajax原理介绍(结合php示例)-
url地址栏:
Ajax原理介绍(结合php示例)-
提交数据之后,返回的页面是:
Ajax原理介绍(结合php示例)-

url地址栏:
Ajax原理介绍(结合php示例)-
会发现:用post提交数据,地址栏url中不会拼接提交的数据
Ajax原理介绍(结合php示例)-
通过对比:了解到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请求回来的数据';?>

提交数据之前
Ajax原理介绍(结合php示例)-
获取数据之后,实验过程观察页面并未刷新
Ajax原理介绍(结合php示例)-
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";    }?>

提交数据之前:
Ajax原理介绍(结合php示例)-
提交数据之后:
Ajax原理介绍(结合php示例)-
Ajax原理介绍(结合php示例)-

简单的介绍了一下ajax实现的原理,有不对的地方望大家指出,共同学习!

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , php , 原理 , 结合 , 介绍 示例 ,以便于您获取更多的相关知识。