<!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. multipath多路径实验01-构建iscsi模拟环境

    multipath多路径实验01-构建iscsi模拟环境 前几天跟同事网上闲聊技术,吐槽之前自己没有配置过多路径的经历,虽然多路径的配置过程很简单,职责划分也应是主机或存储工程师来搞定,DBA只需要直 ...

  2. 简单好用用js就可以保存文本文件到本地

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒

    <script> (function () { var tian = document.getElementsByClassName('JS-tian')[0]; var shi = do ...

  4. language-detection 语言检测工具 java版的应用demo

    本文基本借鉴大佬文章:http://www.cnblogs.com/makemelaugh/archive/2012/09/26/2704802.html 在此基础上添加一些自己的补充,方便查阅. 提 ...

  5. 20170713_filter/sort

    js:filter过滤数组元素 //1.数组取奇数 var arr = [1,2,3,4,5]; var r = arr.filter(function(x){ return x % 2 !== 0; ...

  6. static关键字，引发的spring普通类获取spring的bean的思考

    在c++和java中static关键字用于修饰静态成员变量和成员函数 举例一个普通的javabean class AA { int a; static int b; geta/seta;//此处省略g ...

  7. 途虎养车Tuhu商城系统开发

    途虎养车Tuhu商城系统开发,咨询:何经理152-2217-7508(微信同号)途虎养车商城小程序开发,途虎养车商城小程序平台开发,途虎养车商城小程序系统开发. 为什么能做得这么好,里面的门道确实不少 ...

  8. Android自动问题——黑屏、死机等解决方法

    今天用了下Android Studio,出现了一些问题,现在将启动过程中遇到的问题和解决方案列出来,方便大家参考. 安装过程不多说,网上一搜一大把. 那直接说问题吧: 1. 无法启动,报错:Faile ...

  9. Spring 学习笔记（七）—— 切入点表达式

    为了能够灵活定义切入点位置,Spring AOP提供了多种切入点指示符. execution———用来匹配执行方法的连接点 语法结构:   execution(   方法修饰符  方法返回值  方法所 ...

  10. 花了一年时间开发出来的EZNest 自动套料软件

    随着国内钢结构制造业的迅猛发展,市场竞争也愈演愈烈.近来钢材价格的大幅攀升,节约用材已成为企制胜的戈键,提高钢材的利用车自然就成了目前许多企业十分关心的一件事.对十大型钢结构生产制造商来说,如留在传统 ...