在js中應用ajax 獲取數據的方法，也寫一個出來供復習所用
1.建議一個user.json 文件如下，保存名字為 user.json
{ "name": "huanying2015", "pwd": "123456", "sex": "男" }
2.1 創建一個ajax 請求，用於獲取 user.json 文件的內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function() { 8 var Obtn = document.querySelector('input'); 9 Obtn.onclick = function() { 10 // 創建一個XMLHttpRequest 對象，這是ajax請求的核心；這里采用一個三元選擇，是為了兼容ie6/ie5 11 // 在ie6/ie5中，使用new ActiveXObject('Microsoft.XMLHTTP')創建XMLHttpRequest對象 12 var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP'); 13 // 獲取ajax請求地址,在地址后面加入一個隨機數，是為了解決ie瀏覽器的識別問題，ie瀏覽器相同的請求地址，不會再次進行請求， 14 // 加入一個隨機數之后，再次請求時，ie會解析為不同的地址 15 var url = 'user.json?tid=' + Math.random(); 16 // 對請求的狀態進行監控 17 // 0 -- 未初始化，確認XMLHttpRequest 對象已經創建，並為調用open()方法初始化做准備 18 // 1-- 載入，對XMLHttpRequest 對象進行初始化，即調用open()方法，根據參數(method,url,true)完成對象狀態的設置，並調用send()方法向服務器端發送請求。1表示正在向服務端發送請求 19 // 2--載入完成，收到服務器的相應數據，但是只是原始數據，並不能直接在客戶端使用。值為2表示已經接收完全部相應數據，並為下一階段解析做好准備 20 // 3--交互數據，解析相應數據，即根據服務器端相應頭部返回的MIME類型把數據轉換成能通過 responseBody,responseText,responseXML屬性存取的格式,為在客戶端調用做好准備。 21 // 值為3表示正在解析數據 22 // 4--完成， 此階段確認全部數據都已經解析為可以在客戶端使用的數據， 解析已經完成。 值為4表示解析完成， 可以通過XMLHttpRequest對象對應的屬性獲取數據 23 xhr.onreadystatechange = function() { 24 if (xhr.readyState == 4) { 25 // 將XMLHttpRequest返回的數據轉換成為json格式（因為返回來的是一個字符串） 26 var obj = JSON.parse(xhr.responseText); 27 var str = ''; 28 // 遍歷obj 29 for (var key in obj) { 30 str += "<p>" + key + "," + obj[key] + "</p>"; 31 } 32 // 輸出obj 33 document.querySelector('.box').innerHTML = str; 34 } 35 } 36 xhr.open('GET', url, true); 37 xhr.send(null); 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <input type='button' value="ajax請求調用數據"> 44 <div class='box'></div> 45 </body> 46 </html>
運行結果：（這里html文件名為ajax100.html，在這里直接雙擊打開ajax100.html文件是不能獲取user.json內容的，必須要在瀏覽器輸入地址，打開服務器才能獲取user.json文件內容）
以上就是ajax 從user.json獲取的數據
備注：以上是使用GET方式發送請求，如果使用POST方式，則在send()方法里添加要發送的參數，並且要使用 setRequestHeader() 來添加 HTTP 頭
例如：
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=huanying2015&pwd=123456");
2.2 使用jquery 獲取ajax數據
2.2.1 使用 jquery get 方式獲取數據
建立兩個文件：分別命名為 success.html 和 error.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> 7 <script> 8 $(function() { 9 $('#login').on('click', function() { 10 var userName = $('#user').val(); 11 var pwd = $('#pwd').val(); 12 $.get('user.json', {}, function(obj) { 13 if (userName == obj['name'] && pwd == obj['pwd']) { 14 location.href = "success.html"; 15 } else { 16 location.href = "error.html"; 17 } 18 }); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 用戶名: <input type="text" name="user" id="user"> <br> 密碼: <input type="password" name="pwd" id="pwd"> <br> 25 <input type="button" value="登錄" id="login"> 26 </body> 27 </html>
2.2.2 使用 jquery post 方式獲取數據
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> 7 <script> 8 $(function() { 9 $('#login').on('click', function() { 10 var userName = $('#user').val(); 11 var pwd = $('#pwd').val(); 12 $.post('user.json', {}, function(obj) { 13 if (userName == obj['name'] && pwd == obj['pwd']) { 14 location.href = "success.html"; 15 } else { 16 location.href = "error.html"; 17 } 18 }); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 用戶名: <input type="text" name="user" id="user"> <br> 密碼: <input type="password" name="pwd" id="pwd"> <br> 25 <input type="button" value="登錄" id="login"> 26 </body> 27 </html>
2.2.3 使用 jquery ajax 方式獲取數據
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> 7 <script> 8 $(function() { 9 $('#login').on('click', function() { 10 var userName = $('#user').val(); 11 var pwd = $('#pwd').val(); 12 $.ajax({ 13 url: 'user.json?tid=' + Math.random(), 14 data: {}, 15 type: 'get', 16 dataType: 'json', 17 success: function(obj) { 18 if (userName == obj['name'] && pwd == obj['pwd']) { 19 location.href = 'success.html'; 20 } else { 21 location.href = 'error.html'; 22 }; 23 }, 24 error: function() { 25 console.log('ajax請求失敗！'); 26 } 27 }); 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 用戶名: <input type="text" name="user" id="user"> <br> 密碼: <input type="password" name="pwd" id="pwd"> <br> 34 <input type="button" value="登錄" id="login"> 35 </body> 36 </html>
get方式，post方式，ajax方式，運行結果都是一樣的，如下：
