Ajax

Using JSON in Ajax

Sunny's 2009. 4. 16. 17:34

Data types, syntax and example
  • Number (integer, real, or floating point)
  • String (double-quoted Unicode with backslash escaping)
  • Boolean (true and false)
  • Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
  • Object (collection of key:value pairs, comma-separated and enclosed in curly braces)
  • null
  • {
         "firstName": "John",
         "lastName": "Smith",
         "address": {
             "streetAddress": "21 2nd Street",
             "city": "New York",
             "state": "NY",
             "postalCode": 10021
         },
         "phoneNumbers": [
             "212 555-1234",
             "646 555-4567"
         ]
    }

    Using JSON in Ajax
    var the_object;
    var http_request = new XMLHttpRequest();
    http_request.open( "GET", url, true );
    http_request.send(null);
    http_request.onreadystatechange = function () {
        if ( http_request.readyState == 4 ) {
            if ( http_request.status == 200 ) {
                the_object = eval( "(" + http_request.responseText + ")" );
            } else {
                alert( "There was a problem with the URL." );
            }
            http_request = null;
        }
    };


    Security issues

    var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
    text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
    eval('(' + text + ')');


    출처 : http://en.wikipedia.org/wiki/JSON
    샘플 :

    ASP로 JSON 만들기

    <!--#include file="JSON_2.0.2.asp"-->
    <!--#include file="JSON_UTIL_0.1.1.asp"-->
    <%

    Dim Result
    Set member = jsObject()
    member("aresult") = "1"
    member("amsg") = "사용가능한 아뒤"
    member.Flush   


    'QueryToJSON(dbconn, "SELECT name, surname FROM members WHERE age < 30").Flush  '--> 가능
     %>


    JSON 사용하기

    <script language="JavaScript" src="xmlhttp.js"></script>
    <script language="javascript" type="text/javascript">
    function xml_IDCheck() {
     var xmlHttpID = Ajax.getTransport();
     
     var obj = document.getElementById("m_id");
     var m_id = obj.value;
     if (m_id == ""){
      alert('아이디를 입력 하세요');
      obj.focus();
      return;
     }else{
      xmlHttpID.Open("GET", "id_check_JSON.asp?m_id="+m_id, true);
      xmlHttpID.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlHttpID.onreadystatechange = xml_IDCallback;
      xmlHttpID.send(null);
     }

     function xml_IDCallback() {
      var obj = document.getElementById("m_id");
      if (xmlHttpID.readyState == 4) {
       if (xmlHttpID.status == 200) {
           xmlDoc = xmlHttpID.responseXML;

           var data = eval("(" + xmlHttpID.responseText + ")");


           try {
              
            var result = data.aresult;
            var msg = data.amsg;

        } catch(e) {
         return;
        }
        if (result == "1"){
         alert(msg);
         return;  
        } else if (result == "0"){
         alert(msg);
         obj.value = "";
         obj.focus();
         return;    
        }
       } else if (xmlHttpID.status == 204) {
        alert("전달된 데이터가 없습니다");
       } else if (xmlHttpID.status == 404) {
        alert("URL을 확인하세요");
       } else if (xmlHttpID.status == 500) {
        alert("내부 에러");
       }
      }
     }
    }

    </script>

    <body>
      <form action="test.asp">
       <p>test:
        <input type="text" size="14" name="m_id" onChange="xml_IDCheck();" /><img onClick="xml_IDCheck()" style="cursor:hand" src="/imgs/btn_idcheck.gif" align="absmiddle">
       </p>
       <p></p>
      </form>
     </body>





    예제 샘플 :