初步认识ajax（个人整理）

通过使用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 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

 

 

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 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 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;
  }
}