版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lzwgood/article/details/55504920
前几天,自己用ajax将前端的查询页面重新写了一下,使用异步查询来操作。
服务器端使用的是PHP
var xhr;
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
}
else{// IE6, IE5 浏览器执行代码
xhr=new ActiveXObject("Microsoft.XMLHTTP");}
首先建立一个XMLHttpRequest对象,这里有一个兼容性的处理。之前就被ie的兼容问题坑过。。
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&((xhr.status>=200&& xhr.status<300) || xhr.status==304)&&xhr.responseText.slice(0,4)!='null'){
showmeeting(xhr.responseText);
}
elseif(xhr.readyState==4&&xhr.status!=200){alert('请求失败:'+xhr.status);}
}
为onreadystatechange事件添加一个函数,每一次readyState发生变化,都会触发一次onreadystatechange事件,当readyState=4且status=200时,就表示异步请求已经成功的接收了服务器返回来的所有结果。
var cdate = document.getElementById("date").value;
xhr.open('get','m.php?date='+cdate,true);
xhr.send();
这里是使用GET方法来传递数据,我一开始是使用POST方法的。但是不知道为什么服务器端$_POST一直获取不了值,最后耗了好久作罢。使用GET就一下子就成功了。这里也贴出POST方法,请大神可以帮忙看看问题在哪
\\post方法
xhr.open('post','m.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('date='+cdate);
使用ajax有哪些好处呢
- 前后端分离
在之前是使用php编写的文件,有一堆混在一起的编码,需要由php输出成为JavaScript,不方便查看和修改。现在前端页面的代码可以完全不考虑后端逻辑,只需要接收后端返回数据然后进行处理即可。 - 维护工作简化
之前查询结果的页面有两个,所以页面样式有所变动的话就需要同时更改两个文件,维护相对麻烦,现在在查询逻辑不变的情况下只需要维护一个首页文件即可。 - 加载速度提高
第一次打开页面的速度并没有多少变化,但是后面再次点击查询的时候只需获取后端返回的数据文件即可,所需文件大小相对之下要远小于重新加载一整个页面的大小。
来看看时间上的对比
正常查询
使用ajax
正常查询按照我原来的代码,是需要刷新一整个网页的,总的大小是43.8K,耗时180ms。使用ajax只需要接收服务器端返回的数据大小,这个文件的大小是427B,耗时只需10ms!是刷新整个网页的1/18!
但是也有缺点
- 浏览器自带的“后退”功能对于在页面中进行的异步操作完全没有效果,因为这种“后退”是只能是后退到上一个静态的页面。
浏览器中自带的“前进”、“后退”对于使用ajax操作无效 - 在php中可以直接使用echo将变量值直接变成字符串的形式,可以直接输出一个静态的网页。现在使用ajax进行前后端分离之后需要使用‘data-’属性来将对应的信息“存储”在div标签中。这个主要是JavaScript的变量的时效性问题。
原来
echo " document.getElementById(\"name\").value= ' ".$value['name']." ' "; //直接赋值
输出网页会变成
document.getElementById("name").value='张三';
现在
element.setAttribute('data-name',jsonData[i].name); //存储值
document.getElementById("name").value=this.getAttribute('data-name); //使用值