通过使用ajax可以实现页面的部分动态化
ajax可以发送一个请求去服务端,而服务端则发送回一小段数据给客户端,这样就可以避免加载整个页面,因为很多时候页面只需要刷新某一部分的数据,而其他大部分体就不需要更新
ajax我用过的经验有两种,一种是js的ajax方法,一个是经过jQurey封装好的ajax方法,我想没有第三种吧。。
js的ajax使用流程:创建XMLHttpRequest对象 -> 对象向服务器进行请求 -> 服务器进行响应 ->客户端判断服务器的响应是否就绪
第一步:创建XMLHttpRequest对象
HXR = new XMLHttpRequest();
然而上面并不适用于IE5 和 IE6,所以对于这种浏览器需要用ActiveX 对象
HXR = new ActiveXObject("Microsoft.XMLHTTP");
因此我们在写第一步的时候可以先进行一下判断,判断是什么浏览,然后再进行对象的新建
var HXR; if(window.XMLHttpRequest){ HXR = new XMLHttpRequest();//IE7或以上的主流浏览器 } else{ HXR = new ActiveXObject("Microsoft.XMLHTTP");//IE5或6 }
第二步:发出请求
我们可以使用对象的open()和send()方法。
open(method,url,async)是规定请求类型(get,post),服务器的url,同步或者异步。
send(string)方法是放送请求,里面的参数只有方法是post才用到,因为get方法的请求参数已经在url里面了
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
get请求使用例子:
HXR.open('GET','server.php?name=sbb&id=1',true); HXR.send();
POST请求使用例子,如果需要添加请求信息,则要加入http表头
HXR.open('POST','server.php',true); HXR.setRequestHeader("Content-type","application/x-www-form-urlencoded"); HXR.send("name=sbb&id=1");
第三步:服务器进行相应
这个则需要自己进行编写,可以对传过来的数据进行判断而输出对应的数据,这里就不详细写了,写个简单例子
$data = $_REQUEST['name']; echo $data;
第四步:判断响应
请求发送到服务器之后,XMLHttpRequest 对象里的readyState 属性的改变的触发对象的onreadystatechange 事件
XMLHttpRequest 有三个重要属性readyState,status,onreadystatechange,
个人理解readyState是针对网页和服务端的连接,而进行的状态判断
status是针对服务端的判断,其中返回的数字是HTTP状态码,
当readyState改变就会触发onreadystatechange()事件
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
综上所述,如果onreadystatechange一触发,就会对两个状态码进行判断,如果符合,则表明响应就绪
HXR.onreadystatechange=function() { if (HXR.readyState==4 && HXR.status==200) { alert('响应就绪'); } }
响应就绪后,就要获取数据
可以使用根据数据使用XMLHttpRequest 对象的 responseText 或 responseXML 属性
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
document.getElementById('sbb').innerHTML = HXR.responseText
本人写的实例:
var HXR; if(window.XMLHttpRequest){ HXR = new XMLHttpRequest();//IE7或以上的主流浏览器 } else{ HXR = new ActiveXObject("Microsoft.XMLHTTP");//IE5或6 } HXR.open("GET","server.php?number="document.getElementById("search").value); HXR.send();
HXR.onreadystatechange = function(){
if(HXR.status==200 && HXR.readyState===4){
document.getElementById('sbb').value = HXR.responseText; } }