ajax學習筆記-XMLHttpRequest物件的使用
阿新 • • 發佈:2019-02-12
XMLHttpRequest物件主要用於獲取並解析檔案內容,常用有以下四種方式
一、獲取文字檔案
二、獲取js檔案並執行js程式碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="oned"> <script type="text/javascript"> var xhr=new XMLHttpRequest(); var mothed="GET"; var url="1.txt"; xhr.open(mothed,url); xhr.send(); xhr.onreadystatechange=function(){ if (xhr.readyState==4) { //取出文字輸出到頁面 document.getElementById("oned").innerHTML=xhr.responseText; } } </script> </div> </body> </html>
三、獲取xml檔案並解析<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="oned"> <script type="text/javascript"> var xhr=new XMLHttpRequest(); var mothed="GET"; var url="2.js"; xhr.open(mothed,url); xhr.send(); xhr.onreadystatechange=function(){ if (xhr.readyState==4) { //直接執行js檔案內容 eval(xhr.responseText); } } </script> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="oned"> <script type="text/javascript"> var xhr=new XMLHttpRequest(); var mothed="GET"; var url="3.xml"; xhr.open(mothed,url); xhr.send(); xhr.onreadystatechange=function(){ if (xhr.readyState==4) { //取出xml檔案內容轉換為字串物件輸出到頁面 var strcont="name="+xhr.responseXML.getElementsByTagName("name")[0].innerHTML+=" pwd="+xhr.responseXML.getElementsByTagName("name")[1].innerHTML; document.getElementById("oned").innerHTML=strcont; } } </script> </div> </body> </html>
四、獲取json檔案並解析成js物件,通過物件訪問內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="oned">
<script type="text/javascript">
//建立XMLHttpRequest物件
var xhr=new XMLHttpRequest();
var mothed="GET";
var url="4.json";
//開始請求
xhr.open(mothed,url);
//傳送請求
xhr.send();
//獲取狀態變化次數
xhr.onreadystatechange=function(){
//判斷在第四次變化的時候執行動作
if (xhr.readyState==4) {
//取出json檔案內容轉換為js物件輸出到頁面
// ecma5以上可用
var user=JSON.parse(xhr.responseText);
//適用於老版本相容
//var user = eval("("+xhr.responseText+")");
document.getElementById("oned").innerHTML=user.name+" "+user.pwd;
}
}
</script>
</div>
</body>
</html>