Html 代码：

<html>

<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

</html>

js代码：

<script type="text/javascript">

    var xmlhttp;

    function loadXMLDoc() {

        //ajax script goes here...

        if(window.XMLHttpRequest) {

            //code for IE7+, firefox, Chrome, Opera,Sarari

            xmlhttp =  new XMLHttpRequest();

        }else {

            //code for IE6,IE5

            xmlhttp =  new ActiveXObject("Microsoft.XMLHTTP");

        }

        if(xmlhttp != null) {

            //创建响应XMLHttpRequest对象状态变化的函数

            xmlhttp.onreadystatechange = httpStateChange;

            //创建http请求

            xmlhttp.open('GET', 'json/data.json', true);

            //发送http请求

            xmlhttp.send(null);

        }

    }

    function httpStateChange() {

        console.log(xmlhttp.readyState, xmlhttp.status);

        //请求中.

        if(xmlhttp.readyState == 1) {

            //loading..

            document.getElementById('myDiv').innerHTML = 'loading..';

        }

        ////异步调用完毕

        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var data = JSON.parse(xmlhttp.responseText);

            console.log(data);

           document.getElementById('myDiv').innerHTML = data.sites[1].Name;

        }

    }

</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. MySQL实战45讲学习笔记：第十三讲

    一.引子 经常会有同学来问我,我的数据库占用空间太大,我把一个最大的表删掉了一半的数据,怎么表文件的大小还是没变? 那么今天,我就和你聊聊数据库表的空间回收,看看如何解决这个问题. 这里,我们还是针对 ...

  2. TJOI 2015 概率论（生成函数）

    题意 ​ 求一棵随机生成的有根二叉树(节点无标号,各种不同构的情况随机出现)叶子结点个数的期望. 思路 ​ 用生成函数做是个好题. ​ 我们考虑设 \(n\) 个节点,所有不同构二叉树叶子结点的总和为 ...

  3. Kubernetes Dashboard 安装与认证

    1.安装dashboard $ kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v1.10.1/src/ ...

  4. torch_02_多项式回归

    """ torch.float64对应torch.DoubleTensor torch.float32对应torch.FloatTensor 将真实函数的数据点能够拟合成 ...

  5. ElasticSearch如何更新集群的状态

    ElasticSearch如何更新集群的状态 最近发生了很多事情,甚至对自己的技术能力和学习方式产生了怀疑,所以有一段时间没更新文章了,估计以后更新的频率会越来越少,希望有更多的沉淀而不是简单地分享. ...

  6. SpringMVC重要注解 @ControllerAdvice

    @ControllerAdvice,是Spring3.2提供的新注解,从名字上可以看出大体意思是控制器增强.让我们先看看@ControllerAdvice的实现: package org.spring ...

  7. digital clock based C

    /********************************** * Name : timeDisplay.cpp * Purpose: Display digital clock accord ...

  8. SQLServer之服务器连接

    目录 SQL Server Management Studio连接 CMD命令行窗口连接 通用数据连接文件连接 SQL Server Management Studio连接 定义 SQL Server ...

  9. 操作系统与进程.md

    目录 1. 操作系统 1.1 作用 1.2 操作系统的发展 2. 进程的理论 2.1 相关名词 2.2 进程的创建 2.3 进程的状态: 1. 操作系统 ​ 管理.控制.协调计算机硬件与软件资源的计算 ...

  10. 批量操作mysql数据库表

    SELECT CONCAT('truncate TABLE ',table_schema,'.',TABLE_NAME, ';') FROM INFORMATION_SCHEMA.TABLES WHE ...