Ajax和Json

Ajax

1 概念

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的技术。它允许在不重新加载整个网页的情况下，通过后台服务器异步加载数据，使网页更加动态和用户友好。

通过Ajax可以使用JavaScript向服务器发送HTTP请求，并在不刷新整个页面的情况下获取、发送数据。所以通过它可以：

1. 异步加载数据：从服务器加载数据，使网页更加动态和快速，不需要刷新整个页面。

2. 用户体验：提供更好的用户体验，用户可以在不中断操作的情况下与网页交互。

3. 动态内容：动态更新页面内容，而不需要重新加载整个页面。

4. 表单验证：可以在不提交表单的情况下进行验证，提供实时的反馈。

5. 实时更新：用于聊天应用、实时数据更新等场景，可以在后台发生变化时，实时更新前端数据。

2 实现方式

2.1 使用XMLHttpRequest对象

XMLHttpRequest是原生JavaScript提供的用于创建和发送HTTP请求的对象。它提供了一种在不刷新整个页面的情况下，通过后台服务器异步加载数据的方法。

以下是一个使用XMLHttpRequest的简单Ajax请求的例子：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var responseData = xhr.responseText;
        // 处理从服务器返回的数据
        console.log(responseData);
    }
};
xhr.send();

2.2 JQeury实现方式

1. $.ajax()

语法：$.ajax({键值对})

$.ajax({
	url:"http://localhost:8080/ajax-demo/ajax",// 请求路径
	method:"post", //请求方式
	data:{//请求参数
		username:'tomcat',
		password:'123456'
	},
	dataType:'json',//设置接受到的响应数据的格式
	success:function (data) {//响应成功后的回调函数
	  alert(data.msg);
	  alert(data.success);
	  $("#msg").html(data);
	}
})

2. $.get()：发送get请求

语法：$.get(url, [data], [callback], [type])
参数：

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型

3. $.post()：发送post请求

语法：$.post(url, [data], [callback], [type])
参数：

• url：请求路径
• data：请求参数
• callback：回调函数
• type：响应结果的类型

$.post("http://localhost:8080/ajax-demo/ajax", {username: 'tomcat', password: '123456'}, function(data) {
    alert(data.msg);
    alert(data.success);

    var s = JSON.stringify(data); //把对象转成string
    $("#msg").html(s);
});

Json

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON数据是以键值对的形式存在的，键值对之间使用逗号,分隔，而键和值之间使用冒号:分隔。JSON数据可以表示数字、字符串、布尔值、数组、对象等数据结构。

以下是一个简单的JSON对象的例子：

{
    "name": "John",
    "age": 30,
    "isMarried": false,
    "children": [
        {
            "name": "Alice",
            "age": 5
        },
        {
            "name": "Bob",
            "age": 8
        }
    ]
}

在JavaScript中，可以使用JSON对象的JSON.stringify()方法将JavaScript对象转换为JSON字符串，使用JSON.parse()方法将JSON字符串转换为JavaScript对象。

JavaScript对象转换为JSON字符串

var person = {
    name: "John",
    age: 30,
    isMarried: false,
    children: [
        { name: "Alice", age: 5 },
        { name: "Bob", age: 8 }
    ]
};

var jsonString = JSON.stringify(person);
console.log(jsonString);

上述代码将JavaScript对象person转换为JSON字符串。

JSON字符串转换为JavaScript对象

var jsonString = '{"name":"John","age":30,"isMarried":false,"children":[{"name":"Alice","age":5},{"name":"Bob","age":8}]}';

var person = JSON.parse(jsonString);
console.log(person.name);  // 输出: John
console.log(person.age);   // 输出: 30

上述代码将JSON字符串转换为JavaScript对象person。