Html 代码：

  1. <html>
  2. <body>
  3.  
  4. <div id="myDiv"><h3>Let AJAX change this text</h3></div>
  5. <button type="button" onclick="loadXMLDoc()">Change Content</button>
  6.  
  7. </body>
  8. </html>

js代码：

  1. <script type="text/javascript">
  2.  
  3.     var xmlhttp;
  4.     function loadXMLDoc() {
  5.         //ajax script goes here...
  6.         if(window.XMLHttpRequest) {
  7.             //code for IE7+, firefox, Chrome, Opera,Sarari
  8.             xmlhttp =  new XMLHttpRequest();
  9.         }else {
  10.             //code for IE6,IE5
  11.             xmlhttp =  new ActiveXObject("Microsoft.XMLHTTP");
  12.         }
  13.  
  14.         if(xmlhttp != null) {
  15.  
  16.             //创建响应XMLHttpRequest对象状态变化的函数
  17.             xmlhttp.onreadystatechange = httpStateChange;
  18.             //创建http请求
  19.             xmlhttp.open('GET', 'json/data.json', true);
  20.             //发送http请求
  21.             xmlhttp.send(null);
  22.  
  23.         }
  24.  
  25.     }
  26.  
  27.     function httpStateChange() {
  28.  
  29.         console.log(xmlhttp.readyState, xmlhttp.status);
  30.         //请求中.
  31.         if(xmlhttp.readyState == 1) {
  32.             //loading..
  33.             document.getElementById('myDiv').innerHTML = 'loading..';
  34.         }
  35.  
  36.         ////异步调用完毕
  37.         if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  38.             var data = JSON.parse(xmlhttp.responseText);
  39.             console.log(data);
  40.            document.getElementById('myDiv').innerHTML = data.sites[1].Name;
  41.         }
  42.     }
  43.  
  44. </script>

ajax 简单例子的更多相关文章

  1. springmvc ajax 简单例子

    1.控制器曾 @Controller public class AjaxController { @RequestMapping("/ajax") public void ajax ...

  2. jsonp的简单例子

    jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  3. PHP Ajax简单实例

    最近学习Jquery Ajax部分,通过简单例子,比较了下post,get方法的不同 HTML部分 <html> <head> <title>jQuery Ajax ...

  4. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  5. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  6. QQ互联简单例子,七彩花都提供

    QQ互联简单例子 源码由七彩花都论坛提供 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. Hibernate4.2.4入门(一)——环境搭建和简单例子

    一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...

  8. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  9. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

随机推荐

  1. Linux性能优化实战学习笔记：第三十讲

    一.性能指标 二.文件系统I/O性能指标 1.存储空间的使用情况 文件系统向外展示的空间使用,而非磁盘空间的真是用量,因为文件系统的元数据也会占用磁盘空间 2.索引节点的使用情况 如果存储过多的小文件 ...

  2. MySQL实战45讲学习笔记：第一讲

    一.MySQL逻架构图 二.连接器工作原理刨析 1.连接器工作原理图 2.原理图说明 1.连接命令 mysql -h$ip -P$port -u$user -p 2.查询链接状态 3.长连接端连接 1 ...

  3. [LeetCode] 350. Intersection of Two Arrays II 两个数组相交之二

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  4. 第02组 Alpha事后诸葛亮

    目录 1. 组长博客(2分) 2. 总结思考(27分) 2.1. 设想和目标(2分) 2.2. 计划(5分) 2.3. 资源(3分) 2.4. 变更管理(4分) 2.5. 设计/实现(4分) 2.6. ...

  5. 利用Jenkins打包并远程部署NodeJS应用

    本文Jenkins版本2.190.2,为19年11月最新 1.安装Jenkins.Git和NodeJS Jenkins安装参考:https://www.cnblogs.com/zhi-leaf/p/1 ...

  6. pg_sql常用查询语句整理

    #pg_sql之增删改查 #修改: inset into table_name (id, name, age, address ) select replace(old_id,old_id,new_i ...

  7. talk about string,char

    [1].关于sprintf和snprintf的正确使用 考虑以下有缺陷的例子:void f(const char *p){ char buf[11]={0}; sprintf(buf,"%1 ...

  8. C/C++深度优先搜索(递归树模拟)

    //C++深度优先搜索(递归树模拟) #define _CRT_SECURE_NO_WARNINGS #include <iostream> #define MAX_N 1000 usin ...

  9. ES6高级技巧(五)

    Set 由于Set结构没有键名,只有键值所有keys方法和values方法的行为完全一致 let a=new Set([1,2,3,4]) //a.keys() a.values() 或者直接用of遍 ...

  10. Dubbo简介与使用

    1:Dubbo是什么 阿里生产的一种rpc 实现框架  Dubbo 是一个分布式服务框架,是阿里巴巴开源项目 ,被国内电商及互联网项目中使用. Dubbo 致力于提供高性能和透明化的RPC远程服务调用 ...