JSON和Ajax

JSON

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它以易于阅读和编写的方式来表示结构化数据。JSON 格式在 Web 开发中被广泛使用,尤其是在前后端数据传输和存储方面。

数据结构

JSON 使用键值对的方式来组织数据,其中键必须是字符串,值可以是字符串、数字、布尔值、对象、数组或 null。这种结构化的数据表示使得 JSON 非常适合表示复杂的层次结构和关联关系。

语法规则

  • 键和值之间使用冒号(:)分隔。

  • 键值对之间使用逗号(,)分隔。

  • 对象使用花括号({})表示,键值对在花括号内部。

  • 数组使用方括号([])表示,元素之间使用逗号分隔。

  • 字符串值使用双引号("")包裹。

应用

在 JavaScript 中,可以使用 JSON.parse() 将 JSON 字符串解析为 JavaScript 对象,使用 JSON.stringify() 将 JavaScript 对象序列化为 JSON 字符串。

var object = {
    name : 'Cristrik010',
    age : 18,
    email : 'xxx@qq.com'
}
console.log(object);
var str = JSON.stringify(object)
console.log(str)
var test = JSON.parse(str)
console.log(test)
TypeScript

Ajax

Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的Web开发技术。它利用 JavaScriptXML(现已更常使用JSON)HTTP等技术,实现了在不刷新整个页面的情况下,通过与服务器异步通信来更新部分网页内容的能力。

传统的网页交互是同步的,用户与网页进行交互时,需要完全刷新页面才能获取新的数据或响应。而Ajax引入了异步通信的概念,使得浏览器可以通过后台与服务器进行数据交换,并使用获取到的数据来动态更新网页的某个部分,而不需重新加载整个页面。

jQuery Ajax

jQuery Ajax 是在 jQuery JavaScript 库中提供的一组用于进行异步通信的方法。它简化了使用原生 JavaScript 的 XMLHttpRequest 对象进行 Ajax 请求时的繁琐操作,使得开发者能够更便捷地实现与服务器的数据交互。

一个简单示例

<script>    
    $.ajax({
      url: '/api/data',
      type: 'GET',
      success: function(response) {
        // 处理成功响应的数据
        console.log(response);
      },
      error: function(xhr, status, error) {
        // 处理错误情况
        console.log(error);
      }
    });
</script>
XML

参数(Options)

参数名

描述

url

指定请求的 URL。

type

指定请求的类型,常见的有 GET、POST、PUT、DELETE 等。

data

设置要发送到服务器的数据,可以是对象、字符串或序列化形式的表单数据。

dataType

指定预期从服务器返回的数据类型,常见的有 "json"、"xml"、"html"、"text" 等。

success

定义一个回调函数,在请求成功时被调用,接收服务器返回的数据。

error

定义一个回调函数,在请求发生错误时被调用,接收错误信息和错误状态。

complete

定义一个回调函数,在请求完成时(无论成功或失败)被调用。

headers

设置请求头。

timeout

设置请求超时时间(以毫秒为单位)。

crossDomain

设置是否支持跨域请求。

方法

方法名

描述

$.ajax()

发送一个 Ajax 请求。通过传递一个配置选项对象来指定请求参数和回调函数。

$.get()

发送一个 GET 请求。简化了 $.ajax() 方法的用法,可直接传递 URL、数据和回调函数等参数。

$.post()

发送一个 POST 请求。类似于 $.get(),用于向服务器提交数据。

$.getJSON()

发送一个 GET 请求并期望以 JSON 格式获取数据。

$.ajaxSetup()

全局设置默认的 Ajax 请求参数,将参数应用于所有后续的 Ajax 请求。

上述表格中只列举了常用的参数和方法,实际上 jQuery Ajax 还有更多可供使用的选项和方法,可以根据具体需求进行查阅和使用。