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. Spring Cloud Gateway重试机制

    前言 重试,我相信大家并不陌生.在我们调用Http接口的时候,总会因为某种原因调用失败,这个时候我们可以通过重试的方式,来重新请求接口. 生活中这样的事例很多,比如打电话,对方正在通话中啊,信号不好啊 ...

  2. kali linux2019.4 设置中文字体教程

    最近Kali linux更新到了2019.4版本,下载下来发现找不到设置中文的选项,经过在网上搜索一番发现一个开源的汉语字体包:文泉驿字体 在终端中输入以下命令 apt-get install ttf ...

  3. STM32开发/烧录/调试环境搭建 基于:Win10+STM32Cube+openocd+cmsis-dap(dap-link)

    dap-link是个不错的STM32下载/调试工具,然而STM32Cube并没有直接支持它,只能通过openocd的方式间接支持. 网络上虽然已经有了其他人的教程,不过基本都是基于linux或者msy ...

  4. 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (三)

    本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...

  5. CW2 Software Maintenance Spec Sheet

    CW2 Software Maintenance Spec SheetAcademic Year 2019/2020CW2 is about maintaining and extending a r ...

  6. vue学习面向对象，在项目中怎么用呢？

    面向对象感觉很牛逼,可是在项目中怎么用呢? 我至今见到的用法,写了一个用户对象. 效果:只要执行了new User(userInfo)就会在cookie,localStorage存放数据. 所以最简单 ...

  7. 前端图片canvas，file，blob，DataURL等格式转换

    将file转化成base64 方法一:利用URL.createObjectURL() <!DOCTYPE html> <html> <head> <title ...

  8. freemarker模板文件的4个组成部分

    FreeMarker模板文件主要由以下4个部分组成:1.文本,直接输出的部分.2.注释,即<#–…–>格式不会输出.3.插值(Interpolation):即${..}或者#{..}格式的 ...

  9. TortoiseSVN客户端更改新的URL和账号

    一: 变更SVN地址 右键(TortoiseSVN) → Relocate → 输入你新的URL地址 二:变更账号 TortoiseSVN右键->Setting 进入“Setting”之后,也就 ...

  10. Scala Types 2

    存在类型 形式: forSome { type ... } 或 forSome { val ... } 主要为了兼容 Java 的通配符 示例 Array[_] // 等价于 Array[T] for ...