ajax与json

1、ajax
- 1.1、什么是ajax
- 1.2、ajax核心
- - [AJAX 工作原理](#AJAX 工作原理)
  - 示例代码
  - 重要属性和方法
  - 兼容性
- [1.3、jQuery ajax](#1.3、jQuery ajax)
- - [什么是jQuery ajax](#什么是jQuery ajax)
  - [jQuery AJAX 核心概念](#jQuery AJAX 核心概念)
  - 基本用法
  - - [1. **使用 $.ajax() 方法**](#1. 使用 $.ajax() 方法)
    - [2. **使用简化方法**](#2. 使用简化方法)
    - - [**使用 $.get() 方法**](#使用 $.get() 方法)
      - [**使用 $.post() 方法**](#使用 $.post() 方法)
  - 常用配置选项
  - 示例：发送表单数据
2、json
- 2.1、什么是json
- [2.2、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 请求从服务器获取数据：

javascript 复制代码

// 创建 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() 方法的基本示例：

javascript 复制代码

$.ajax({
    url: 'https://api.example.com/data',  // 请求的 URL
    type: 'GET',  // 请求方法（GET、POST 等）
    dataType: 'json',  // 预期服务器返回的数据类型（json、xml、html 等），默认是application/text
    success: 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() 方法

javascript 复制代码

$.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() 方法

javascript 复制代码

$.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 发送数据到服务器：

html 复制代码

<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 对象是一个无序的键值对集合，用花括号 {} 包围。
示例：
json 复制代码
```
{
    "name": "Alice",
    "age": 30,
    "isStudent": false
}
```
数组：
- JSON 数组是一个有序的值列表，用方括号 [] 包围。
示例：
json 复制代码
```
[
    "apple",
    123,
    true,
    { "key": "value" },
    [1, 2, 3]
]
```
字符串：
- JSON 字符串必须用双引号 " 包围。
示例：
json 复制代码
```
"Hello, World!"
```
数字：
- JSON 数字可以是整数或浮点数，支持正数、负数和零。
示例：
json 复制代码
```
42
-3.14
0
```
布尔值：
- JSON 支持 true 和 false 两个布尔值。
示例：
json 复制代码
```
true
false
```
null：
- JSON 中的空值用 null 表示。
示例：
json 复制代码
```
null
```

嵌套结构

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

示例：

json 复制代码

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

注释

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

错误示例

键未加引号：

json 复制代码

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

字符串未加引号：

json 复制代码

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

多余的逗号：

json 复制代码

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

目录

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 语法规则

嵌套结构

注释

错误示例