Ajax学习重点总结

1、什么是AJAX

AJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML）。

AJAX是在不重新加载整个页面的情况下，后台与服务器交换数据并更新部分网页的技术。

通过AJAX，javascript无需等待服务器的响应，而是在等待服务器时执行其他脚本，并当响应就绪后对响应进行处理。

记住，javascript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

2、AJAX XHR

XMLHttpRequest是AJAX的基础。

2.1、创建XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象，语法为：

variable=new XMLHttpRequest();

IE5和IE6使用ActiveXObject，语法为：

variable=new ActiveXObject("Microsoft.XMLHTTP");

综上，创建XMLHttpRequest对象的完整代码为：

var xmlhttp;
if(window.XMLHttpRequest){
 xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest对象用于和服务器交换数据。

2.2、向服务器发送请求

使用XMLHttpRequest对象的open()和send()方法：

xmlhttp.open("GET","test1.txt",true);
//规定请求的类型，URL以及是否异步处理请求
//请求的类型：GET or POST
//文件在服务器上的位置
//异步（true）或同步（false）
xmlhttp.send();
//将请求发送到服务器
//send(string)仅用于POST请求

大部分情况使用GET；

以下情况使用POST：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST没有数据量限制）
3. 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

2.2.1、GET请求

最简单的就是xmlhttp.open("GET","demo_get.asp",true);

为避免缓存，也可在url里加入唯一的id，即

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

另外，如果希望通过GET发送消息，要向url添加信息，即

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();

2.2.2、 POST请求

最简单的同样是xmlhttp.open("POST","demo_post.asp",true);

另外，如果需要像html表单那样post数据，要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据，即：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

其中，setRequestHeader(header,value)方法用于向请求中添加http头，header规定头的名称，value规定头的值。

2.2.3、URL

url是服务器上文件的地址，并可以是任何类型的文件。

2.2.4、异步or同步

当Async=true(异步)时，规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

不推荐，但对于一些小型的请求也是可以的。----当Async=false(同步)时，就不需要编写onreadystatechange函数，把函数放到send后面即可。

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2.3、服务器响应

responseText属性返回字符串形式的响应：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML属性返回XML形式的响应：

xmlDoc=xmlhttp.responseXML;

2.4、onreadystatechange事件

XHR对象有三个重要的属性：

onreadystatechange　　存储函数（或函数名），每当readyState属性改变时，就会调用该函数。

readyState　　　　　　  存有XHR的状态。从0到4变化。

　　　　　　　　　　　　0：请求未初始化

　　　　　　　　　　　　1：服务器连接已建立

　　　　　　　　　　　　2：请求已接收

　　　　　　　　　　　　3：请求处理中

　　　　　　　　　　　　4：请求已完成，且响应已就绪。

status　　　　　　　　 200：“OK”

　　　　　　　　　　　 404：未找到页面

当readyState等于4且status等于200时，表示响应已就绪。

注意：callback（回调）函数---当你的网站上存在多个AJAX任务，那么就应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。

<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>

3、AJAX 高级

3.1、 AJAX ASP/PHP

参考上篇博文中的测试实例1

3.2、AJAX数据库

这里html文件里的内容没什么好说的。主要是服务器端文件写好就行。后面会对服务端的语言进行学习总结。

3.3、AJAX XML文件

参考上篇博文中的测试实例2

以上。