ajax与json

1、ajax
- 1.1、什么是ajax
- 1.2、ajax核心
- - AJAX 工作原理
  - 示例代码
  - 重要属性和方法
  - 兼容性
- 1.3、jQuery ajax
- - 什么是jQuery ajax
  - jQuery AJAX 核心概念
  - 基本用法
  - - 1. **使用 $.ajax() 方法**
    - 2. **使用简化方法**
    - - **使用 $.get() 方法**
      - **使用 $.post() 方法**
  - 常用配置选项
  - 示例：发送表单数据
2、json
- 2.1、什么是json
- 2.2、JSON 语法规则
- - 嵌套结构
  - 注释
  - 错误示例

1、ajax

1.1、什么是ajax

AJAX 全称为 Asynchronous JavaScript And Xml ，表示异步的Java脚本和 Xml 文件，是一种异步刷新技术。

1.2、ajax核心

XMLHttpRequest 对象：
- XMLHttpRequest 是 AJAX 的核心技术，它是一个浏览器内置的对象，可以向服务器发送 HTTP 请求并接收响应，而不必重新加载整个网页。
异步请求：
- AJAX 的核心是异步通信，这意味着客户端可以向服务器发送请求，并在后台等待响应，同时不阻塞用户界面。
数据交换格式：
- 虽然 AJAX 中的 “X” 代表 XML，但实际应用中，数据可以是任何形式，包括 XML、JSON、文本等。JSON 因其轻量级和易用性，现在是最常见的数据格式。
回调函数：
- 在 AJAX 中，通常使用回调函数来处理服务器的响应。当异步请求完成时，回调函数会被调用，并处理返回的数据。

AJAX 工作原理

创建 XMLHttpRequest 对象：
- 使用 JavaScript 创建一个 XMLHttpRequest 实例。
配置请求：
- 设置请求方法（如 GET、POST）、URL 和是否异步。
发送请求：
- 调用 send() 方法发送请求到服务器。
处理响应：
- 通过监听 XMLHttpRequest 的 onreadystatechange 事件，当请求状态改变时，检查状态码和响应数据，并进行相应的处理。

示例代码

以下是一个简单的 AJAX 示例，使用 GET 请求从服务器获取数据：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');// 定义回调函数
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 请求成功，处理响应数据var data = JSON.parse(xhr.responseText);console.log(data);} else if (xhr.readyState === 4) {// 请求失败console.error('Request failed with status', xhr.status);}
};// 发送请求
xhr.send();

重要属性和方法

readyState：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，响应就绪
status：
- 200: 请求成功
- 404: Not Found
- 500: Internal Server Error
responseText：
- 服务器返回的文本数据
responseXML：
- 服务器返回的 XML 数据

兼容性

老式浏览器：
- 在一些旧的浏览器中，需要使用 ActiveXObject 来创建 XMLHttpRequest 对象。
现代浏览器：
- 所有现代浏览器都支持 XMLHttpRequest 对象。

1.3、jQuery ajax

什么是jQuery ajax

jQuery 是一个非常流行的 JavaScript 库，它简化了 HTML 文档的操作、事件处理、动画和 Ajax 交互。使用 jQuery 可以更方便地进行 AJAX 请求。jQuery 提供了一个强大的 $.ajax() 方法，可以轻松地发送 AJAX 请求，并处理响应。

jQuery AJAX 核心概念

$.ajax() 方法：
- $.ajax() 是 jQuery 中用于发送 AJAX 请求的主要方法。它提供了丰富的配置选项，可以灵活地控制请求的各个方面。
简化的 AJAX 方法：
- jQuery 还提供了几个简化的 AJAX 方法，如 $.get(), $.post(), $.getJSON() 等，这些方法在常见的使用场景下更加方便。

基本用法

1. 使用 $.ajax() 方法

以下是一个使用 $.ajax() 方法的基本示例：

$.ajax({url: 'https://api.example.com/data',  // 请求的 URLtype: 'GET',  // 请求方法（GET、POST 等）dataType: 'json',  // 预期服务器返回的数据类型（json、xml、html 等），默认是application/textsuccess: function(response) {// 请求成功时的回调函数console.log('Success:', response);},error: function(xhr, status, error) {// 请求失败时的回调函数console.error('Error:', status, error);},complete: function(xhr, status) {// 请求完成时的回调函数（无论成功或失败）console.log('Complete:', status);}
});

