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>