Ajax

好久没碰Ajax了，今天遇到，在这里做个备忘

Ajax的功能和好处就不说了，这不复习也不会忘记。

1.  首先看下Ajax的对象、属性和方法

基础对象：XMLHttpRequest

常用属性：responseText、responseXML、readyState、status

常用方法(事件)：open(method,url,async)、send()、setRequestHeader(header,value)、onreadystatechange事件

注：这些方法的参数在一下用到时就会明白

2. 接下来就是要根据上面这些来实际应用了

1）创建Ajax对象

现在的主流（IE7+，Opera，Chrome，Safari，Firefox...）的浏览器都内建了XMLHttpRequest对象，但为了兼容（IE5，IE6使用ActiveX对象）应该做一个判断

var xmlhttp;if(){    xmlhttp = new XMLHttpResquest();}else{// for IE5，IE6    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

2）创建了对象就可以开始用它的属性和方法按实际来完成不同的需求了

Ajax向服务器发送请求的方法：open(method,url,async) 和 send() 配合

Ajax以两种方式向服务器发送请求：get，post 什么情况下用哪个不备忘也不会忘记的

注：用get方式为了不让取回的数据是缓存的内容，常常要url后面加个随机数，但 post 方式的请求不会缓存。

首先说说用get方式 向服务器发送请求：

xmlhttp.open("get","test.txt",true);xmlhttp.send();

注：用get方式时 open(method,url,async)参数url可以为任意文件，如txt，xml，或者有能力在服务器上执行的php，asp文件等等

        当用php，asp等文件执行时如果有参数可以直接跟在url中，比如search.php?id=9&name=laumin，这样就可以根据这些参数按要就输出不同内容

再来看看用 post方式 向服务器发送请求：

xmlhttp.open("POST","search.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("id=9&name=laumin");

注：用post方式发送时要setRequestHeader()发送http头，然后发送的参数可以在sned()中规定

3）以上向服务器发送了请求，服务器得到回应后返回数据就在responseText 和 responseXML 中

responseText是返回的文本形式的数据

responseXML 返回的是 ＸＭＬ形式的数据

document.getElementById("mydiv").innerHTML = responseText;//将返回来的数据放在id为mydiv的元素中

4）Ajax是个javascript的异步请求，在不刷新页面的情况下向服务器请求数据，所以它对应有几个请求状态和相应的事件

onreadystatechange事件是根据请求状态（readyState）改变是触发的事件，它一共触发 5 次，每次对应不同的状态

readyState 号:

               0 ：请求为初始化

               1 ：服务器链接以建立

               2 ：请求已接收

               3 ：请求处理中

               4 ：请求已完成，相应已就绪

status 号：

             200 ： “OK”

             404 ： 页面未找到

xmlhttp.onreadystatechange=function(){  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }}

5）在很多时候我们在一个页面中用Ajax处理好久个任务，这几个任务对应有不同的请求的 url 和 处理任务方法和流程，因此还可以创建一个函数去处理不同的需求

var xmlhttp;function myajax(url,func){      if(window.XMLHttpRequest){             xmlhttp = new XMLHttpRequest();      }      else{//for IE5,IE6            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");       }      xmlhttp.onreadystatechange=func;      xmlhttp.open("GET",url,true);      xmlhttp.send();}

注：func是个回调函数，可以按需求去实现