‘JSON’ Archive

Jquery load twitter JSON feed as news ticker

You should go to Jquery website to get latest version.
In this post, I used a Jquery Newsticker plugin, go to this link for more details.

From this post, we can learn how to use Jquery to read JSON file.

Below is a example to show your feeds on Twitter as News Ticker

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
	Example using Jquery to show Twitter Json Feeds as News Ticker | rapid-DEV.net
</title>
<script type="text/javascript" src="http://rapid-dev.net/wp-includes/js/jquery/jquery.js?ver=1.2.6"></script>
<script type="text/javascript" src="http://rapid-dev.net/wp-includes/js/jquery/jquery.newsticker.js"></script>
</head>
<body>
	<div><a href='http://rapid-dev.net'>Back to rapid-DEV.net</a></div>
	<h3>Example using Jquery to show Twitter Json Feeds as News Ticker</h3>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        upd_twitter("huynhtronghoan",5);
    });

    function upd_twitter(username,feed_num)
    {
        jQuery("#twitter_feed").html("Loading ...");

        var twitter_text = "<ul id=\"twitter_feed_items\">";
        var url = "http://twitter.com/status/user_timeline/" + username + ".json?count=" + feed_num + "&callback=?";
        jQuery.getJSON(url,
        function(data){
            jQuery.each(data, function(i, item) {
                twitter_text += "<li>" + item.text + " (" + item.created_at + ")</li>";
            });
            twitter_text += "</ul>";
            jQuery("#twitter_feed").html(twitter_text);
            jQuery("#twitter_feed_items").newsTicker();
        });
    }

</script>
<div id="twitter_feed"></div>
</body>
</html>

Let check it out

JSON vs XML Examples

This page shows examples of messages formatted using JSON and XML


JSON

{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}

XML

<!DOCTYPE glossary PUBLIC "-//OASIS//DTD DocBook V3.1//EN">
 <glossary><title>example glossary</title>
  <GlossDiv><title>S</title>
   <GlossList>
    <GlossEntry ID="SGML" SortAs="SGML">
     <GlossTerm>Standard Generalized Markup Language</GlossTerm>
     <Acronym>SGML</Acronym>
     <Abbrev>ISO 8879:1986</Abbrev>
     <GlossDef>
      <para>A meta-markup language, used to create markup
languages such as DocBook.</para>
      <GlossSeeAlso OtherTerm="GML">
      <GlossSeeAlso OtherTerm="XML">
     </GlossDef>
     <GlossSee OtherTerm="markup">
    </GlossEntry>
   </GlossList>
  </GlossDiv>
 </glossary>

JSON

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

XML

<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>

JSON

{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": {
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}

XML

<widget>
    <debug>on</debug>
    <window title="Sample Konfabulator Widget">
        <name>main_window</name>
        <width>500</width>
        <height>500</height>
    </window>
    <image src="Images/Sun.png" name="sun1">
        <hOffset>250</hOffset>
        <vOffset>250</vOffset>
        <alignment>center</alignment>
    </image>
    <text data="Click Here" size="36" style="bold">
        <name>text1</name>
        <hOffset>250</hOffset>
        <vOffset>100</vOffset>
        <alignment>center</alignment>
        <onMouseUp>
            sun1.opacity = (sun1.opacity / 100) * 90;
        </onMouseUp>
    </text>
</widget>

JSON

