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 데이터를 처리하고 파싱하는 자세한 과정을 소개하는 내용입니다.