开发手册 欢迎您!
软件开发者资料库

使用Ajax的JSON

使用Ajax的JSON - 从基本到高级概念的简单简单步骤学习JSON(Javascript Object Notatation),其中包括JSON及其概述,语法,数据类型,对象,模式,与XML的比较,示例,PHP,Perl,Python, Ruby,Java,Ajax。

AJAX是异步JavaScript和XML,它在客户端用作一组相互关联的Web开发技术,以便创建异步Web应用程序.根据AJAX模型,Web应用程序可以异步发送和检索服务器中的数据,而不会干扰显示和现有页面的行为.

许多开发人员使用JSON在两者之间传递AJAX更新客户端和服务器.更新直播体育比分的网站可以被视为AJAX的一个例子.如果必须在网站上更新这些分数,则必须将它们存储在服务器上,以便网页可以在需要时检索分数.这是我们可以使用JSON格式数据的地方.

使用AJAX更新的任何数据都可以使用Web服务器上的JSON格式进行存储.使用AJAX以便javascript可以在必要时检索这些JSON文件,解析它们,并执行以下操作之一 :

  • 将解析后的值存储在变量中,以便在网页上显示之前进行进一步处理.

  • 它直接将数据分配给网页中的DOM元素,这样它们就会显示在网站上.

示例

以下代码显示了JSON与AJAX.将其另存为 ajax.htm 文件.这里加载函数loadJSON()以异步方式用于上传JSON数据.

                        function loadJSON() {            var data_file = "http://www.it352.com/json/data.json";            var http_request = new XMLHttpRequest();            try{               // Opera 8.0+, Firefox, Chrome, Safari               http_request = new XMLHttpRequest();            }catch (e) {               // Internet Explorer Browsers               try{                  http_request = new ActiveXObject("Msxml2.XMLHTTP");               }catch (e) {                  try{                     http_request = new ActiveXObject("Microsoft.XMLHTTP");                  }catch (e) {                     // Something went wrong                     alert("Your browser broke!");                     return false;                  }               }            }            http_request.onreadystatechange = function() {               if (http_request.readyState == 4  ) {                  // Javascript function JSON.parse to parse JSON data                  var jsonObj = JSON.parse(http_request.responseText);                  // jsonObj variable now contains the data structure and can                  // be accessed as jsonObj.name and jsonObj.country.                  document.getElementById("Name").innerHTML = jsonObj.name;                  document.getElementById("Country").innerHTML = jsonObj.country;               }            }            http_request.open("GET", data_file, true);            http_request.send();         }            it352.com JSON            

Cricketer Details

               NameCountry         Sachin
         India
                     Update Details          

以下是输入文件 data.json ,具有JSON格式的数据,当我们点击

{"name ":"Brett","country":"Australia"}

以上HTML代码将生成以下屏幕,您可以在其中检查AJAX的操作:

Cricketer详细信息

名称国家
Sachin印度

当您单击更新详细信息按钮时,您应该得到如下结果.如果您的浏览器支持Javascript,您可以自己尝试 JSON with AJAX .

Cricketer详细信息

名称国家
Brett澳大利亚