2016年1月30日

Ajax

创建 XMLHttpRequest 对象:

var xmlhttp;
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

或者：

xmlhttp=new XMLHttpRequest()||ActiveXObject("Microsoft.XMLHTTP");

GET请求：

function ajax(){
        var xml=new XMLHttpRequest()||ActiveXObject("Microsoft.XMLHTTP");
        xml.onreadystatechange=function(){
            if  (xml.readyState==4&&xml.status==200){
            document.getElementById("myDiv").innerHTML=xml.responseText;
        }
    }
        xml.open("get","/ajax_info.txt?t="+ Math.random(),true);
        xml.send();
}

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

xmlhttp.open("POST","ajax_test.html",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

GET与POST的区别

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

Async = false

不推荐使用async=false，但是对于一些小型的请求，也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

使用async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可。

responseXML 属性

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("myDiv").innerHTML=txt;

回调函数

回调函数是一种以参数形式传递给另一个函数的函数。 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

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

readyState表示XMLHttpRequest对象的处理状态：

• 0:XMLHttpRequest对象还没有完成初始化。(准备司机、车、货物)

• 1:XMLHttpRequest对象开始发送请求。(需要送十车货物，当前正在送第几车)

• 2:XMLHttpRequest对象的请求发送完成。(十车货送完毕)

• 3:XMLHttpRequest对象开始读取服务器的响应。(准备把这十车加工的货拉回来，当前第几车)

• 4:XMLHttpRequest对象读取服务器响应结束。(十车货全部拉回完毕)

status状态：

• 1xx:信息响应类，表示接收到请求并且继续处理。(所有拉去的货，工厂还没有加工完毕)

• 2xx:处理成功响应类，表示动作被成功接收、理解和接受。。(所有拉去的货工厂全部加工完毕)

• 3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 。(所有拉去的货，工厂设备不够，让其他工厂帮忙加工)

• 4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 。(这十车货有质量问题，工厂不能正常加工)

• 5xx:服务端错误，服务器不能正确执行一个正确的请求。(工厂在加工到一半过程中断电，不能继续加工)

json

var jsondata='{staff:[{"name":"洪七","age":"70"},{"name":"郭靖","age":"35"},{"name":"黄蓉","age":"30"}]}';

//容易解释执行语句，不考虑字符串是否合法。
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);

//推荐使用
var jsonobj_2=JSON.parse(jsondata);