第十一篇JavaScript JSON与AJAX

简介: 第十一篇JavaScript JSON与AJAX

JSON

在JavaScript中,JSON(JavaScript Object Notation)是一种常用的数据格式,用于存储和交换数据。它基于JavaScript的对象字面量语法,但具有更宽松的语法规则。

json 是一种轻量级的数据交换格式

JSON使用键值对的方式表示数据,其中键是一个字符串,值可以是字符串、数字、布尔值、对象、数组或null。以下是一个简单的JSON示例:

{
  "name": "John",
  "age": 25,
  "isStudent": true,
  "hobbies": ["reading", "playing guitar"],
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
} 

在JavaScript中,可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象,如下所示:

var jsonString = '{"name":"John","age":25,"isStudent":true}';
var jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // 输出 "John"
console.log(jsonObject.age); // 输出 25
console.log(jsonObject.isStudent); // 输出 true 

相反,可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串,如下所示:

var jsonObject = {
  name: "John",
  age: 25,
  isStudent: true
};
var jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出 '{"name":"John","age":25,"isStudent":true}' 

JSON在Web开发中常用于从服务器获取数据,并在前端进行处理和展示。

AJAX

ajax 的全称 Asynchronous JavaScript and XML (异步 JavaScript 和 XML)。

ajax 是一种创建交互式网页应用的网页开发技术

在JavaScript中使用Ajax可以通过创建一个XMLHttpRequest对象来发送请求,并通过回调函数处理响应结果。以下是一个简单的示例:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 请求成功
        var response = xhr.responseText;
        console.log(response);
    }
};
xhr.open('GET', 'example.com/api', true); 

在上述示例中,通过XMLHttpRequest对象创建了一个异步请求。onreadystatechange事件在请求状态改变时触发,当readyState为4且status为200时表示请求成功。可以通过responseText属性获取服务器响应的数据。

除了GET请求,还可以使用xhr.open方法指定POST请求,并通过xhr.send方法发送请求体数据。

现在,Ajax技术已经发展到了更加方便和高级的阶段,常用的方式是使用jQuery框架的$.ajax方法来进行Ajax请求。例如:

$.ajax({
    url: 'example.com/api',
    method: 'GET',
    success: function(response) {
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.log(error);
    }
}); 

$.ajax方法接收一个配置对象,其中url指定请求的URL,method指定请求方法,successerror分别是请求成功和请求失败时的回调函数。

除了jQuery,还有其他一些流行的库和框架,如axios和fetch,也提供了更加简洁和便利的方式来进行Ajax请求。


相关文章
|
15天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
16天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
14 1
|
25天前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
23 8
|
29天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
JSON JavaScript 前端开发
js将json字符串还原为json
【6月更文挑战第15天】js将json字符串还原为json
22 4
|
9天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
13天前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
17 0
|
1月前
|
存储 JSON JavaScript
JavaScript基础-对象与JSON
【6月更文挑战第11天】本文介绍了JavaScript对象的创建(字面量、构造函数、Class)与操作,包括属性访问和描述符。同时讲解了JSON的性质及其与JS对象的关系,以及序列化和解析过程。文章还列举了三个常见易错点(属性访问错误、JSON格式错误、循环引用)并提供了避免策略。通过代码示例展示如何操作对象和处理JSON,强调实践对于掌握这些概念的重要性。
|
15天前
|
JSON JavaScript 前端开发
|
16天前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
7 0