在js中应用ajax 获取数据的方法，也写一个出来供复习所用

1.建议一个user.json 文件如下，保存名字为 user.json

  1. { "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 头

例如：

  1. xhr.open("POST",url,true);
  2. xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. 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方式，运行结果都是一样的，如下：

js ajax 数据获取的更多相关文章

  1. js ajax post提交 ie和火狐、谷歌提交的编码不一致，导致中文乱码

    今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...

  2. JavaScript学习总结【12】、JS AJAX应用

    1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...

  3. 简单的前端js+ajax 购物车框架(入门篇)

    其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. js+ajax编码三级联动

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  6. 注册页面手机验证码无跳转接收[html+js+ajax+php]

    [学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...

  7. js ajax请求传token

    js  ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...

  8. js ajax设置和获取自定义header信息的方法总结

    目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

随机推荐

  1. ie6下a标签click事件无法触发加载iframe

    ie6下a标签click事件无法触发加载iframe,把a换成span或者别的,就可以了

  2. Django简介及Django项目的创建详述

    Django简介 Django是一个开源的Web应用框架,由Python写成.但是,百度百科中讲它采用了MVC框架模式,其实这个解释不准确. 确切的讲,Django的模式是:路由控制+MTV模式.所谓 ...

  3. [UE4]Switch on String，根据字符串决定条件分支，类似于高级语言中的switch语句

  4. typescript静态属性,静态方法,抽象类,多态

    /* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 ...

  5. Access、SQLServer、Oracle常见SQL语句应用区别

    Access.SQLServer.Oracle常见SQL语句应用区别 关劲松 PMP 如果要兼容Access.SQL Server.Oracle三个数据库版本:我们在编写SQL语句的过程中,尽量使用一 ...

  6. 在UnrealEngine4中使用Google Protobuf

    转自:https://blog.csdn.net/or_7r_ccl/article/details/54986393 在UnrealEngine4中使用Google Protobuf         ...

  7. Synchronized常用用法

    我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面.其实 Synchronized 可以用到更多的场合,栈长列举了以下几个用法. 1.同步普通方法 这个也是我 ...

  8. CM+CDH大数据平台

    我这里搭建的是3节点,centos6.5的静态ip ,ssh免密码登录,防火墙关闭,时钟同步等等一些准备工作我这里就不多说了 我们可以进官网看看 https://www.cloudera.com/ 我 ...

  9. css实战——第一天

    1.  开发前的准备 1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 1.2建立项目文件夹 主页或是首页    index.html   d ...

  10. SpringBoot项目启用本地Tomcat

    1.修改pom.xml文件,配置<packaging>war</packaging>,使其发布的时候打包成war包 <groupId>com.owlforest&l ...