JSON 튜 토리 얼 json 입문 학습 노트

JSON:JavaScript Object Notation(JavaScript 대상 표현법)
JSON 은 텍스트 정 보 를 저장 하고 교환 하 는 문법 이다.XML 과 유사 하 다.
JSON 은 XML 보다 작고 빠 르 며 해석 하기 쉽다.
JSON 인 스 턴 스

{
 "sites": [
 { "name":"  " , "url":"www.jb51.net" }, 
 { "name":"google" , "url":"www.google.com" }, 
 { "name":"  " , "url":"www.weibo.com" }
 ]
}
이 사이트 의 대상 은 세 개의 사이트 기록(대상)을 포함 하 는 배열 입 니 다.
JSON 이 뭐야?
JSON 은 JavaScript 대상 표현법(JavaScript Object Notation)을 말 합 니 다.
JSON 은 경량급 텍스트 데이터 교환 형식 입 니 다.
JSON 은 언어 에 독립 되 어 있 습 니 다.JSON 은 자바 script 문법 으로 데이터 대상 을 묘사 하지만 JSON 은 언어 와 플랫폼 에 독립 되 어 있 습 니 다.JSON 해상도 기와 JSON 라 이브 러 리 는 다양한 프로 그래 밍 언어 를 지원 합 니 다.현재 매우 많은 동적(PHP,JSP,.NET)프로 그래 밍 언어 는 JSON 을 지원 합 니 다.
JSON 은 자기 서술 성 을 가지 고 있어 이해 하기 쉽다.
JSON-JavaScript 대상 으로 변환
JSON 텍스트 형식 은 문법 적 으로 자 바스 크 립 트 대상 을 만 드 는 코드 와 같 습 니 다.
이러한 유사 성 때문에 해석 기 가 필요 없 이 자 바스 크 립 트 프로그램 은 내 장 된 eval()함 수 를 사용 하여 JSON 데이터 로 원생 자 바스 크 립 트 대상 을 생 성 할 수 있 습 니 다.
온라인 인 스 턴 스
저희 편집 기 를 통 해 자바 스 크 립 트 코드 를 온라인 으로 편집 한 다음 단 추 를 누 르 면 결 과 를 볼 수 있 습 니 다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>  (jb51.net)</title>
</head>
<body>
<h2>JavaScript    JSON   </h2>
<p>
    : <span id="jname"></span><br /> 
    : <span id="jurl"></span><br /> 
   slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
 "name":"  ",
 "url":"www.jb51.net", 
 "slogan":"       ,    !"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script> 
