javascript json 읽기 및 쓰기 example_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript json 읽기 및 쓰기 example_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:52 PM

JSON(JavaScript Object Notation)은 XML보다 가벼운 간단한 데이터 형식입니다. JSON은 기본 JavaScript 형식입니다. 즉, JavaScript에서 JSON 데이터를 처리하는 데 특별한 API나 툴킷이 필요하지 않습니다.

JSON의 규칙은 간단합니다. 객체는 "이름/값" 쌍의 순서 없는 모음입니다. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "이름/값" 쌍은 ","(쉼표)로 구분됩니다. 자세한 내용은 http://www.json.org/json-zh.html

간단한 예:

js 코드

코드 복사 코드는 다음과 같습니다.

function showJSON() { 

var user = 

{ 
 
"username":"andy", 

"age":20, 

"info": { "tel": "123456", "cellphone" : "98765"} , 

"주소": 

[ 

{"city":"beijing","postcode":"222333"}, 
 
{" 도시":"newyork","우편번호":"555666"} 

] 

} 

alert(user.username); 
alert( user.age); 

alert(user.info.cellphone) 

alert(user.address[0].city); (user.address[ 0].postcode); 

} 

사용자 이름, 나이, 정보, 주소 등과 같은 속성을 가진 사용자 개체를 나타냅니다. 

JSON을 사용하여 간단하게 데이터를 수정할 수도 있습니다. 위의 예를 수정하세요

js 코드

코드 복사

코드는 다음과 같습니다. function showJSON() {

var user =

{ 

"username" :"andy", 

"age":20, 

"info": { "tel": "123456", "cellphone": "98765"}, 

"주소": 

[ 

{"city":"beijing","우편번호":"222333"}, 

{"city":"newyork" ,"우편번호 ":"555666"} 

] 

} 

alert(user.username) 

alert(user.age); 🎜>
alert(user.info.cellphone); 

alert(user.address[0].city) 

alert(user.address[0].postcode); 
 
user.username = "Tom"; 

alert(user.username); 

} 

JSON은 json.js 패키지를 제공합니다. download http://www.json.org/json.js 가져온 후 간단히 object.toJSONString()을 사용하여 JSON 데이터로 변환할 수 있습니다. 

js 코드

코드 복사

코드는 다음과 같습니다. 함수 showCar() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow")

alert(carr.toJSONString()); 🎜>
} 

기능 자동차(제조사, 모델, 연식, 색상) { 

this.make = make; 

this.model = 모델; >
this.year = year; 

this.color = color; 

} 

eval을 사용하여 JSON 문자를 객체로 변환할 수 있습니다 

 js 코드

코드 복사

코드는 다음과 같습니다.

function myEval( ) { var str = '{ "name": "Violet", "occupation": "character" }' var obj = eval('(' str ')') ;

 Alert(obj.toJSONString()); 

} 

또는 

js 코드 사용 
 🎜>

코드 복사

코드는 다음과 같습니다.

function myEval() { var str = '{ "이름": "보라색" , "직업": "문자" }'; var obj = str.parseJSON()

alert(obj.toJSONString()) ;

} 

다음은 프로토타입을 사용하여 JSON ajax 예제를 작성합니다. 

먼저 서블릿을 작성하고(제 것은 servlet.ajax.JSONTest1.java입니다) 문장을 작성합니다

java 코드

코드 복사

코드는 다음과 같습니다.

response.getWriter().print("{ /"name/": /"Violet/", /"occupation/ ": /"character/" }"); 페이지에 Ajax 요청 작성js 코드

코드를 복사하세요