2. 使用简化方法

使用 $.get() 方法

$.get('https://api.example.com/data', function(response) {// 请求成功时的回调函数console.log('Success:', response);
}).fail(function(xhr, status, error) {// 请求失败时的回调函数console.error('Error:', status, error);
}).always(function() {// 请求完成时的回调函数（无论成功或失败）console.log('Complete');
});

使用 $.post() 方法

$.post('https://api.example.com/data', { key: 'value' }, function(response) {// 请求成功时的回调函数console.log('Success:', response);
}).fail(function(xhr, status, error) {// 请求失败时的回调函数console.error('Error:', status, error);
}).always(function() {// 请求完成时的回调函数（无论成功或失败）console.log('Complete');
});

常用配置选项

url：请求的 URL。
type：请求方法（GET、POST 等）。
data：发送到服务器的数据，可以是字符串、对象或数组。
dataType：预期服务器返回的数据类型（json、xml、html 等）。
contentType：发送到服务器的数据类型（默认为 application/x-www-form-urlencoded; charset=UTF-8）。
success：请求成功时的回调函数。
error：请求失败时的回调函数。
complete：请求完成时的回调函数（无论成功或失败）。
timeout：请求超时时间（毫秒）。

示例：发送表单数据

假设你有一个表单，你希望在用户提交表单时使用 AJAX 发送数据到服务器：

<form id="myForm"><input type="text" name="name" placeholder="Name"><input type="text" name="email" placeholder="Email"><button type="submit">Submit</button>
</form><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {$('#myForm').submit(function(event) {event.preventDefault();  // 阻止表单默认提交var formData = $(this).serialize();  // 序列化表单数据$.ajax({url: 'https://api.example.com/submit',type: 'POST',data: formData,success: function(response) {console.log('Success:', response);alert('Form submitted successfully!');},error: function(xhr, status, error) {console.error('Error:', status, error);alert('An error occurred while submitting the form.');}});});
});
</script>

2、json

2.1、什么是json

JSON 全称为 JavaScript Object Notation，表示 Javascript 对象符号，是一种网络数据交换的格式，通常在服务器端和客户端之间使用。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON 基于 JavaScript 的一个子集，但它是一种独立于语言的文本格式。

2.2、JSON 语法规则

数据格式：
- JSON 数据由键值对组成，键和值之间用冒号 : 分隔，键值对之间用逗号 , 分隔。
- 键必须用双引号 " 包围，值可以是字符串、数字、对象、数组、布尔值或 null。
对象：
- JSON 对象是一个无序的键值对集合，用花括号 {} 包围。
示例：
```
{"name": "Alice","age": 30,"isStudent": false
}
```
数组：
- JSON 数组是一个有序的值列表，用方括号 [] 包围。
示例：
```
["apple",123,true,{ "key": "value" },[1, 2, 3]
]
```
字符串：
- JSON 字符串必须用双引号 " 包围。
示例：
```
"Hello, World!"
```
数字：
- JSON 数字可以是整数或浮点数，支持正数、负数和零。
示例：
```
42
-3.14
0
```
布尔值：
- JSON 支持 true 和 false 两个布尔值。
示例：
```
true
false
```
null：
- JSON 中的空值用 null 表示。
示例：
```
null
```

嵌套结构

JSON 支持嵌套结构，即对象中可以包含对象或数组，数组中也可以包含对象或数组。

示例：

{"name": "Bob","age": 25,"address": {"street": "123 Main St","city": "Anytown","zip": "12345"},"hobbies": ["reading", "swimming", "coding"],"isEmployed": true,"spouse": null
}

注释

JSON 本身不支持注释，但在某些实现中，注释可以被忽略。如果需要在 JSON 中添加注释，通常建议在数据之外的上下文中进行。

错误示例

键未加引号：

{name: "Alice"  // 错误：键必须用双引号包围
}

字符串未加引号：

{"name": Alice  // 错误：字符串必须用双引号包围
}

多余的逗号：

{"name": "Alice",  // 错误：最后一个键值对后不能有逗号"age": 30,
}