以前使用ajax基本上都是使用jquery框架实现的，前段时间在知乎上看到有人在抱怨，说是面试的时候面试官瞧不起他使用框架来实现。于是想多接触一下原生javascript。
主要参考了http://www.cnblogs.com/yjzhu/archive/2013/01/28/2879542.html关于ajax基础的介绍。非常感谢。
ajax分为4个步骤：1、创建ajax对象，2、连接服务器，3、发送请求，4、接收返回值。
首先创建对象：
这里由于不同浏览器所提供的环境不一样，因此参考了另一种的创建方式：
这里使用了异常处理
1 var request = false; 2 try { 3 request = new XMLHttpRequest(); 4 } 5 catch (trymicrosoft) { 6 try { 7 request = new ActiveXObject("Msxml2.XMLHTTP"); 8 } 9 catch (othermicrosoft) { 10 try { 11 request = new ActiveXObject("Microsoft.XMLHTTP"); 12 } 13 catch (failed) { 14 request = false; 15 } 16 } 17 }
连接服务器：
使用open()函数，open(‘GET‘,url,true)，第一个参数为‘POST‘或‘GET‘，第二个参数为url，第三个参数为是否异步传输。
request.open(‘GET‘,url,true);
发送数据：
request.send();
接收返回值：onreadystatechange事件接收返回信息。
readyState：请求状态，返回的是整数（0-4）。
0（未初始化）：还没有调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到全部响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，可以在客户端调用。
status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
responseText：返回内容，即我们所需要读取的数据。需要注意的是：responseText 返回的是字符串。
在这里补充一条：如果在onreadystatechange事件中使用return返回特定数据的，请将open()函数中设置为false（即使用同步方式传递数据），否则return将在onreadystatechange之前就执行，传输undefined数据。
整体函数是这样的：
1 function ajax_get(url,node){ 2 3 request.open("GET",url,true); 4 request.send(); 5 request.onreadystatechange=function(){ 6 if(request.readyState == 4){ //4为完成 7 if(request.status == 200){ //200为成功 8 fnSucc(request.responseText,node); 9 }else{ 10 alert(request.status); 11 } 12 } 13 } 14 }
在这里的node我指的是节点。由于我的程序中ajax成功会修改select节点下的option，因此我将节点直接放入。这里接受到的data数据为json格式的二维数组。
1 //ajax交互成功后插入节点 2 function fnSucc(data,node){ 3 var arr = eval(data); 4 for(i in arr){ 5 var opt = document.createElement("option"); 6 opt.value=arr[i].mark; 7 opt.text=arr[i].name; 8 node.appendChild(opt); 9 } 10 }
下面这个函数用于清空select节点下的option。
//清空某个select节点下的option function cleanOpt(node){ node.options.length=0; }
原文：http://www.cnblogs.com/vulpes/p/5294715.html