코드는 다음과 같습니다.

 
function sendRequest() { 

var url = "/MyWebApp/JSONTest1"; 

var mailAjax = new Ajax.Request( 

url, 

{ 

메서드: 'get', 

onComplete: jsonResponse 

} 

) 

function jsonResponse(originalRequest) { 

alert(originalRequest.responseText); 

var myobj = originalRequest.responseText.parseJSON() 

alert(myobj .name); 

} 

prototype-1.5.1.js는 JSON 메서드인 String.evalJSON()을 제공하므로 json.js 메서드를 사용하지 않고도 위의 내용을 수정할 수 있습니다. 🎜>

js 코드

코드 복사 코드는 다음과 같습니다. function jsonResponse (originRequest) {

alert(originalRequest.responseText); 

var myobj = originalRequest.responseText.evalJSON(true); 

alert(myobj.name); > 
} 

JSON은 Java jar 패키지 http://www.json.org/java/index.html도 제공합니다. API도 매우 간단합니다. 예는 다음과 같습니다 

자바스크립트에 요청 매개변수 추가

js 코드

코드 복사

코드는 다음과 같습니다 function sendRequest() {

var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow")

var pars = "car =" carr.toJSONString(); 

var url = "/MyWebApp/JSONTest1"; 

var mailAjax = new Ajax.Request( 

url, 

{ 

메서드: 'get', 

매개변수: pars, 

onComplete: jsonResponse 

} 

) ; 

} 

JSON 요청 문자열을 사용하면 JSONObject를 생성하고 구문 분석하고 서블릿을 수정하여 JSON 처리를 추가할 수 있습니다(json.jar을 사용해야 함) 

java 코드

코드 복사

코드는 다음과 같습니다. private void doService (HttpServletRequest 요청, HttpServletResponse 응답) throws IOException {

String s3 = request.getParameter("car")

try { 

JSONObject jsonObj = new JSONObject(s3) ; 

System .out.println(jsonObj.getString("model")) 

System.out.println(jsonObj.getInt("year")) 

} catch (JSONException e) { 

e.printStackTrace(); 

} 

response.getWriter().print("{ /"name/": / "Violet/", /"occupation /": /"character/" }"); 

} 

JSONObject를 사용하여 JSON 문자열을 생성하고 서블릿을 수정할 수도 있습니다. 

java 코드

코드 복사

코드는 다음과 같습니다. private void doService(HttpServletRequest 요청, HttpServletResponse 응답) throws IOException {

String s3 = request.getParameter("car")

try { 

JSONObject jsonObj = new JSONObject( s3); 

System.out.println(jsonObj.getString("모델")) 

System.out.println(jsonObj.getInt("연도")); 
} catch(JSONException e) { 

e.printStackTrace(); 

} 

JSONObject resultJSON = new JSONObject() 

try { 

resultJSON.append("name" , "Violet") 

.append("occupation", "developer") 

.append("age", new 정수(22)); 

System.out.println(resultJSON.toString()) 

} catch(JSONException e) { 

e.printStackTrace(); 

} 

response .getWriter().print(resultJSON.toString()) 

} 

js 코드

코드 복사

코드는 다음과 같습니다. function jsonResponse(originalRequest) { alert (originalRequest.responseText);

var myobj = originalRequest.responseText.evalJSON(true);

alert(myobj.name);

}

참고

http://www.json.org/js.html

http://www.blogjava.net/Jkallen/archive/2006/03/28/37905 .html

http://www.json.org/

http://www.prototypejs.org/learn/json

http://www.json .org/java/index.html

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html

JSON 사용
JSON도 사용 이는 데이터를 기술하기 위한 경량 구문인 JavaScript Object Notation입니다. JSON은 JavaScript 언어의 하위 집합이기 때문에 우아합니다. 다음으로 이것이 왜 그렇게 중요한지 알게 될 것입니다. 먼저 JSON과 XML 구문을 비교해 보겠습니다.

JSON과 XML 모두 구조화된 방법을 사용하여 데이터를 설명합니다. 예를 들어, 주소록 애플리케이션은 XML 형식의 주소 카드를 생성하기 위한 웹 서비스를 제공할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

 
Sean Kelly 
 SK Consulting 
 
kelly@seankelly.biz '집' pref='1'>kelly@seankelly.tv 
 
 1 214 555 1212 
 1 214 555 1213 
 address type='work' format='us'>1234 Main St 
Springfield, TX 78080-1216 
5678 Main St 
Springfield, TX 78080-1316 
 
 http://seankelly.biz/ ;/address> 
http://seankelly.tv/ 

 🎜> 
JSON을 사용하며, 형식은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. { "fullname": "Sean Kelly", "org": "SK Consulting", "emailaddrs": [

{"type": "work", "value": "kelly@seankelly.biz"},

{"type": "home", "pref": 1, "value": "kelly @seankelly.tv"} 
], 
"전화": [ 
{"type": "work", "pref": 1, "value": " 1 214 555 1212"}, 
{"type": "fax", "value ": " 1 214 555 1213"}, 
{"type": "mobile", "value": " 1 214 555 1214"} 
] , 
"addresses": [ 
{ "type": "work", "format": "us", 
"value": "1234 Main StnSpringfield, TX 78080-1216"}, 
{"type": "home", "format" : "us", 
"value": "5678 Main StnSpringfield, TX 78080-1316"} 
], 
"urls": [ 
{"type": "work", "value ": "http://seankelly.biz/"}, 
{"type": "home", "value": "http://seankelly.tv/"} 
] 
} 

 
보시다시피 JSON에는 XML과 유사하게 구조화된 중첩 데이터 요소가 있습니다. JSON도 XML과 마찬가지로 텍스트 기반입니다. 둘 다 유니코드를 사용합니다. JSON과 XML은 모두 읽기 쉽습니다. 주관적으로 JSON은 더 깨끗하고 덜 중복됩니다. JSON WEB 사이트에서는 JSON 구문을 엄격하게 설명하고 있으며 현재도 마찬가지입니다. 정말 간단한 작은 언어입니다! XML은 실제로 문서 마크업에 적합하지만 JSON은 데이터 상호 작용에 이상적인 형식입니다. 각 JSON 문서는 중첩된 개체, 배열, 문자열, 숫자, 부울 값 또는 null 값을 포함하는 개체를 설명합니다. 

이 주소 카드 예제 코드에서 JSON 버전은 더 가볍고 682바이트의 공간만 차지하지만 XML 버전은 744바이트의 공간이 필요합니다. 이것은 상당한 절약은 아니지만. 실제 이점은 구문 분석 프로세스에서 비롯됩니다. 

XML 대 JSON: 상태 손실 

XMLHttpRequest 객체를 사용하여 AJAX 기반 애플리케이션에서 XML 및 JSON 파일을 얻을 수 있습니다. 일반적으로 상호 작용 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. var req = new XMLHttpRequest (); req.open("GET", "http://localhost/addr?cardID=32", /*async*/true) req.onreadystatechange = myHandler; req.send(/*매개변수 없음*/null)

웹 서버가 응답하면 제공한 핸들러 함수(myHandler 함수)가 여러 번 호출되어 트랜잭션을 조기 종료하고 진행률 표시줄을 업데이트할 수 있는 기회를 제공합니다. 일반적으로 이는 웹 요청이 완료된 후에만 작동합니다. 이 시점에서 반환된 데이터를 사용할 수 있습니다.

주소 카드 데이터의 XML 버전을 처리하기 위해 myHandler의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
function myHandler() { 
if (req.readyState == 4 /*complete*/) { 
// 주소 필드 업데이트 첫 번째 주소가 포함된 형식 
var addrField = document.getElementById('addr'); 
var root = req.responseXML; 
var addrsElem = root.getElementsByTagName('addresses')[0]; 
var firstAddr = addrsElem.getElementsByTagName(' address')[0]; 
var addrText =fistAddr.firstChild; 
var addrValue = addrField.value = 
 } 
} 

 

XML 문서를 구문 분석할 필요가 없다는 점은 주목할 가치가 있습니다. XMLHttpRequest 객체는 자동으로 구문 분석되고 responseXML에서 DOM 트리를 사용할 수 있게 만듭니다. responseXML 속성을 사용하면 getElementsByTagName 메소드를 호출하여 문서의 주소 부분을 찾을 수도 있습니다. 그런 다음 getElementsByTagName을 다시 호출하여 주소 부분의 첫 번째 주소 요소를 찾을 수 있습니다. 이는 텍스트 노드인 문서의 첫 번째 DOM 하위 노드를 가져오고 원하는 거리 주소인 노드의 값을 가져옵니다. 마지막으로 결과는 양식 필드에 표시될 수 있습니다.

정말 간단한 작업이 아닙니다. 이제 JSON을 사용하여 다시 시도해 보세요.

코드 복사 코드

function myHandler() { 
if (req.readyState == 4 /*complete*/) { 
var addrField = document.getElementById('addr') ; 
 var 카드 = eval('(' req.responseText ')') 
addrField.value = 카드.주소[0].value; 
} 


가장 먼저 해야 할 일은 JSON 응답을 구문 분석하는 것입니다. 그러나 JSON은 JavaScript의 하위 집합이므로 JavaScript 자체 컴파일러를 사용하여 eval 함수를 호출하여 이를 구문 분석할 수 있습니다. JSON을 구문 분석하는 데는 한 줄만 필요합니다! 또한 JSON에서 객체를 조작하는 것은 다른 JavaScript 객체를 조작하는 것과 같습니다. 이는 DOM 트리를 통해 조작하는 것보다 확실히 더 간단합니다. 예를 들어 
card.addresses[0].value는 첫 번째 거리 주소이고, "1234 Main Stb &" 
card.addresses[0].type은 주소 유형, "직장" 
card.addresses[1]은 집 주소 개체입니다. 
card.fullname은 카드 이름, "Sean Kelly"입니다. 
자세히 살펴보면 다음을 알 수 있습니다. XML 형식의 문서에는 최소한 추종자 요소인 카드가 있습니다. JSON에는 존재하지 않습니다. 왜 그렇습니까? 아마도 웹 서비스에 액세스하기 위해 JavaScript를 개발하고 있다면 이미 원하는 것이 무엇인지 알고 있을 것입니다. 그러나 JSON에서는 다음을 사용할 수 있습니다. 
{"card": {"fullname": ...}} 

이 기술을 사용하면 JSON 파일이 항상 단일 이름으로 시작됩니다. 객체의 종류를 식별하는 속성을 사용합니다. 

JSON은 빠르고 안정적인가요? 

JSON은 가볍고 작은 문서를 제공하며, JavaScript에서는 JSON을 사용하기가 더 쉽습니다. XMLHttpRequest는 자동으로 XML 문서를 구문 분석하므로 JSON 파일을 수동으로 구문 분석해야 합니다. 하지만 JSON 구문 분석이 XML 구문 분석보다 느릴까요? 저자는 XMLHttpRequest를 사용하여 XML을 구문 분석하고 수천 번의 반복 테스트를 통해 JSON을 구문 분석한 결과 JSON 구문 분석이 XML보다 10배 빠릅니다. 속도가 가장 중요한 요소인 데스크톱 애플리케이션으로 AJAX를 살펴보면 JSON이 우수하다는 것이 분명합니다. 

물론 AJAX 프로그램용 데이터를 생성하기 위해 항상 서버 측을 제어할 수는 없습니다. 또한 타사 서버를 사용하여 서버 대신 XML 형식의 출력을 제공할 수도 있습니다. 그리고 서버가 JSON을 제공하는 경우 실제로 이를 사용하시겠습니까? 

코드에서 주목할 만한 점은 응답 텍스트를 eval에 직접 전달한다는 것입니다. 서버를 제어하면 이 작업을 수행할 수 있습니다. 그렇지 않은 경우 악성 서버로 인해 브라우저가 위험한 작업을 수행할 수 있습니다. 이와 같은 경우 JavaScript로 작성된 코드를 사용하여 JSON을 구문 분석하는 것이 더 좋습니다. 다행히도 이는 이미 존재합니다. 

파싱에 관해 말하자면 Python 애호가라면 JSON이 JavaScript의 하위 집합이 아니라 Python의 하위 집합이기도 함을 알 수 있습니다. Python에서 직접 JSON을 실행하거나 대신 보안 JSON 구문 분석을 사용할 수 있습니다. JSON.org 웹사이트에는 일반적으로 사용되는 JSON 파서 목록이 많이 나와 있습니다. 

서버 측 JSON 

지금까지는 클라이언트 브라우저에서 실행되는 AJAX 기반 웹 애플리케이션에서 JSON을 사용하는 데 중점을 두었을 것입니다. 당연히 먼저 JSON 형식의 데이터가 서버 측에서 생성되어야 합니다. 다행히 JSON을 생성하거나 다른 기존 데이터를 JSON으로 변환하는 것은 매우 간단합니다. TurboGears와 같은 일부 WEB 애플리케이션 프레임워크에는 JSON 출력에 대한 지원이 자동으로 포함됩니다. 

또한 상용 WEB 서비스 제공업체들도 JSON에 주목하고 있습니다. Yahoo는 최근 JSON 기반 웹 서비스를 많이 만들었습니다. Yahoo의 다양한 검색 서비스, 이행 계획, del.icio.us 및 고속도로 교통 서비스도 JSON 출력을 지원합니다. 의심할 바 없이 다른 주요 웹 서비스 제공업체도 JSON에 대한 지원을 추가할 것입니다. 

요약 

JSON의 영리함은 JavaScript와 Python의 하위 집합이므로 사용하기 쉽고 AJAX에 대한 효율적인 데이터 상호 작용을 제공한다는 것입니다. XML보다 더 빠르게 구문 분석하고 사용하기 쉽습니다. 이제 JSON은 "Web 2.0"의 가장 강력한 목소리가 되고 있습니다. 표준 데스크톱 애플리케이션이든 웹 애플리케이션이든 모든 개발자는 점점 더 단순성과 편리함에 주목하고 있습니다. 유행어 준수, Web-2.0 기반, AJAX 지원, 민첩한 개발에 JSON을 적용하는 즐거움을 경험해 보시길 바랍니다.