</body>
</html>
XML 과 같은 점
JSON 은 텍스트 입 니 다.
JSON 은'자기 묘사 성'(인간 이 읽 을 수 있 음)을 가지 고 있다.
JSON 은 등급 구 조 를 가지 고 있 습 니 다.(값 에 존재 하 는 값)
JSON 은 JavaScript 를 통 해 해석 할 수 있 습 니 다.
JSON 데 이 터 는 AJAX 로 전송 할 수 있 습 니 다.
XML 과 다른 점
끝 탭 없 음
더 짧다
읽 고 쓰 는 속도 가 더 빨 라 요.
내 장 된 JavaScript eval()방법 으로 해석 할 수 있 습 니 다.
배열 사용
보존 자 사용 안 함
JSON 을 왜 써 요?
AJAX 응용 프로그램 에 있어 JSON 은 XML 보다 빠 르 고 사용 하기 쉽다.
XML 사용
XML 문서 읽 기
XML DOM 을 사용 하여 문 서 를 반복 합 니 다.
값 을 읽 고 변수 에 저장 합 니 다.
JSON 사용 하기
JSON 문자열 읽 기
JSON 문자열 을 eval()로 처리 합 니 다.
JSON 문법
JSON 문법 은 자 바스 크 립 트 문법의 부분 집합 이다.
JSON 문법 규칙
JSON 문법 은 자 바스 크 립 트 대상 이 문법 을 나타 내 는 부분 집합 이다.
데 이 터 는 이름/값 쌍 에 있 습 니 다.
데 이 터 는 쉼표 로 구분 된다.
대괄호 저장 대상
괄호 로 배열 저장
JSON 이름/값 쌍
JSON 데이터 의 쓰기 형식 은 이름/값 이 맞습니다.
이름/값 은 필드 이름(작은 따옴표 에 있 음)을 포함 하고,뒤에 가짜 번 호 를 쓰 고,그 다음 값:
"name":"우리"
이것 은 쉽게 이해 할 수 있 습 니 다.이 자바 스 크 립 트 문장 과 같 습 니 다.
우리
JSON 값
JSON 값 은:
숫자(정수 또는 부동 소수점)
문자열(따옴표 에 있 음)
논리 값(true 또는 false)
배열(괄호 안에 있 음)
대상
null
JSON 숫자
JSON 숫자 는 정형 또는 부동 소수점 형 일 수 있 습 니 다.
{ "age":30 }
JSON 대상
JSON 대상 은 대괄호({})에 쓰기:
대상 은 여러 개의 이름/값 쌍 을 포함 할 수 있 습 니 다:
{"name":"우리","url":"www.jb51.net"}
이것 도 쉽게 이해 할 수 있 습 니 다.이 JavaScript 문장 과 등가 입 니 다.
우리
url = "www.jb51.net"
JSON 배열
JSON 배열 은 괄호 안에 다음 과 같이 적 습 니 다.
배열 은 여러 개의 대상 을 포함 할 수 있 습 니 다:
{
"sites": [
{"name":"우리","url":"www.jb51.net"},
{ "name":"google" , "url":"www.google.com" },
{"name":"웨 이 보","url":"www.weibo.com"}
]
}
위의 예 에서 대상'sites'는 세 개의 대상 을 포함 하 는 배열 이다.각 대상 은 특정한 사이트(name,url)에 대한 기록 을 대표 합 니 다.
JSON 불 값
JSON 불 값 은 true 또는 false 일 수 있 습 니 다.
{ "flag":true }
JSON null
JSON 은 null 값 을 설정 할 수 있 습 니 다:
{ "jb51":null }
JSON 은 JavaScript 문법 을 사용 합 니 다.
JSON 은 자 바스 크 립 트 문법 을 사용 하기 때문에 별도의 소프트웨어 없 이 자 바스 크 립 트 의 JSON 을 처리 할 수 있 습 니 다.
JavaScript 를 통 해 대상 배열 을 만 들 고 이렇게 할당 할 수 있 습 니 다.
var sites = [
    { "name":"jb51" , "url":"www.jb51.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"웨 이 보","url":"www.weibo.com"}
];
자 바스 크 립 트 대상 배열 의 첫 번 째 항목 에 이렇게 접근 할 수 있 습 니 다(색인 은 0 부터).
sites[0].name;
돌아 오 는 내용 은:
jb51
이렇게 데 이 터 를 수정 할 수 있 습 니 다:
sites[0].name="우리";

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>  (jb51.com)</title>
</head>
<body>
<h2>JavaScript    JSON   </h2>
<p>       : <span id="name1"></span></p> 
<p>           : <span id="name2"></span></p> 

<script>
var sites = [
	{ "name":"jb51" , "url":"www.jb51.com" }, 
	{ "name":"google" , "url":"www.google.com" }, 
	{ "name":"  " , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
//       
sites[0].name="  ";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>
</html>
다음 장 에서 JSON 텍스트 를 JavaScript 대상 으로 변환 하 는 방법 을 배 울 것 입 니 다.
JSON 파일
JSON 파일 의 파일 형식 은"json"입 니 다.
JSON 텍스트 의 MIME 형식 은"application/json"입 니 다.
JSON vs XML
JSON 과 XML 은 모두 웹 서버 의 데 이 터 를 수신 하 는 데 사용 된다.
JSON 과 XML 은 표기 법 에 있어 서 다음 과 같다.
JSON 인 스 턴 스
{
    "sites": [
    { "name":"우리","url":"www.jb51.com"},
    { "name":"google" , "url":"www.google.com" },
    { "name":"웨 이 보","url":"www.weibo.com"}
    ]
}
XML 인 스 턴 스

<sites>
 <site>
  <name>  </name> <url>www.jb51.com</url>
 </site>
 <site>
  <name>google</name> <url>www.google.com</url>
 </site>
 <site>
  <name>  </name> <url>www.weibo.com</url>
 </site>
</sites>
JSON 과 XML 의 공통점:
JSON 과 XML 데 이 터 는 모두'자기 묘사'로 이해 하기 쉽다.
JSON 과 XML 데 이 터 는 차원 이 있 는 구조 입 니 다.
JSON 과 XML 데 이 터 는 대부분의 프로 그래 밍 언어 에서 사용 할 수 있 습 니 다.
JSON 과 XML 의 차이 점:
JSON 은 탭 을 끝 낼 필요 가 없습니다.
JSON 이 더 짧 아 요.
JSON 읽 기와 쓰기 속도 가 빨 라 요.
JSON 은 배열 을 사용 할 수 있 습 니 다.
가장 큰 차이 점 은 XML 은 XML 해상도 기 를 사용 하여 해석 해 야 하 며,JSON 은 표준 자 바스 크 립 트 함 수 를 사용 하여 해석 할 수 있다 는 것 이다.
JSON.parse():JSON 문자열 을 JavaScript 대상 으로 변환 합 니 다.
JSON.stringify():JavaScript 값 을 JSON 문자열 로 변환 합 니 다.
왜 JSON 이 XML 보다 더 좋아요?
XML 은 JSON 보다 해석 하기 어렵다.
JSON 은 기 존의 JavaScript 대상 을 직접 사용 하여 해석 할 수 있 습 니 다.
AJAX 응용 프로그램 에 대해 JSON 은 XML 데이터 로드 보다 빠 르 고 간단 합 니 다.
XML 사용
XML 문서 가 져 오기
XML DOM 반복 문서 사용 하기
데 이 터 를 분석 하여 변수 에 복사 합 니 다.
JSON 사용 하기
JSON 문자열 가 져 오기
JSON.Parse 해석 JSON 문자열
제 이 슨 소개:
JSON(JavaScript Object Notation)은 경량급 데이터 교환 형식 이다.사람 이 읽 고 쓰기 쉽다.
      json 공식 사이트
      json.net 다운로드 주소http://www.json.org/
Demo:
  
설명:
가 져 오기 단 추 를 누 르 면 요청 페이지 를 json 데 이 터 를 가 져 와 표 에 채 웁 니 다.
html 코드:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/jscript" src="../jquery/jquery-1.4.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
$("#Button1").click(function() { 
$.get("json1.aspx?m=m", null, function(callbackmsg) { 
var product = eval(callbackmsg); 
ShowProduct(product) 
}) 
}); 
}) 
function ShowProduct(callbackmsg) { 
var row=''; 
for (var u in callbackmsg) { 
var len = callbackmsg[u].length; 
row += '<tr>'; 
row += '<td>' + callbackmsg[u].Name + '</td>'; 
row += '<td>' + callbackmsg[u].Price + '</a></td>'; 
row += '<td>' + callbackmsg[u].Size + '</td>'; 
row += '</tr>'; 
} 
$("#body").html(row); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input id="Button1" type="button" value="  " /> 
</div> 
<table> 
<thead> 
<tr> 
<th> 
   
</th> 
<th> 
   
</th> 
<th> 
   
</th> 
</tr> 
</thead> 
<tbody id="body"> 
</tbody> 
</table> 
</form> 
</body> 
</html> 
배경 코드:

public partial class json1 : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (HttpContext.Current.Request.QueryString["m"] != null) 
{ 
List<Product> Products = new List<Product>(); 
Products.Add(new Product() { Name = "   ", Price = "4.2", Size = "30x50" }); 
Products.Add(new Product() { Name = "  ", Price = "1.2", Size = "30x50" }); 
Products.Add(new Product() { Name = " ", Price = "36", Size = "30x50" }); 
Products.Add(new Product() { Name = "  ", Price = "6.0", Size = "30x50" }); 
Products.Add(new Product() { Name = "  ", Price = "2.2", Size = "30x50" }); 
string json = JsonConvert.SerializeObject(Products); 
Response.Write(json); 
Response.End(); 
} 
} 
} 
public class Product 
{ 
public string Name { get; set; } 
public string Size { get; set; } 
public string Price { get; set; } 
} 
지식 포인트:
1.json 은 공식 적 으로.net 작업 에 사용 할 dll 라 이브 러 리 를 제 공 했 고,JSonConvert.SerializeObject 는.net 대상 을 json 으로 서열 화 했다.
2.Javascript 읽 기 json 대상 var product=eval(callbackmsg).
3.Javascript 에서 json 값 callbackmsg[u].Name 을 읽 습 니 다.

좋은 웹페이지 즐겨찾기