使用ajax编写异步查询

前几天，自己用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有哪些好处呢

1. 前后端分离
   在之前是使用php编写的文件，有一堆混在一起的编码，需要由php输出成为JavaScript，不方便查看和修改。现在前端页面的代码可以完全不考虑后端逻辑，只需要接收后端返回数据然后进行处理即可。
2. 维护工作简化
   之前查询结果的页面有两个，所以页面样式有所变动的话就需要同时更改两个文件，维护相对麻烦，现在在查询逻辑不变的情况下只需要维护一个首页文件即可。
3. 加载速度提高
   第一次打开页面的速度并没有多少变化，但是后面再次点击查询的时候只需获取后端返回的数据文件即可，所需文件大小相对之下要远小于重新加载一整个页面的大小。

来看看时间上的对比
正常查询

使用ajax

正常查询按照我原来的代码，是需要刷新一整个网页的，总的大小是43.8K，耗时180ms。使用ajax只需要接收服务器端返回的数据大小，这个文件的大小是427B，耗时只需10ms！是刷新整个网页的1/18！

但是也有缺点

1. 浏览器自带的“后退”功能对于在页面中进行的异步操作完全没有效果，因为这种“后退”是只能是后退到上一个静态的页面。
   
   浏览器中自带的“前进”、“后退”对于使用ajax操作无效
2. 在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);  //使用值