{"web-app": {
  "servlet": [
    {
      "servlet-name": "cofaxCDS",
      "servlet-class": "org.cofax.cds.CDSServlet",
      "init-param": {
        "configGlossary:installationAt": "Philadelphia, PA",
        "configGlossary:adminEmail": "ksm@pobox.com",
        "configGlossary:poweredBy": "Cofax",
        "configGlossary:poweredByIcon": "/images/cofax.gif",
        "configGlossary:staticPath": "/content/static",
        "templateProcessorClass": "org.cofax.WysiwygTemplate",
        "templateLoaderClass": "org.cofax.FilesTemplateLoader",
        "templatePath": "templates",
        "templateOverridePath": "",
        "defaultListTemplate": "listTemplate.htm",
        "defaultFileTemplate": "articleTemplate.htm",
        "useJSP": false,
        "jspListTemplate": "listTemplate.jsp",
        "jspFileTemplate": "articleTemplate.jsp",
        "cachePackageTagsTrack": 200,
        "cachePackageTagsStore": 200,
        "cachePackageTagsRefresh": 60,
        "cacheTemplatesTrack": 100,
        "cacheTemplatesStore": 50,
        "cacheTemplatesRefresh": 15,
        "cachePagesTrack": 200,
        "cachePagesStore": 100,
        "cachePagesRefresh": 10,
        "cachePagesDirtyRead": 10,
        "searchEngineListTemplate": "forSearchEnginesList.htm",
        "searchEngineFileTemplate": "forSearchEngines.htm",
        "searchEngineRobotsDb": "WEB-INF/robots.db",
        "useDataStore": true,
        "dataStoreClass": "org.cofax.SqlDataStore",
        "redirectionClass": "org.cofax.SqlRedirection",
        "dataStoreName": "cofax",
        "dataStoreDriver": "com.microsoft.jdbc.sqlserver.SQLServerDriver",
        "dataStoreUrl": "jdbc:microsoft:sqlserver://LOCALHOST:1433;DatabaseName=goon",
        "dataStoreUser": "sa",
        "dataStorePassword": "dataStoreTestQuery",
        "dataStoreTestQuery": "SET NOCOUNT ON;select test='test';",
        "dataStoreLogFile": "/usr/local/tomcat/logs/datastore.log",
        "dataStoreInitConns": 10,
        "dataStoreMaxConns": 100,
        "dataStoreConnUsageLimit": 100,
        "dataStoreLogLevel": "debug",
        "maxUrlLength": 500}},
    {
      "servlet-name": "cofaxEmail",
      "servlet-class": "org.cofax.cds.EmailServlet",
      "init-param": {
      "mailHost": "mail1",
      "mailHostOverride": "mail2"}},
    {
      "servlet-name": "cofaxAdmin",
      "servlet-class": "org.cofax.cds.AdminServlet"},

    {
      "servlet-name": "fileServlet",
      "servlet-class": "org.cofax.cds.FileServlet"},
    {
      "servlet-name": "cofaxTools",
      "servlet-class": "org.cofax.cms.CofaxToolsServlet",
      "init-param": {
        "templatePath": "toolstemplates/",
        "log": 1,
        "logLocation": "/usr/local/tomcat/logs/CofaxTools.log",
        "logMaxSize": "",
        "dataLog": 1,
        "dataLogLocation": "/usr/local/tomcat/logs/dataLog.log",
        "dataLogMaxSize": "",
        "removePageCache": "/content/admin/remove?cache=pages&id=",
        "removeTemplateCache": "/content/admin/remove?cache=templates&id=",
        "fileTransferFolder": "/usr/local/tomcat/webapps/content/fileTransferFolder",
        "lookInContext": 1,
        "adminGroupID": 4,
        "betaServer": true}}],
  "servlet-mapping": {
    "cofaxCDS": "/",
    "cofaxEmail": "/cofaxutil/aemail/*",
    "cofaxAdmin": "/admin/*",
    "fileServlet": "/static/*",
    "cofaxTools": "/tools/*"},

  "taglib": {
    "taglib-uri": "cofax.tld",
    "taglib-location": "/WEB-INF/tlds/cofax.tld"}}}

XML

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.2//EN"
    "http://java.sun.com/j2ee/dtds/web-app_2.2.dtd">
