1.创建XMLHttpRequest对象，需要添加跨浏览器支持
1 if(window.XMLHttpRequest){ 2 //code for IE7+,Firefox,Chrome,Opera,Safari 3 xmlhttp = new XMLHttpRequest(); 4 }else{ 5 //code for IE6,IE5 6 xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP"); 7 }
2.向服务器发送请求
1 xmlhttp.open("GET","ajax.jsp",true); 2 xmlhttp.send();
open(method,url,async)，规定请求的类型，URl以及是否异步处理请求
method：请求的类型；GET或POST
url：文件在处理器上的位置
async：true（异步）或false（同步）
send（String），讲请求发送到服务器
String：仅适用于POST请求
GET还是POST ？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库);
向服务器发送大量数据（POST 没有数据量限制);
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。
3.XMLHttpRequest对象的常用属性
onreadystatechange属性：用于指定状态改变时所触发的事件处理器
readyState属性：用于获取请求的状态：
0：未初始化 1：正在加载 2：已加载 3：交互中 4：完成
responseText属性：用于获取服务器的相应，表示为字符串
responseXML属性：用于获取服务器的相应，表示为XML。这个对象可以解析为DOM对象
status属性：用于返回服务器的HTTP状态码：
200：表示成功 202：表示请求被接受，但尚未成功 400：错误的请求 404：文件尚未找到 500：内部服务器错误
statusText：返回HTTP状态码对应的文本，如OK或Not Found（未找到）等
script代码如下：
1 <script type="text/javascript"> 2 function loadXMLDoc(){ 3 var xmlhttp; 4 if(window.XMLHttpRequest){ 5 //code for IE7+,Firefox,Chrome,Opera,Safari 6 xmlhttp = new XMLHttpRequest(); 7 }else{ 8 //code for IE6,IE5 9 xmlhttp = new ActiveXobjext("Microsoft.XMLHTTP"); 10 } 11 xmlhttp.onreadystatechange = function(){ 12 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ 13 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 14 } 15 } 16 xmlhttp.open("GET","ajax.jsp",true); 17 xmlhttp.send(); 18 } 19 </script>
body代码如下：
1 <body> 2 <h4>AjaxDemo</h4> 3 <button type="button" onclick="loadXMLDoc()">请求数据</button> 4 <div id="myDiv"></div> 5 </body>