JavaScript与Ajax实战：GET、POST请求与JSON处理-优快云博客

1.JSON

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // JSON 作为一种数据传递的格式
    var loginInfo = {
      phone: '17602900172',
      password: 'admin123',
    };
    // {"phone":"17602900172","password":"admin123"}
    // stirng=>有格式的字符串 JSON "{phone: '17602900172', password: 'admin123'}"
    var str = JSON.stringify(loginInfo);
    console.log(str);
    // 解析JSON字符串
    console.log(JSON.parse(str));
  </script>
</html>

2.发送GET请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 创建XMLHttpRequest对象
    // Internet Explorer （IE5 和 IE6）
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    console.log(xhr);
    // 监听ajax状态的变化
    xhr.onreadystatechange = function () {
      //  0: 请求未初始化
      //  1: 服务器连接已建立
      //  2: 请求已接收
      //  3: 请求处理中
      //  4: 请求已完成，且响应已就绪
      if (xhr.readyState === 4) {
        console.log('请求完成了');
        // 获取响应的结果 字符串
        console.log(JSON.parse(xhr.responseText));
      }
    };

    // xhr.open(method,url,boolean)
    // method:GET
    // url:协议+ip+端口号+具体路径
    // boolean:是否是异步请求
    xhr.open('GET', 'http://119.91.125.14:8888/home/goods?type=pop&page=1', true);
    xhr.send();
  </script>
</html>

3.发送POST请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 创建XMLHttpRequest对象
    // Internet Explorer （IE5 和 IE6）
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    console.log(xhr);
    // 监听ajax状态的变化
    xhr.onreadystatechange = function () {
      //  0: 请求未初始化
      //  1: 服务器连接已建立
      //  2: 请求已接收
      //  3: 请求处理中
      //  4: 请求已完成，且响应已就绪
      // state 网络状态码 200 201 成功 4xx 5xx
      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 201)) {
        console.log('请求完成了');
        // 获取响应的结果 字符串
        console.log(JSON.parse(xhr.response));
      }
    };

    // method:POST
    xhr.open('POST', 'http://119.91.125.14:8888/user/login', true);
    // 设置请求头
    xhr.setRequestHeader('Content-type', 'application/json');

    var loginInfo = {
      phone: '17602900172',
      password: '123456',
    };
    // post：由于请求数据放在请求体中，所以需要对数据做序列化处理（JSON）
    xhr.send(JSON.stringify(loginInfo));
  </script>
</html>

inde.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./ajax.js"></script>
  <script>
    // 使用
    ajax({
      url: 'http://119.91.125.14:8888/home/goods?type=pop&page=1',
      success: function (response) {
        console.log(response);
      },
    });

    // 登陆
    ajax({
      url: 'http://119.91.125.14:8888/user/login',
      method: 'POST',
      data: {
        phone: '17602900172',
        password: '123456',
      },
      header: {
        'Content-Type': 'application/json',
      },
      success: function (response) {
        console.log(response);
      },
    });
  </script>
</html>

ajax.js

function ajax(options) {
  // 取出参数
  var url = options.url;
  var method = options.method || 'GET';
  var data = options.data || {};
  var header = options.header || {};
  var success = options.success;

  // 创建XMLHTTPRequst对象
  var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

  // 监听xhr state状态的变化
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 201)) {
      success(JSON.parse(xhr.response));
    }
  };

  // 开启请求
  xhr.open(method, url, true);

  // 设置请求头
  for (var key in header) {
    xhr.setRequestHeader(key, header[key]);
  }

  // 发送请求
  xhr.send(JSON.stringify(data));
}