Categories: AJAX 教程

AJAX JSON 实例

AJAX JSON 实例


 我们可以通过AJAX代码获取JSON数据。AJAX提供了异步获取响应的工具。它不会重新加载页面并节省带宽。

 让我们看一个使用AJAX代码获取JSON数据的简单示例。

<html>  
<head>  
<meta content="text/html; charset=utf-8">  
<title>AJAX JSON by Javatpoint</title>  
<script type="application/javascript">  
function load()  
{  
   var url = "http://date.jsontest.com/";//use any url that have json data  
   var request;  
  
   if(window.XMLHttpRequest){    
    request=new XMLHttpRequest();//for Chrome, mozilla etc  
   }    
   else if(window.ActiveXObject){    
    request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only  
   }    
   request.onreadystatechange  = function(){  
      if (request.readyState == 4  )  
      {  
        var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object  
        document.getElementById("date").innerHTML =  jsonObj.date;  
        document.getElementById("time").innerHTML = jsonObj.time;  
      }  
   }  
   request.open("GET", url, true);  
   request.send();  
}  
</script>  
</head>  
<body>  
  
Date: <span id="date"></span><br/>  
Time: <span id="time"></span><br/>  
  
<button type="button" >

冒牌SEO

前端开发者,欢迎大家一起沟通和交流。

Share
Published by
冒牌SEO

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

7 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago