前端之JSON

时间：2025-03-28 11:37:40

前端之JSON

  • JSON
    • JSON概念
    • 注意事项
    • JSON格式验证
  • JSON格式
    • JSON说明
    • Ajax实例
    • JSON实例
    • 对象和文本间的转换
  • [对象实践 -- 弹跳彩球](//project/bouncing-balls-start/)
  • [对象实践 -- 弹跳彩球](//project/bouncing-balls-start2/)

JSON

JSON概念

JSON ( JavaScript对象表示法 ) 是一种轻量级的数据交换格式。用于将结构化数据表示为JavaScript对象的标准格式，通常**用于在网站上表示和传输数据. **

JSON是基于 JavaScript 语法，但它又独立于JavaScript, 所以许多程序环境能够读取（解读）和生成 JSON。

JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。

JSON 对象就是基于 JavaScript 对象. 一个 JSON 对象可以被储存在 .json类型的文本文件中.

注意事项

  1. JSON 是一种纯数据格式，它只包含属性，没有方法。
  2. JSON要求在字符串和属性名称周围使用 “双引号”。 单引号无效。
  3. JSON 可以将任何标准合法的 JSON 数据格式化保存。

JSON格式验证

JSON格式

JSON说明

  1. URL一般指统一资源定位系统,URI 统一资源标识符.
  2. XMLHttpRequest()类
    XML 指可扩展标记语言
    Http超文本传输协议
  3. XMLHttpRequest方法open() 初始化一个新创建的请求，或者重新初始化一个现有的请求。
(method, url[, async[, user[, password]]])
  1. 该XMLHttpRequest属性 responseType是一个枚举字符串值，用于指定响应中包含的数据类型。
  2. XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。
  3. XMLHttpRequest response 属性返回响应的正文, 类型取决于responseType

Ajax实例

传统的Ajax指的是XMLHttpRequest(XHR)：
一个XHR
2.调用open()方法
()发送
4.返回的数据在XHR对象的response属性中。XHR对象使用onload事件处理

Fetch是ajax的替代品，更好更方便

var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();

JSON实例

var header = document.querySelector('header');
var section = document.querySelector('section');

// 加载JSON  
// 1.用一个变量存储将访问的 URL 
var requestURL = '/learning-area/javascript/oojs/json/';
// 2.创建一个HTTP请求对象
var request = new XMLHttpRequest();

// 3.打开请求, 指定http方法和请求地址
request.open('GET', requestURL);

// 4.请求对象的responseType属性指定响应数据类型
request.responseType = 'json';
request.send();


// 5.获取JSON数据
request.onload = function() {
    var superHeroes = request.response; //保存我们请求的数据
    populateHeader(superHeroes);//使用数据
    showHeroes(superHeroes);
}

// 6.编写使用的函数
function populateHeader(jsonObj) { // 创建，设置内容，追加到 <header>。
    var myH1 = document.createElement('h1');
    myH1.textContent = jsonObj['squadName'];
    header.appendChild(myH1);

    var myPara = document.createElement('p');
    myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
    header.appendChild(myPara);
}

function showHeroes(jsonObj) {
    var heroes = jsonObj['members'];

    for (i = 0; i < heroes.length; i++) {
        var myArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var myPara1 = document.createElement('p');
        var myPara2 = document.createElement('p');
        var myPara3 = document.createElement('p');
        var myList = document.createElement('ul');

        myH2.textContent = heroes[i].name;
        myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
        myPara2.textContent = 'Age: ' + heroes[i].age;
        myPara3.textContent = 'Superpowers:';

        var superPowers = heroes[i].powers;
        for (j = 0; j < superPowers.length; j++) {
            var listItem = document.createElement('li');
            listItem.textContent = superPowers[j];
            myList.appendChild(listItem);
        }

        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myPara3);
        myArticle.appendChild(myList);

        section.appendChild(myArticle);
    }
}

对象和文本间的转换

  • () 方法用于将 JavaScript 值转换为( JSON )字符串。
var myJSON = { "name" : "Chris", "age" : "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString
  • () 方法将数据转换为 JavaScript 对象。 
request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // ******convert it to an object******
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

对象实践 – 弹跳彩球

对象实践 – 弹跳彩球

改进:

  1. 恶魔球不会出界
  2. 彩球不会静止
  3. 恶魔球会随着吞噬彩球而不断变大

相关文章