==> 学习汇总(持续更新)
==> 从零搭建后端基础设施系列(一)-- 背景介绍
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的接收数据的回调函数中。