Ajax+JSON学习二

Ajax+JSON学习二

文章目录

前言
三、前后端数据交互
- [3.1. GET请求](#3.1. GET请求)
- [3.2. POST请求](#3.2. POST请求)
- [3.3. jQuery 中的 Ajax](#3.3. jQuery 中的 Ajax)
- [3.4. Ajax 的替代品：fetch](#3.4. Ajax 的替代品：fetch)
- [3.5. 小结](#3.5. 小结)
四、JSON
- [4.1. JSON简介](#4.1. JSON简介)
- [4.2. JSON 语法规则](#4.2. JSON 语法规则)
- [4.3. JSON的解析和序列化](#4.3. JSON的解析和序列化)
总结

前言

三、前后端数据交互

3.1. GET请求

GET 请求一般用于信息获取，它没有请求主体，而是使用 URL 传递参数（即：传递数据给后台）。

GET 传递参数的方式，分两步：

对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：由一对对 "名称=值" 组成（称为：名/值对），每一对之间用 "&" 拼接，如 "name=value&name=value&...&name=value"；
由于名/值对会附加在 URL 地址后面，因此在这串字符参数的最前面需要添加个 "?"，表示 URL 的查询参数开始。

javascript 复制代码

// GET请求的后端接口
var url = "/statics/demosource/demo_get_json.php";

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将需要传递的参数拼接为 "名称=值" 对的形式
var query = "country=" + country + "&city=" + city;

// 在 query 前面添加个 "?"，再拼接后端接口
var queryURL = url + "?" + query;

// 发起GET请求：使用拼接好的 queryURL
ajaxGet(queryURL);

扩展：因 JavaScript 对象数据是键值对的形式，它与上述的名值对具有类似的性质，因此在 Ajax 的应用中，传递的数据通常直接来自一个 JavaScript 对象，这时只需遍历这个 JavaScript 对象，将每一个键值对按 "名称=值" 的形式进行拼接即可。

javascript 复制代码

function urlencodeData (data) {
    if (!data) return "";

    var pairs = [];    // 存储名/值对
    for (var name in data) {
        if (!data.hasOwnProperty(name)) continue;        // 如果是继承属性则跳过
        if (typeof data[name] === "function") continue;  // 如果是方法则跳过

        // 将 null 与 undefined 改为空字符串
        var value = (data[name] === null || data[name] === undefined) ? "" : data[name].toString();

        // encodeURIComponent 用于对空格、中文等特殊字符进行 URI 编码
        pairs.push(encodeURIComponent(name) + "=" + encodeURIComponent(value));
    }

    return pairs.join("&");
}

3.2. POST请求

POST 请求一般用于修改服务器上的资源，它需要发送一个请求主体，客户端传递给服务器的数据就包含在这个请求主体中。

前置知识："Content-Type"请求头用于设置请求主体的编码格式。

POST 请求使用表单编码的方式来发送数据的关键步骤：

对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：像 GET 请求那样拼接为名/值对的形式；
将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。

JSON 是一种轻量级的前后端数据交换格式，直接使用JSON.stringify原生 API 即可实现 JSON 编码，比表单编码的方式更加快捷。

POST 请求使用 JSON编码的方式来发送数据的关键步骤：

"Content-Type"请求头的值需要为"application/json"；
对请求主体进行序列化，在 JavaScript 中可使用JSON.stringify完成这步操作。

javascript 复制代码

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将数据转换为 JavaScript 对象
var data = {
    country : country,
    city : city
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // ... ... 省略事件处理程序
}

// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_json_data.php");

// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/json");

// 编码请求主体并发送
xhr.send(JSON.stringify(data));

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 11</title>
</head>
<body>
    <div id="form">
        <label for="country">国家：<input type="text" name="country" id="country"></label>
        <label for="city">城市：<input type="text" name="city" id="city"></label>
    </div>
    <hr>
    <div>你查询的国家是：<span id="ipt_country"></span></div>
    <div>你查询的城市是：<span id="ipt_city"></span></div>
    <br>
    <button type="button" id="search">查询</button>
    （查询成功后会把你输入的值显示在上方）

    <script>
        var oSearch = document.getElementById("search"),
            oIpt_country = document.getElementById("ipt_country"),
            oIpt_city = document.getElementById("ipt_city");

        oSearch.onclick = function () {
            var country = document.getElementById("country").value,
                city = document.getElementById("city").value;

            var query = "country=" + country + "&city=" + city;

            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        var res = JSON.parse(xhr.responseText);
                        oIpt_country.innerText = res.params.country;
                        oIpt_city.innerText = res.params.city;
                    }
                }
            }

            xhr.open("POST", "/statics/demosource/demo_post_json.php");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(query);
        }
    </script>
</body>

3.3. jQuery 中的 Ajax

jQuery 是一个 JavaScript 工具库，它封装了 JavaScript 常用的功能代码，包括我们刚刚学完的 Ajax。

jQuery 中，Ajax 常见的请求方式有以下几种：

$.ajax(url, options)

$.get(url, data, callback, dataType)

$.post(url, data, callback, dataType)

$.getJSON(url, data, callback)

$.getScript(url, callback)

jQuery元素.load(url, data, callback)

javascript 复制代码

// 使用jQuery发起ajax请求
$.ajax("/statics/demosource/demo_get_json.php", {
    //请求类型
    type: "GET",
    //要发送的数据
    data: {
        country: country,
        city: city
    },
    //数据格式
    dataType: "json",
    //请求成功后执行
    success: function (res) {    // res为响应成功返回的数据
        oIpt_country.innerText = res.params.country;
        oIpt_city.innerText = res.params.city;
    },
    //请求失败后执行
    error: function (res) {    // 这里的res为响应失败返回的数据
        alert("请求失败：" + res.status);
    }
});

3.4. Ajax 的替代品：fetch

Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口，与 Ajax 一样允许开发者异步发起 HTTP 请求，但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。

javascript 复制代码

fetch("/statics/demosource/demo_json_data.php", {
    method: "POST",
    header: new Headers({"Content-Type" : "application/json"}),
    body: JSON.stringify(data)
})
.then(function (res) {
    return res.ok ? res.json() : Promise.reject(res);
})
.then(function (data) {
    oIpt_country.innerText = data.country;
    oIpt_city.innerText = data.city;
})
.catch(function (res) {
    alert("请求失败：" + res.status);
})

3.5. 小结

通过学习 Ajax，明白了：XMLHttpRequest对象其实就是 HTTP 规范在客户端 JavaScript 中的实现，一次 HTTP 请求，就对应着一个XMLHttpRequest实例，在这个实例上，可以取到 HTTP 协议中规定的各种协议属性。

四、JSON

4.1. JSON简介

JSON = JavaScript Object Notation，意思是：JavaScript 对象表示法，是一种轻量级的数据交换格式。

JSON 是 JavaScript 的子集，它利用了 JavaScript 中的一些模式来表示结构化数据，是在 JavaScript 中读写结构化数据的更好方式。

关于 JSON，要明白它只是一种数据格式，独立于编程语言，虽然与 JavaScript 具有相同的语法形式，但并不是只有 JavaScript 才能使用 JSON，很多编程语言都有针对 JSON 的解析器和序列化器。

4.2. JSON 语法规则

JSON 的语法可以表示以下三种类型的值：

简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示number、string、boolean 与 null，但 JSON 不支持 JavaScript 中的特殊值undefined；
对象：对象作为一种复杂数据类型，表示的是一组无序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值；
数组：数组也是一种复杂数据类型，表示一组有序的值的列表，数组的值也可以是任意类型 ------ 简单值、对象或数组。

注意：

JSON字符串与 JavaScript字符串的最大区别在于，JSON 字符串必须使用双引号，单引号会导致语法错误。

与 JavaScript 的字面量相比，JSON 对象的键（属性名）必须加双引号。

JSON 数组采用的就是 JavaScript 中的数组字面量形式

4.3. JSON的解析和序列化

JSON 对象的方法：

JSON.stringify()：用于序列化 JavaScript 对象，将其转换为 JSON 字符串；

JSON.parse()：用于解析 JSON 字符串，将其转换为 JavaScript 值。

知识点补充：解析 JSON 字符串的其它方法

方法一：使用 JavaScript 的eval()函数

javascript 复制代码

var obj = eval("(" + json + ")");

因为eval()函数会将传入的字符串当作 JavaScript 代码执行，为了防止 JavaScript 对象的花括号{}被误解析为 JavaScript 函数的花括号，需要对 JSON 字符串加上圆括号。

方法二：巧妙使用 Function 构造函数

javascript 复制代码

var obj = new Function("return (" + json + ")")();

总结

2023--12-17