JSON and JavaScript usage

by 조쉬 posted Mar 26, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
JSON
  1. JavaScript Object Notation
  2. A Simple format designed to exchange data between different programming language
JSON Objects
  1. Creating with JavaScript

var JSONstring = 
	{
	    "firstname": "Greg", 
	    "email": "greg@fake_email.com",
	    "hobby": 
	    [
		{
		    "hobbyName": "sport", 
		    "isHobby": "true"
		},
		{
			"hobbyName": "reading", 
			"isHobby": "true"
		},
		{
			"hobbyName": "music", 
			"isHobby": "false"
		}
	    ]
	};
  1. Accessing with JavaScript

JSONstring.hobby[1].isHobby; // true
Creating JavaScript Objects
  1. JavaScript object <-> JSON string : http://www.json.org/json2.js
  1. Example

	<html>
	<head><TITLE>ditio.net jSon Tutorial</TITLE>
	<script src="http://www.json.org/json2.js"></script>
	<script>
	// JavaScript source code will be here
	function validate()
	{
	    var p = document.forms['personal'];
	 
	    var JSONObject = new Object;
	    JSONObject.firstname = p['firstname'].value;
	    JSONObject.email = p['email'].value;
	    JSONObject.hobby = new Array;
	 
	    for(var i=0; i<3; i++)
	    {
		JSONObject.hobby[i] = new Object;
		JSONObject.hobby[i].hobbyName = p['hobby'][i].value;
		JSONObject.hobby[i].isHobby = p['hobby'][i].checked;
	    }
	 
	    JSONstring = JSON.stringify(JSONObject);
	    runAjax(JSONstring);
	 
	}
	</head>
	<body>
	<form name="personal" action="" method="POST">
	Name <input type="text" name="firstname"><br>
	Email <input type="text" name="email"><br>
	Hobby 
		<input type="checkbox" name="hobby" value="sport"> Sport
		<input type="checkbox" name="hobby" value="reading"> Reading
		<input type="checkbox" name="hobby" value="music"> Music
	<input type="button" name="valid" value="Validate" onclick="validate()">
	</form>
	</body>
	</html>
Sending JSON object to PHP with AJAX
  1. Example

var request;
function runAjax(JSONstring)
{
    // function returns "AJAX" object, depending on web browser
    // this is not native JS function!
    request = getHTTPObject();
    request.onreadystatechange = sendData;
    request.open("GET", "parser.php?json="+JSONstring, true);
    request.send(null);
}
	 
// function is executed when var request state changes
function sendData()
{
    // if request object received response
    if(request.readyState == 4)
    {
	// parser.php response
	var JSONtext = request.responseText;
	// convert received string to JavaScript object
	var JSONobject = JSON.parse(JSONtext);
	 
	// notice how variables are used
	var msg = "Number of errors: "+JSONobject.errorsNum+
			"
- "+JSONobject.error[0]+
			"
- "+JSONobject.error[1];

	alert(msg);
    }
}