js ajax 数据获取

在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方式，运行结果都是一样的，如下：

posted on 2017-12-27 15:31 huanying2015 阅读(17221) 评论(0) 编辑收藏举报