ajax&json-w3school（2024，前端性能优化之APK优化，前端开发必须要会

（三）json对象

1.对象语法

·JSON 对象被花括号 {} 包围。

·JSON 对象以键/值对书写。

·键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 ·null）。没有日期、undifine、函数类型，需要的话通过一些方式转化。

·键和值由冒号分隔。

·每个键/值对由逗号分隔。

2. 访问对象值

您可以通过使用点号（.）来访问对象值：

myObj = { “name”:“Bill Gates”, “age”:62, “car”:null };

x = myObj.name;

您也可以使用方括号（[]）来访问对象值：

myObj = { “name”:“Bill Gates”, “age”:62, “car”:null };

x = myObj[“name”];

3.遍历对象

您能够通过使用 for-in 遍历对象属性

在 for-in 循环中，请使用括号标记法来访问属性值：

myObj = { “name”:“Bill Gates”, “age”:62, “car”:null };

for (x in myObj) {

document.getElementById(“demo”).innerHTML += myObj[x];

}

4.嵌套的 JSON 对象

一个 JSON 对象中的值可以是另一个 JSON 对象。

myObj = {

“name”:“Bill Gates”,

“age”:62,

“cars”: {

“car1”:“Porsche”,

“car2”:“BMW”,

“car3”:“Volvo”

}

}

您能够通过使用点号和括号访问嵌套的 JSON 对象：

x = myObj.cars.car2;

//或者：

x = myObj.cars[“car2”];

5.修改值

您能够使用点号来修改 JSON 对象中的任何值：

myObj.cars.car3 = “Mercedes Benz”;

您也可以使用括号来修改 JSON 对象中的值：

myObj.cars[“car3”] = “Mercedes Benz”;

6.删除对象属性

使用 delete 关键词来删除 JSON 对象的属性：

delete myObj.cars.car1;

（四）json数组

1.作为 JSON 对象的数组

[ “Porsche”, “BMW”, “Volvo” ]

JSON 中的数组几乎与 JavaScript 中的数组相同。

在 JSON 中，数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。

在 JavaScript 中，数组值可以是以上所有类型，外加任何其他有效的 JavaScript 表达式，包括函数、日期和 undefined。

2. JSON 对象中的数组

数组可以是对象属性的值：

{

“name”:“Bill Gates”,

“age”:62,

“cars”:[ “Porsche”, “BMW”, “Volvo” ]

}

3.访问数组值

您可以通过使用索引号来访问数组值：

x = myObj.cars[0];

4.遍历数组

您可以通过使用 for-in 循环来访问数组值：

for (i in myObj.cars) {

x += myObj.cars[i];

}

或者您可以使用 for 循环：

for (i = 0; i < myObj.cars.length; i++) {

x += myObj.cars[i];

}

5.JSON 对象中的嵌套数组

数组中的值也可以另一个数组，或者甚至另一个 JSON 对象：

myObj = {

“name”:“Bill Gates”,

“age”:62,

“cars”: [

{ “name”:“Porsche”, “models”:[ “911”, “Taycan” ] },

{ “name”:“BMW”, “models”:[ “M5”, “M3”, “X5” ] },

{ “name”:“Volvo”, “models”:[ “XC60”, “V60” ] }

]

}

如需访问数组内部的数组，请对每个数组使用 for-in 循环：

for (i in myObj.cars) {

x += “

” + myObj.cars[i].name + “

”;

for (j in myObj.cars[i].models) {

x += myObj.cars[i].models[j];

}

}

6.修改数组值

请使用索引号来修改数组：

myObj.cars[1] = “Mercedes Benz”;

7.删除数组项目

请使用 delete 关键词来删除数组中的项目：

delete myObj.cars[1];

（五）json html+php

1.JSON 非常易于转译为 JavaScript。JavaScript 可用于在网页中生成 HTML。

2. HTML 表格

使用作为 JSON 接收到的数据来生成表格：

做一个基于下拉列表值的表格。

Choose an option: Customers Products Suppliers

3.HTML 下拉列表

用接收到的 JSON 数据来生成 HTML 下拉列表：

做一个基于 JSON 数据的下拉列表。

（五）json JSONP

1.JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。

JSONP 使用 <script> 标签取而代之。

JSONP 指的是 JSON with Padding。

从另一个域请求文件会引起问题，由于跨域政策。

从另一个域请求外部脚本没有这个问题。

JSONP 利用了这个优势，并使用 script 标签替代 XMLHttpRequest 对象。

2.创建动态脚本标签

上例会在页面加载时执行 “myFunc” 函数，根据您放置脚本标签的位置，这样不很令人满意。

Script 只应该在需要时创建：

在按钮被点击时创建和插入

点击按钮

将创建一个带有 src 属性的 script 标签并将其放在文档中。

PHP 文件以 JSON 对象作为参数返回对函数的调用。

单击我！

3.动态 JSONP 结果

可通过向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 php 文件获得的信息让它返回一个 JSON 对象。

PHP 文件

<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo "myFunc(".json_encode($outp).")"; ?>

解释：

• 把请求转换为对象，使用 PHP 函数 json_decode()。

• 访问数据库MYSQLI_ASSOC，并用被请求的数据填充数组。

• 向对象添加数组。

• 使用 json_decode() 函数把该数组转换为 JSON。

• 用 “myFunc()” 封装返回对象。

点击按钮

将创建一个带有 src 属性的 script 标签并将其放在文档中。

PHP 文件以 JSON 对象作为参数返回对函数的调用。

单击我！

请尝试将 table 属性从“customers”更改为“products”。