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. CentOS6.9安装MySQL5.6

    1 检查系统是否自带MySQL 检查系统是否自带MySQL yum list installed | grep mysql 下面结果说明系统自带MySQL 卸载系统自带MySQL yum -y rem ...

  2. 【网络知识之三】HTTPS协议

    HTTPS是身披SSL外壳的HTTP.HTTPS是一种通过计算机网络进行安全通信的传输协议,经由HTTP进行通信,利用SSL/TLS建立全信道,加密数据包.HTTPS使用的主要目的是提供对网站服务器的 ...

  3. sort和sorted

    sort 与 sorted 区别: sort 是应用在 list 上的方法,sorted 可以对所有可迭代的对象进行排序操作. list 的 sort 方法返回的是对已经存在的列表进行操作,而内建函数 ...

  4. CentOS 安装libgdi的方法

    1. 安装必须的包 yum install glib2-devel cairo-devel libjpeg-turbo-devel-1.2.90-8.el7.x86_64 libtiff-devel- ...

  5. 第七节：EF Core调用SQL语句和存储过程

    一. 查询类(FromSql) 1.说明 A. SQL查询必须返回实体的所有属性字段. B. 结果集中的列名必须与属性映射到的列名相匹配. C. SQL查询不能包含关联数据 D. 除Select以为的 ...

  6. Portainer容器可视化管理工具使用文档

    本文内容 主要介绍下Portainer的Docker使用方式,基于当前最新版v1.22.1,使用Docker的本地部署,并连接另一台服务器进行测试,更多请参考官网https://www.portain ...

  7. Flink基本的API（续）

    上一篇介绍了编写 Flink 程序的基本步骤,以及一些常见 API,如:map.filter.keyBy 等,重点介绍了 keyBy 方法.本篇将继续介绍 Flink 中常用的 API,主要内容为 指 ...

  8. 简单的sql语句汇总（sqlserver）

    1.修改字段的默认值 alter table 表名 add default 默认值 for 字段名称 例子: for Age; alter table 表名 add constraint DF_TAB ...

  9. Flutter实体与JSON解析的一种方法

    vs code作为编辑器 1. 首先,json对象与字符串的转换是使用json.encode和json.decode的,需要导入import 'dart:convert'; 这里主要的自然不是这个,而 ...

  10. Python多任务—进程

    一.进程以及状态 1.进程 正在运行的应用程序就是一个进程.进程是资源分配的基本单元. Python多进程可以在多核CPU上运行,多进程充分利用了多核的资源. 2. 进程的状态 工作中,任务数往往大于 ...