今天闲着没什么事干，就看了下菜鸟教程里的AJAX教程，这个在ERP微信抄货位的功能模块中引用过，异步显示门店的录入记录。下面就收录下AJAX的基本用法吧

AJAX使用思路：

• 1、创建对象：xmlhttp;
  
  xmlhttp=new XMLHttpRequest();

  1	xmlhttp=new XMLHttpRequest();

• 2-1、向服务器发送请求：open()、send()
  
  xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

  1 2	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

• 2-2、使用POST发送带参数：
  
  xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

  1 2 3 4

  xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

• 3-1、服务器的响应：onreadystatechange
  
  xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

  1 2 3 4 5 6 7

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

• 3-2、XML响应：
  
  xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { 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; } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  xmlhttp.onreadystatechange=function()   {     if (xmlhttp.readyState==4 && xmlhttp.status==200)     {       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;     }   }

完整写法：

• 这应该是原始的用法吧
  
  function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

• 这是用回调函数的方法，多处使用AJAX的时候比较方便
  
  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=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  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=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }

• 一个数据库调用的例子代码片断：
  
  /* * 不刷新读取数据 * str:表单的值，有延迟功能 * 实例参考自：http://www.w3school.com.cn/asp/asp_ajax_database.asp */ var to; function getD(va) { if(to) clearTimeout(to); to=setTimeout("showshop('"+va+"')",500);//延迟500毫秒后再查询 } function showshop(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// 针对 IE7+, Firefox, Chrome, Opera, Safari 的代码 xmlhttp=new XMLHttpRequest(); } else {// 针对 IE6, IE5 的代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").style.display="block"; document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","../ajax/ajax_shop.asp?q="+str,true); xmlhttp.send(); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  /* * 不刷新读取数据 * str:表单的值，有延迟功能 * 实例参考自：http://www.w3school.com.cn/asp/asp_ajax_database.asp */ var to; function getD(va) {   if(to) clearTimeout(to);   to=setTimeout("showshop('"+va+"')",500);//延迟500毫秒后再查询 }   function showshop(str) { if (str=="")   {   document.getElementById("txtHint").innerHTML="";   return;   } if (window.XMLHttpRequest)   {// 针对 IE7+, Firefox, Chrome, Opera, Safari 的代码   xmlhttp=new XMLHttpRequest();   } else   {// 针对 IE6, IE5 的代码   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("txtHint").style.display="block";     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     }   } xmlhttp.open("GET","../ajax/ajax_shop.asp?q="+str,true); xmlhttp.send(); }