如何利用php+ajax动态交换数据

最新推荐文章于 2024-08-21 09:01:41 发布

_acme_

最新推荐文章于 2024-08-21 09:01:41 发布

阅读量1.5k

点赞数

分类专栏： php 文章标签： php ajax 数据动态交换数据表单

本文链接：https://blog.csdn.net/qq_18297675/article/details/51861730

版权

php 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

==> 学习汇总（持续更新）
==> 从零搭建后端基础设施系列（一）-- 背景介绍

ajax可以实现页面无刷新更新数据，因为它不再是通过表单提交数据，而是利用ajax引擎来跟服务器动态交换数据.

步骤如下:
1.创建一个ajax引擎对象

2.通过ajax连接到服务器

3.服务器返回数据到ajax处理

4.通过ajax再返回到客户端

这样就能实现无刷新数据交换.其原理是什么呢？其实很简单，看下面两张图对比一下就能知道了：
传统表单提交:

ajax引擎提交:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZjGhRs2-1573896522736)(https://img-blog.csdn.net/20160708155854736)]

具体代码如下:
JS代码:

/**
 * @function 利用ajax动态交换数据(Text/HTML格式)
 * @param url   要提交请求的页面
 * @param jsonData  要提交的数据,利用Json传递
 * @param getMsg  成功后执行的函数
 */
function ajaxText(url,jsonData,getMsg)
{
    //创建Ajax对象,ActiveXObject兼容IE5,6
    var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    //打开请求
    oAjax.open('POST',url,true);//方法,URL,异步传输
    //发送请求
    var data = '';
    for(var d in jsonData)   //拼装数据
        data += (d + '=' +jsonData[d]);
    oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    oAjax.send(data);
    //接收返回,当服务器有东西返回时触发
    oAjax.onreadystatechange = function ()
    {
        if(oAjax.readyState == 4 && oAjax.status == 200)
        {
            if(getMsg)getMsg(oAjax.responseText);
        }
    }
}

php代码:

$username = $_POST['username'];  //获取用户名
if(empty($username))
    echo '请输入用户名';
else if($username == 'acme')
    echo '用户名已被注册';
else
    echo '用户名可用';

如果是表单提交的话，echo一般是在php页面被输出的，可见的，但是通过ajax，它会直接输出到ajax的接收数据的回调函数中。