<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xml</title>
</head>
<body>
	<div id="div"></div>

	<button id="person">加载信息</button>

	<script type="text/javascript">
		//声明全局XMLHttpRequest对象
		var myXmlHttpRequest;
		if(window.XMLHttpRequest){
			myXmlHttpRequest = new XMLHttpRequest();
		}else{
			myXmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
		}

		var numb = 0;

		document.getElementById("person").onclick = function(){
			var url="/app/json/a.json";
			/*
				O 表示未发送，open()函数还没执行。
				1 表示已发送，send()函数还没执行。
				2 send函数已执行，头部和状态吗都可以获取了。
				3 头部已收到，但响应体在解析中。
				4 表示请求已完成，包括响应头和响应体的内容已经接收到了。
				客户端跨域的XMLHttpRequest需要服务端的支持来保证JSON资源请求成功。
				服务器端在响应头加上带有Access-Control-Allow前缀的属性为跨域资源共享提供支持。
				CORS（Cross-Origin Resource Sharing）使得跨域资源共享的同时还可以禁止某些域名访问。
			*/
			myXmlHttpRequest.onreadystatechange = function(){
				if(myXmlHttpRequest.readyState===4&&myXmlHttpRequest.status===200){
					var myObject = JSON.parse(myXmlHttpRequest.responseText);
					var myJSON = JSON.stringify(myObject);
					var div = document.getElementById("div");
					div.innerHTML = myJSON;
				}
			}

			console.log("走了"+(++numb));
			myXmlHttpRequest.open("GET",url,true);
			myXmlHttpRequest.send();

		}
	</script>
</body>
</html>

使用XMLHttpRequest异步通信的更多相关文章

  1. Ajax 与 XmlHttpRequest

    AJAX描述了确保Web应用在Web服务器请求新数据的情况下也能(几乎)实时反应的一种方法.具体地说,AJAX只是一些建立已久的技术的相互作用,从HTML.XHTML和HTTP,到JavaScript ...

  2. 原生javaScript中使用Ajax实现异步通信

    AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...

  3. script ajax / XHR / XMLHttpRequest

    s 利用XHR 调试发送form data表单数据,F5键刷新form表单URL ,http请求地址,获取token,提交. 如:http://pcp.cns*****.com/spcp-web/vm ...

  4. 第108天：Ajax中XMLHttpRequest详解

    在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据. XMLHttpRequest可以提供不重新加载页面的情况下更新网页, ...

  5. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  6. 【Ajax 2】封装Ajax的核心对象：XMLHttpRequest对象

    导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息.那么,XMLHttpRequest对象是怎么创建和封装的呢? 一.简介 1. ...

  7. ajax——XMLHttpRequest

    XMLHttpRequest对象.能够让ajax程序在不又一次载入的页面的情况下更新页面数据,页面载入完毕后从server接受发生数据.这样既减轻了server负担又回顾了响应速度,缩短了用户的等待时 ...

  8. 本机Ajax异步通信

    昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信.为了更好的编织知识网,今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信. 原生Ajax实现异步 ...

  9. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

随机推荐

  1. Eclipse中常用快捷键

    Ctrl+C:复制. Ctrl+V:粘贴. Ctrl+X:剪切. Ctrl+S:保存. Ctrl+Z:撤销. Ctrl+A:全选. F3:快速定位光标位置的某个类.方法和属性. Ctrl+Q:跳到最后 ...

  2. DOM0级事件处理、DOM2级事件处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CJOJ 2485 UVa 11991 生日礼物 / UVa 11991 Easy Problem from Rujia Liu?

    CJOJ 2485 UVa 11991 生日礼物 / UVa 11991 Easy Problem from Rujia Liu? Description (原题来自刘汝佳<训练指南>Pa ...

  4. neo4j 数据库导入导出

    工作中需要将 A 图数据库的数据完全导出,并插入到 B 图数据库中.查找资料,好多都是通过导入,导出 CSV 文件来实现.然而,经过仔细研究发现,导出的节点/关系 都带有 id 属性 ,因为 A B ...

  5. （一）SQL关联查询的使用技巧 （各种 join）

    ---恢复内容开始--- (一)SQL关联查询的使用技巧 (各种 join) 这几天因为工作的时候,发现自己的sql语句基础不是很好,特意研究了一下,发现sql语句真的是博大精深,sql语句不仅是要查 ...

  6. SQL注入的各种类型的检测方式

    #SQL注入各个类型检测方式 http://127.0.0.1/day6/1.php?id=1 union select 1,name,pass from admin 数字型 数字型不用特意加字符,直 ...

  7. CAP 介绍及使用【视频】

    前言 很多同学可能对于CAP这个项目想有更一步的了解,包括她的工作原理以及适用的场景,所以博主就准备了一场直播给他家讲解了一下,这个视频是直播的一个录像. 由于我这次直播本来是没有打算对外的,所以也是 ...

  8. Spring源码情操陶冶-ContextLoader

    前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-ContextLoaderListener 静态代码块内容 ContextLoader在被主动调用的时候,会执行其的一个静态块,代码 ...

  9. PHP环境搭建——Apache

    1.PHP环境安装前我们需要知道PHP给我们带来的功能是什么? Php主要用在三个领域 (1)       网站和web应用程序 (2)       命令行脚本 (3)       桌面(GUI)应用 ...

  10. 准备 overlay 网络实验环境 - 每天5分钟玩转 Docker 容器技术（49）

    为支持容器跨主机通信,Docker 提供了 overlay driver,使用户可以创建基于 VxLAN 的 overlay 网络.VxLAN 可将二层数据封装到 UDP 进行传输,VxLAN 提供与 ...