ajax学习笔记

其实ajax并不神秘，简而言之ajax就是一种可以避免页面刷新的情况下改变当前页面数据的一种技术。他改变了以前单一的浏览器发送请求，等待服务器回应的模式。转而实现了一种浏览器发送完请求之后，无需等待服务器回应浏览器依然可以做其他的处理动作。从架构上来讲就是将展示层和数据层分离，降低了耦合性。

最原始的实现Ajax效果的方法就是使用js。实现方法分三步：

第一步，实例化XMLHttpRequest（xhr）对象：

var xhr;

if(document.XMLHttpRequest){//创建XHR对象

xhr= new XMLHttpRequest();//创建本机对象

}else

{

xhr = new ActiveXobject("Microsoft.XMLHTTP");//创建ActiveX对象

}else{

alert("Can not use Ajax");

}

第二步，发送请求：

open(http_method,url,asynchronnous)(此方法有三种重载，这种重载的方法比较常用其他方法有需要的可以百度，这里就不在赘述)

xhr.open('GET','test.aspx?id=21',true);

send('');//执行服务器调用

第一个参数的就是给方法指定Http方法，主要是为了方便向服务器传递参数。一般用‘GET’和‘POST’当然这两种也是常用的（还有其他的这里不赘述），这两者的区别就是对参数安全性要求不同选择不同的参数。前者的传递的参数相对的安全性较低，数据量较小；后者则正好相反。这样说也许很明了，用户名密码的传递从考虑安全性的角度上讲我们首选post。虽然，数据量可能很小，但是数据量和安全性比起来他就显得渺小很多了。向上面的实例就是重写URL的方法将不重要的参数直接跟在URL的后面。

第三步，处理相应：

xhr.onreadystatechange=function(){

var ready = xhr.readyState;

if(ready==4)

{

parseCompletedResponse(xhr);//服务器将数据返回之后对数据处理的函数

}

};

readyState值包含：

0表示为初始化,

1表示正在加载,

2已加载,

3正在交互,

4完成；

在这里我们只需要判断状态是否为4即可。

以上就是最原始的ajax方法，可惜他并不像我们现在使用的那些ajax方法那样具有很强的兼容性。我之所以要写这些是向阐明一点不管任何所谓的库再怎么变化，其主要的部分是不变的。ajax并不是向我们想象中那么神秘，他其实就是和其他的库函数差不多。只要我们知道什么时候需要用怎么用他就好了，这也是他最主要的存在意义。