标签：
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。
通过利用 AJAX，JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。
通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。
原生Ajax：
1. 创建请求对象
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 设置回调函数（监听）
xmlhttp.onreadystatechange=函数名；
或
xmlhttp.onreadystatechange=function(){
函数体。。。
}
3. 初始化：
xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php
4. 发送：
xmlhttp.send();
其中：xmlhttp请求对象：
**属性：
*readyState //请求状态：0,1,2,3,4
*responseText//响应内容
responseXML //xml响应对象
*status //浏览器响应状态：200正常， 404 请求地址不存在 ,,
statusText //状态内容
*onreadystatechange //回调函数属性
方法：
abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader() //返回指定的 HTTP 响应头部的值
*open() //初始化 HTTP 请求参数
*send() //发送 HTTP 请求，使用传递给 open() 方法的参数
*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。
模拟POST提交代码：
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
实例：GET请求传值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Ajax实例</title> 6 </head> 7 <body> 8 <h3>Ajax实例--GET请求传值</h3> 9 <form action="2.php" name="myform" method="get" onsubmit="return doSubmit()"> 10 数值1：<input type="text" name="m1"/><br/><br/> 11 数值2：<input type="text" name="m2"/><br/><br/> 12 结 果：<input type="text" name="res" readonly style="border:0px"/><br/><br/> 13 <input type="submit" value="求和"/> 14 </form> 15 <script type="text/javascript"> 16 //执行Ajax加载 17 function doSubmit(){ 18 var m1 = document.myform.m1.value; 19 var m2 = document.myform.m2.value; 20 //1. 创建ajax请求对象（XMLHttpRequest对象） 21 var xmlhttp; 22 if(window.XMLHttpRequest){ 23 // code for IE7+, Firefox, Chrome, Opera, Safari 24 xmlhttp=new XMLHttpRequest(); 25 }else{ 26 // code for IE6, IE5 27 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 28 } 29 30 //2. 设置请求回调函数 31 xmlhttp.onreadystatechange=function(){ 32 //判断请求状态为4时，响应状态为200时 33 if(xmlhttp.readyState==4){ 34 if(xmlhttp.status==200){ 35 //获取响应内容 36 var str = xmlhttp.responseText; 37 document.myform.res.value = str; 38 }else{ 39 alert("ajax加载失败！"); 40 } 41 } 42 43 } 44 45 //3. 初始化请求对象 46 xmlhttp.open("GET","2.php?m1="+m1+"&m2="+m2,true); 47 //其中第一个参数为发送方式;GET或POST两种，第二参数是发送地址： 48 //第三参数表示是否异步：true异步，false表示同步 49 50 //4. 执行发送 51 xmlhttp.send(); 52 53 return false; 54 } 55 </script> 56 </body> 57 </html>
实例：POST请求传值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Ajax实例</title> 6 </head> 7 <body> 8 <h3>Ajax实例--POST请求传值</h3> 9 <form action="2.php" name="myform" method="get" onsubmit="return doSubmit()"> 10 数值1：<input type="text" name="m1"/><br/><br/> 11 数值2：<input type="text" name="m2"/><br/><br/> 12 结 果：<input type="text" name="res" readonly style="border:0px"/><br/><br/> 13 <input type="submit" value="求和"/> 14 </form> 15 <script type="text/javascript"> 16 //执行Ajax加载 17 function doSubmit(){ 18 var m1 = document.myform.m1.value; 19 var m2 = document.myform.m2.value; 20 //1. 创建ajax请求对象（XMLHttpRequest对象） 21 var xmlhttp; 22 if(window.XMLHttpRequest){ 23 // code for IE7+, Firefox, Chrome, Opera, Safari 24 xmlhttp=new XMLHttpRequest(); 25 }else{ 26 // code for IE6, IE5 27 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 28 } 29 30 //2. 设置请求回调函数 31 xmlhttp.onreadystatechange=function(){ 32 //判断请求状态为4时，响应状态为200时 33 if(xmlhttp.readyState==4){ 34 if(xmlhttp.status==200){ 35 //获取响应内容 36 var str = xmlhttp.responseText; 37 document.myform.res.value = str; 38 }else{ 39 alert("ajax加载失败！"); 40 } 41 } 42 43 } 44 45 //3. 初始化请求对象 46 xmlhttp.open("POST","2.php",true); 47 //其中第一个参数为发送方式;GET或POST两种，第二参数是发送地址： 48 //第三参数表示是否异步：true异步，false表示同步 49 50 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 51 52 //4. 执行发送 53 xmlhttp.send("m1="+m1+"&m2="+m2); 54 55 return false; 56 } 57 </script> 58 </body> 59 </html>
实例：Ajax加载JSON格式数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Ajax实例</title> 6 </head> 7 <body> 8 <h3>Ajax实例--函数封装,加载JSON格式数据</h3> 9 <div id="did" style="width:200px;height:150px;border:1px solid blue;"></div> 10 <button onclick="doLoad()">加载</button> 11 <script type="text/javascript"> 12 13 function doLoad(){ 14 myAjax("6.php","GET",null,function(data){ 15 //处理响应的json格式数据 16 eval("var list="+data+";"); 17 //输出 18 var str = "<ul>"; 19 for(var i=0;i<list.length;i++){ 20 str += "<li>"; 21 str += list[i].name+":"+list[i].age+":"+list[i].sex; 22 str += "</li>"; 23 } 24 str += "</ul>"; 25 document.getElementById("did").innerHTML = str; 26 }); 27 } 28 29 30 //自定义Ajax处理函数 31 function myAjax(url,method,param,fun){ 32 //1. 创建ajax请求对象（XMLHttpRequest对象） 33 var xmlhttp; 34 if(window.XMLHttpRequest){ 35 // code for IE7+, Firefox, Chrome, Opera, Safari 36 xmlhttp=new XMLHttpRequest(); 37 }else{ 38 // code for IE6, IE5 39 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 40 } 41 42 //2. 设置请求回调函数 43 xmlhttp.onreadystatechange=function(){ 44 //判断请求状态为4时，响应状态为200时 45 if(xmlhttp.readyState==4){ 46 if(xmlhttp.status==200){ 47 //获取响应内容 48 str = xmlhttp.responseText; 49 fun(str); 50 }else{ 51 alert("ajax加载失败！"); 52 } 53 } 54 55 } 56 57 //3. 初始化请求对象 58 xmlhttp.open(method,url,false); 59 60 //4. 执行发送 61 if(method=="POST"){ 62 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 63 xmlhttp.send(param); 64 }else{ 65 xmlhttp.send(); 66 } 67 } 68 </script> 69 </body> 70 </html>
标签：
原文地址：http://www.cnblogs.com/yexiang520/p/5720038.html
