json_json을 구문 분석하는 자바스크립트에 대한 자세한 코드

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

간단한 예:

js 코드

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

function showJSON() {
var user =
{
" 사용자 이름":"andy ",
"나이":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}

alert(user.username);
alert(user.age)
alert(user.info.cellphone)
alert(user.address[0].city) ;
alert (user.address[0].postcode);
}

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

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

js 코드

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

function showJSON() {
var user =
{
"username":"andy",
" age": 20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":" beijing", "postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}

alert(user. 사용자 이름);
alert(user.age);
alert(user.info.cellphone)
alert(user.address[0].city); ].postcode );

user.username = "Tom";
alert(user.username);
}


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

js 코드

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

함수 showCar() {

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

function Car(제조사, 모델, 연도, 색상) {
this.make = make;
this.model = 모델
this.year =
this.color = 색상; ;
}


eval을 사용하여 JSON 문자를 객체

js 코드

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

function myEval() {

var str = '{ "name": "Violet", "occupation": "character " }';
var obj = eval('(' str ')');
alert(obj.toJSONString());
}


또는 parseJSON( ) 메소드

js 코드

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

function myEval() {

var str = '{ "name": "Violet", "occupation": "character" }'
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,
{
method: 'get',
onComplete: jsonResponse
}
)
}

함수 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(originalRequest) { alert(originalRequest.responseText) var myobj = originalRequest.responseText.evalJSON(true) alert(myobj.name) }

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

javascript에서 요청 매개변수를 입력하세요

js 코드

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

함수 sendRequest () {
var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow")
var pars = "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 응답)에서 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 request, HttpServletResponse response) 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();
}

JSONObject resultJSON = new JSONObject(); append("name", "Violet")
.append( "occupation", "developer")
.append("age", new Integer(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); myobj.age)

}


참조

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 개체 표기법으로, 데이터를 설명하기 위한 간단한 구문입니다. JSON은 JavaScript 언어의 하위 집합이기 때문에 우아합니다. 다음으로 이것이 왜 그렇게 중요한지 알게 될 것입니다. 먼저 JSON과 XML 구문을 비교해 보겠습니다.

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




코드 복사

코드는 다음과 같습니다. 다음:

<카드>
Sean Kelly
SK컨설팅
<이메일 주소>

kelly@seankelly.biz

kelly@seankelly.tv

<전화>
1 214 555 1212
<전화 유형='팩스'> 1 214 555 1213
<전화 유형='모바일'> 1 214 555 1214

<주소>

1234 Main St
Springfield, TX 78080-1216

<주소 유형='집' 형식='우리'>5678 Main St
Springfield, TX 78080-1316


<주소 유형='직장'>http://seankelly.biz/
<주소 유형='집'>http://seankelly.tv/

使useJSON, FORM式如下:

复代码 代码如下:

{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value ": "kelly@seankelly.biz"},
{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}
],
" Telephones": [
{"type": "work", "pref": 1, "value": " 1 214 555 1212"},
{"type": "fax", "value": " 1 214 555 1213"},
{"유형": "모바일", "값": " 1 214 555 1214"}
],
"주소": [
{"유형 ": "직장", "형식": "우리",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "집", "format": " us",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}

JSON은 JSON 형식의 유니코드를 사용합니다. JSON은 유니코드로 사용됩니다.很容易阅读。主观上，JSON更清晰，冗余更少。JSON WEB站点严格地描述了JSON语法，目前就是这样的。 설명! XML确实适合标记文档，但是JSON是数据交互每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布尔值或值。

지금 这些地址卡例子代码中，JSON版本是更轻weight级的，只而了682字节ative 空间 ，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。

XML对比JSON：地位丧失
일반적으로 XMLHttpRequest를 사용하여 XMLHttpRequest를 사용하고 AJAX를 사용하는 XML과 JSON문서를 사용합니다.

复代码 代码如下:

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

작성된 WEB服务器响应, 你提供的处理器函数(myHandler函数)被多次调用, 为你提供提前终止事务,更新进島条等机会.일반적으로 웹사이트에 있습니다.以后才起작용: 那时，你就可以使用返回的数据了.

为了处理XML版本的地址卡数据，myHandler의 代码如下：

复aze代码 代码如下:

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 = addrText.nodeValue;
addrField.value = addrValue;
}
}

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;
}

you 가장 먼저 수행할 작업은 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을 적용하는 즐거움을 경험해 보시길 바랍니다.