JavaScript 처리 및 JSON 데이터 파싱 과정에 대한 자세한 설명_javascript 기술

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"},  
  "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.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 패키지를 제공합니다. http://www.json.org/json.js를 다운로드한 후 이를 가져온 다음 간단히 object.toJSONString()을 사용하여 JSON으로 변환합니다. 데이터.

js 코드

function showCar() {  
  var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");  
  alert(carr.toJSONString());  
  }  
  
  function Car(make, model, year, color)    {  
  this.make  =  make;  
  this.model  =  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());  
  }

또는 parsJSON() 메소드를 사용하세요

js 코드

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

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

먼저 서블릿을 작성하고(제 것은 servlet.ajax.JSONTest1.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  
  }  
  );  
  }  
  
  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(originalRequest) {  
  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,  
  {  
  method: 'get',  
  parameters: pars,  
  onComplete: jsonResponse  
  }  
  );  
  }  

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

자바 코드

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();  
  }  
  response.getWriter().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");  
  }  

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

자바 코드

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();  
  try {  
  resultJSON.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);  
  alert(myobj.age);  
  } 

위 내용은 JavaScript가 JSON 데이터를 처리하고 파싱하는 자세한 과정을 소개하는 내용입니다.