Ajax 操作JSON
AJAX是异步JavaScript和XML,它在客户端被用作一组相关的web开发技术,以创建异步web应用程序。根据AJAX模型,web应用程序可以从服务器异步发送和检索数据,而不会干扰现有页面的显示和行为。
许多开发人员使用JSON在客户端和服务器之间传递AJAX更新。更新实时体育成绩的网站可以被认为是AJAX的一个例子。如果这些分数必须在网站上更新,那么它们必须存储在服务器上,这样网页可以在需要时检索分数。这是我们可以利用JSON格式数据的地方。
任何使用AJAX更新的数据都可以使用JSON格式存储在web服务器上。使用AJAX,以便页面可以在必要时检索这些JSON文件,解析它们,并执行以下操作之一
将解析后的值存储在变量中,方便在网页上显示之前进一步处理。
它直接将数据分配给网页中的DOM元素,让它们显示在网站上。
例子
下面的代码展示了带有AJAX的JSON。将其保存为ajax.htm文件。这里,加载函数loadJSON ( )被异步用于上传JSON数据。
<html> <head> <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type"> <script type = "application/javascript"> function loadJSON() { var data_file = "http://www.tutorialspoint.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(); } </script> <title>tutorialspoint.com JSON</title> </head> <body> <h1>Cricketer Details</h1> <table class = "src"> <tr><th>Name</th><th>Country</th></tr> <tr><td><div id = "Name">Sachin</div></td> <td><div id = "Country">India</div></td></tr> </table> <div class = "central"> <button type = "button" onclick = "loadJSON()">Update Details </button> </div> </body> </html>
下面给出的是data.json,有JSON格式的数据,当我们点击更新详细信息按钮时,这些数据将被异步上传。这个文件保存在http://www.tutorialspoint.com/json/
{"name": "Brett", "country": "Australia"}
上述HTML代码将生成以下内容,您可以在其中检查AJAX的运行情况
当你点击“Update Detail”按钮时,你会得到如下结果。