<web-app>
    <servlet>
        <servlet-name>
            cofaxCDS
        </servlet-name>
        <servlet-class>
            org.cofax.cds.CDSServlet
        </servlet-class>

         <init-param>
          <param-name>configGlossary:installationAt</param-name>
      <param-value>Philadelphia, PA</param-value>
        </init-param>
        <init-param>
          <param-name>configGlossary:adminEmail</param-name>
      <param-value>ksm@pobox.com</param-value>
        </init-param>
        <init-param>
          <param-name>configGlossary:poweredBy</param-name>
      <param-value>Cofax</param-value>
        </init-param>
        <init-param>
          <param-name>configGlossary:poweredByIcon</param-name>
      <param-value>/images/cofax.gif</param-value>
        </init-param>
        <init-param>
          <param-name>configGlossary:staticPath</param-name>
      <param-value>/content/static</param-value>
        </init-param>

     <init-param>
          <param-name>templateProcessorClass</param-name>
      <param-value>org.cofax.WysiwygTemplate</param-value>
        </init-param>

    <init-param>
          <param-name>templateLoaderClass</param-name>
      <param-value>org.cofax.FilesTemplateLoader</param-value>
        </init-param>

         <init-param>
          <param-name>templatePath</param-name>
      <param-value>templates</param-value>
        </init-param>

        <init-param>
          <param-name>templateOverridePath</param-name>
      <param-value></param-value>
        </init-param>

     <init-param>
          <param-name>defaultListTemplate</param-name>
      <param-value>listTemplate.htm</param-value>
        </init-param>

       <init-param>
          <param-name>defaultFileTemplate</param-name>
      <param-value>articleTemplate.htm</param-value>
        </init-param>

       <init-param>
          <param-name>useJSP</param-name>
      <param-value>false</param-value>
        </init-param>

    <init-param>
          <param-name>jspListTemplate</param-name>
      <param-value>listTemplate.jsp</param-value>
        </init-param>

       <init-param>
          <param-name>jspFileTemplate</param-name>
      <param-value>articleTemplate.jsp</param-value>
        </init-param>

     <init-param>
          <param-name>cachePackageTagsTrack</param-name>
      <param-value>200</param-value>
        </init-param>

    <init-param>
          <param-name>cachePackageTagsStore</param-name>
      <param-value>200</param-value>
        </init-param>

    <init-param>
          <param-name>cachePackageTagsRefresh</param-name>
      <param-value>60</param-value>
        </init-param>

     <init-param>
          <param-name>cacheTemplatesTrack</param-name>
      <param-value>100</param-value>
        </init-param>

    <init-param>
          <param-name>cacheTemplatesStore</param-name>
      <param-value>50</param-value>
        </init-param>

    <init-param>
          <param-name>cacheTemplatesRefresh</param-name>
      <param-value>15</param-value>
        </init-param>

    <init-param>
          <param-name>cachePagesTrack</param-name>
      <param-value>200</param-value>
        </init-param>

    <init-param>
          <param-name>cachePagesStore</param-name>
      <param-value>100</param-value>
        </init-param>

    <init-param>
          <param-name>cachePagesRefresh</param-name>
      <param-value>10</param-value>
        </init-param>

    <init-param>
          <param-name>cachePagesDirtyRead</param-name>
      <param-value>10</param-value>
        </init-param>

     <init-param>
          <param-name>searchEngineListTemplate</param-name>
      <param-value>forSearchEnginesList.htm</param-value>
        </init-param>

       <init-param>
          <param-name>searchEngineFileTemplate</param-name>
      <param-value>forSearchEngines.htm</param-value>
        </init-param>

       <init-param>
          <param-name>searchEngineRobotsDb</param-name>
      <param-value>WEB-INF/robots.db</param-value>
        </init-param>

    <init-param>
          <param-name>useDataStore</param-name>
      <param-value>true</param-value>
        </init-param>

     <init-param>
          <param-name>dataStoreClass</param-name>
      <param-value>org.cofax.SqlDataStore</param-value>
        </init-param>

        <init-param>
          <param-name>redirectionClass</param-name>
      <param-value>org.cofax.SqlRedirection</param-value>
        </init-param>
        <init-param>
          <param-name>dataStoreName</param-name>
      <param-value>cofax</param-value>
        </init-param>

        <init-param>
          <param-name>dataStoreDriver</param-name>
      <param-value>com.microsoft.jdbc.sqlserver.SQLServerDriver</param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreUrl</param-name>
      <param-value>jdbc:microsoft:sqlserver://LOCALHOST:1433;DatabaseName=goon</param-value>
        </init-param>

        <init-param>
          <param-name>dataStoreUser</param-name>
      <param-value>sa</param-value>
        </init-param>

         <init-param>
          <param-name>dataStorePassword</param-name>
      <param-value></param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreTestQuery</param-name>
      <param-value>SET NOCOUNT ON;select test='test';</param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreLogFile</param-name>
      <param-value>/usr/local/tomcat/logs/datastore.log</param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreInitConns</param-name>
      <param-value>10</param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreMaxConns</param-name>
      <param-value>100</param-value>
        </init-param>

         <init-param>
          <param-name>dataStoreConnUsageLimit</param-name>
      <param-value>100</param-value>
        </init-param>
 <init-param>
          <param-name>dataStoreLogLevel</param-name>
      <param-value>debug</param-value>
        </init-param>

     <init-param>
          <param-name>maxUrlLength</param-name>
      <param-value>500</param-value>
        </init-param>

    </servlet>

     <servlet>
        <servlet-name>
            cofaxEmail
        </servlet-name>
        <servlet-class>
            org.cofax.cds.EmailServlet
        </servlet-class>

         <init-param>
          <param-name>mailHost</param-name>
      <param-value>mail1</param-value>
        </init-param>

        <init-param>
          <param-name>mailHostOverride</param-name>
      <param-value>mail2</param-value>
        </init-param>
    </servlet>

    <servlet>
        <servlet-name>
            cofaxAdmin
        </servlet-name>
        <servlet-class>
            org.cofax.cds.AdminServlet
        </servlet-class>
    </servlet>

    <servlet>
         <servlet-name>
             fileServlet
         </servlet-name>
         <servlet-class>
             org.cofax.cds.FileServlet
         </servlet-class>
    </servlet>

   <servlet>
        <servlet-name>
            cofaxTools
        </servlet-name>
        <servlet-class>
            org.cofax.cms.CofaxToolsServlet
        </servlet-class>

         <init-param>
          <param-name>templatePath</param-name>
          <param-value>toolstemplates/</param-value>
        </init-param>

         <init-param>
          <param-name>log</param-name>
          <param-value>1</param-value>
        </init-param>

         <init-param>
          <param-name>logLocation</param-name>
          <param-value>/usr/local/tomcat/logs/CofaxTools.log</param-value>
        </init-param>

         <init-param>
          <param-name>logMaxSize</param-name>
          <param-value></param-value>
        </init-param>

         <init-param>
          <param-name>dataLog</param-name>
          <param-value>1</param-value>
        </init-param>

         <init-param>
          <param-name>dataLogLocation</param-name>
          <param-value>/usr/local/tomcat/logs/dataLog.log</param-value>
        </init-param>

         <init-param>
          <param-name>dataLogMaxSize</param-name>
          <param-value></param-value>
        </init-param>

         <init-param>
          <param-name>removePageCache</param-name>
          <param-value>/content/admin/remove?cache=pages&id=</param-value>
        </init-param>

         <init-param>
          <param-name>removeTemplateCache</param-name>
          <param-value>/content/admin/remove?cache=templates&id=</param-value>
        </init-param>

         <init-param>
          <param-name>fileTransferFolder</param-name>
          <param-value>/usr/local/tomcat/webapps/content/fileTransferFolder</param-value>
        </init-param>

         <init-param>
          <param-name>lookInContext</param-name>
          <param-value>1</param-value>
        </init-param>

        <init-param>
          <param-name>adminGroupID</param-name>
          <param-value>4</param-value>
        </init-param>

        <init-param>
          <param-name>betaServer</param-name>
          <param-value>true</param-value>
        </init-param>

    </servlet>

    <servlet-mapping>
    <servlet-name>
    cofaxCDS
    </servlet-name>
    <url-pattern>
    /
    </url-pattern>
    </servlet-mapping>

    <servlet-mapping>
    <servlet-name>
    cofaxEmail
    </servlet-name>
    <url-pattern>
    /cofaxutil/aemail/*
    </url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>
        cofaxAdmin
        </servlet-name>
        <url-pattern>
        /admin/*
        </url-pattern>
    </servlet-mapping>

    <servlet-mapping>
         <servlet-name>
         fileServlet
         </servlet-name>
         <url-pattern>
         /static/*
         </url-pattern>
     </servlet-mapping>

  <servlet-mapping>
        <servlet-name>
        cofaxTools
        </servlet-name>
        <url-pattern>
        /tools/*
        </url-pattern>
    </servlet-mapping>

   <taglib>
      <taglib-uri>cofax.tld</taglib-uri>
      <taglib-location>/WEB-INF/tlds/cofax.tld</taglib-location>
   </taglib>

</web-app>

JSON

{"menu": {
    "header": "SVG Viewer",
    "items": [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        null,
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        null,
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        null,
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        null,
        {"id": "Help"},
        {"id": "About", "label": "About Adobe CVG Viewer..."}
    ]
}}

XML

<menu>
    <header>Adobe SVG Viewer</header>
    <item action="Open" id="Open">Open</item>
    <item action="OpenNew" id="OpenNew">Open New</item>
    <separator/>
    <item action="ZoomIn" id="ZoomIn">Zoom In</item>
    <item action="ZoomOut" id="ZoomOut">Zoom Out</item>
    <item action="OriginalView" id="OriginalView">Original View</item>
    <separator/>
    <item action="Quality" id="Quality">Quality</item>
    <item action="Pause" id="Pause">Pause</item>
    <item action="Mute" id="Mute">Mute</item>
    <separator/>
    <item action="Find" id="Find">Find...</item>
    <item action="FindAgain" id="FindAgain">Find Again</item>
    <item action="Copy" id="Copy">Copy</item>
    <item action="CopyAgain" id="CopyAgain">Copy Again</item>
    <item action="CopySVG" id="CopySVG">Copy SVG</item>
    <item action="ViewSVG" id="ViewSVG">View SVG</item>
    <item action="ViewSource" id="ViewSource">View Source</item>
    <item action="SaveAs" id="SaveAs">Save As</item>
    <separator/>
    <item action="Help" id="Help">Help</item>
    <item action="About" id="About">About Adobe CVG Viewer...</item>
</menu>

Copied from: http://www.json.org/example.html

JSON (JavaScript Object Notation) is a lightweight data-interchange format

It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

These are universal data structures. Virtually all modern programming languages support them in one form or another. It makes sense that a data format that is interchangable with programming languages also be based on these structures.

In JSON, they take on these forms:

  • An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
  • An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).
  • A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.
  • A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes. A character is represented as a single character string. A string is very much like a C or Java string.
  • A number is very much like a C or Java number, except that the octal and hexadecimal formats are not used.

Whitespace can be inserted between any pair of tokens. Excepting a few encoding details, that completely describes the language.

Copied from: http://www.json.org/

Jquery Ajax Cross Domains using JSONP (getJSON)

If you are using Jquery Ajax to call to a remote url, your code will maybe generate an error like this “Access to restricted URI denied” code: “1012″ or “Permission Denied …”

To solve this problem, Jquery now supports JSONP natively, you will load JSON from a remote url then an extra callback will be provided for the server to interpret.

JSONP is a technique that allows you to transfer JSON data across multiple domains.

Below is a very simple demo illustrate how to call to a remote url using Jquery Ajax Jsonp:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>rapid-DEV.net Jquery Ajax JSON Cross Domain Example</title>
</head>
<script>

	jQuery(document).ready(function(){

		jQuery("#btn").click(function(){

			var dataString = "Name=" + jQuery("#txtName").val() + "&&Message=" + jQuery("#txtMessage").val();
		    var url = "http://rapid-dev.net/demo/json_process.php?" + dataString;

		  $.getJSON(url + "&jsoncallback=?", function(data){
				Name = data.Name;
				Message = data.Message;

				if(Name != "" && Message != "")
				{
					jQuery("#td_msg").html("Hello " + Name + ", you typed: " + Message);
				}
				else
				{
					jQuery("#td_msg").html("Please enter Name and Message to get the result!!!");
				}

			})

			return false;

		});
	});
</script>
<body>
<table cellspacing="0" cellpadding="2" border="0" width="30%" align="center">
<tbody>
	<tr><td colspan="2" style="color:red" id="td_msg"></td></tr>
	<tr><td colspan="2"><h3>Jquery Ajax JSON Cross Domain Example</h3></td></tr>
	<tr>
		<td align="left">Your name: </td>
		<td align="left"><input type="text" name="txtName" id="txtName"/></td>
	</tr>
	<tr>
		<td align="left">Type something: </td>
		<td align="left"><input type="text" name="txtMessage" id="txtMessage" /></td>
	</tr>
	<tr>
		<td></td>
		<td align="left"><input type="button" id="btn" name="btn" value="Submit" /></td>
	</tr>
</tbody>
</table>
</body>
</html>

PHP Process Page:

<?php
	$Name = $_GET["Name"];
	$Message = $_GET["Message"];

	echo $_GET["jsoncallback"] . "({\"Name\": \"" . $Name . "\", \"Message\": \"" . $Message . "\"})";
?>

Click here to view online demo.
Download the source code: rd-jquery-ajax-json-cross-domains