AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
- More
封装ajax()函数，代码如下-----注意window.XMLHttpRequest中的window不能少，否则会出错。XMLHttpRequest相当于window的一个属性
1 // JavaScript Document 2 function ajax(url,fnSucc,fnFailed){ 3 //1.创建对象 4 var oAjax=null; 5 if(window.XMLHttpRequest){ 6 oAjax=new XMLHttpRequest(); 7 } 8 else{ 9 oAjax=new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 //alert(oAjax); 12 //2.连接服务器 13 //open(请求方式，url，是否异步) 14 oAjax.open('GET',url,true) 15 //3.发送请求 16 oAjax.send(); 17 //4.返回数据 18 oAjax.onreadystatechange=function(){ 19 if(oAjax.readyState==4){ 20 if(oAjax.status==200){ 21 //alert("victory"+oAjax.responseText); 22 fnSucc(oAjax.responseText); 23 } 24 else{ 25 if(fnFailed){ 26 fnFailed(); 27 } 28 } 29 } 30 } 31 };
ajax()函数测试版
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 //用未定义的变量会出错------用未定义的属性undefined 8 //alert(a); 9 //alert(window.a); 10 window.onload=function(){ 11 var oBtn=document.getElementById('btn'); 12 oBtn.onclick=function(){ 13 //1.创建对象 14 var oAjax=null; 15 if(window.XMLHttpRequest){ 16 oAjax=new XMLHttpRequest(); 17 } 18 else{ 19 oAjax=new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 //alert(oAjax); 22 //2.连接服务器 23 //open(请求方式，url，是否异步) 24 oAjax.open('GET','abc.txt',true) 25 //3.发送请求 26 oAjax.send(); 27 //4.返回数据 28 oAjax.onreadystatechange=function(){ 29 if(oAjax.readyState==4){ 30 if(oAjax.status==200){ 31 alert("victory"+oAjax.responseText); 32 } 33 else{ 34 alert("defeat!"); 35 } 36 } 37 } 38 }; 39 } 40 41 </script> 42 </head> 43 44 <body> 45 <input type="button" id="btn" value="create"> 46 </body> 47 </html>
实例1-----案例的文件都在服务器端www目录下，在本地PC安装WAMP程序即可。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Untitled Document</title> 6 <script src="ajax.js"></script> 7 <script> 8 window.onload=function(){ 9 var oBtn=document.getElementById('btn1'); 10 oBtn.onclick=function(){ 11 ajax("one.txt",function(str){ 12 alert(str); 13 }) 14 } 15 } 16 </script> 17 </head> 18 19 <body> 20 <input type="button" id="btn1" value="readme"> 21 </body> 22 </html>
实例2-----清除缓存。
1 <html> 2 <head> 3 <title></title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <style type="text/css"> 6 #div1{width:400px;height:300px;border:1px solid #333;} 7 </style> 8 <script src="ajax.js"></script> 9 <script type="text/javascript"> 10 window.onload=function(){ 11 var oBtn=document.getElementsByTagName('input'); 12 var oDiv=document.getElementById('div1'); 13 for (var i = 0; i < oBtn.length; i++) { 14 oBtn[i].index=i; 15 oBtn[i].onclick=function(){ 16 //缓存问题,获取1970到现在的毫秒数 17 ajax(this.index+1+'.txt?t='+new Date().getTime(),function(str){ 18 oDiv.innerHTML=str; 19 }) 20 } 21 }; 22 } 23 </script> 24 </head> 25 <body> 26 <input type="button" id="btn1" value="button1"> 27 <input type="button" id="btn2" value="button2"> 28 <input type="button" id="btn3" value="button3"> 29 <div id="div1"> 30 31 </div> 32 </body> 33 </html>
实例3-----读取文件里的数组
1 <html> 2 <head> 3 <title></title> 4 <script src="ajax.js"></script> 5 <script type="text/javascript"> 6 window.onload=function(){ 7 var oBtn=document.getElementById('btn1'); 8 oBtn.onclick=function(){ 9 ajax('arr.txt',function(str){ 10 var arr=eval(str); 11 alert(arr[0]); 12 }) 13 }; 14 }; 15 </script> 16 </head> 17 <body> 18 读取静态数组文件 19 <input type="button" id="btn1" value="readtxt"> 20 </body> 21 </html>
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。eval知识详解
实例4-----读取文件，实现分页
1 <html> 2 <head> 3 <title></title> 4 <script src="ajax.js"></script> 5 <script> 6 window.onload=function(){ 7 var oUl=document.getElementById('ul1'); 8 var a=document.getElementsByTagName('a'); 9 10 for (var i = 0; i < a.length; i++) { 11 a[i].index=i; 12 a[i].onclick=function(){ 13 ajax('page'+(this.index+1)+'.txt',function(str){ 14 var arr=eval(str); 15 16 oUl.innerHTML=''; 17 for (var i = 0; i < arr.length; i++) { 18 var oLi=document.createElement('li'); 19 oLi.innerHTML='<strong>'+arr[i].user+'</strong>'+'<h6>'+arr[i].pass+'</h6>'; 20 oUl.appendChild(oLi); 21 }; 22 }) 23 } 24 }; 25 } 26 </script> 27 </head> 28 <body> 29 <ul id="ul1"></ul> 30 <a href="javascript:;">1</a> 31 <a href="javascript:;">2</a> 32 <a href="javascript:;">3</a> 33 </body> 34 </html>