<!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. win7下elasticsearch5.0 安装head插件

    项目开发用到了ES,5.X版本的,然而网上好多的安装资料都不能用,全是之前的老版本,今天弄了一上午终于完事了,总结一下安装的步骤. 1.安装NodeJs 去官网https://nodejs.org/e ...

  2. threejs里面的vector3源码解析

    // File:src/math/Vector3.js /** * @author mrdoob / http://mrdoob.com/ * @author *kile / http://kile. ...

  3. HDU 5527---Too Rich（贪心+搜索）

    题目链接 Problem Description You are a rich person, and you think your wallet is too heavy and full now. ...

  4. Java系列 – 用Java8新特性进行Java开发太爽了(续)

    本人博客文章网址:https://www.peretang.com/using-java8s-new-features-to-coding-is-awesome-2/ 前言 上周, 我们谈论了关于Ja ...

  5. .net 自动摘要等算法 HanLP.net

    参考资料: http://www.hankcs.com/nlp/call-hanlp-in-csharp.html 目前自动摘要算法似乎没有.net 版本,而以java,python 居多 自动摘要算 ...

  6. C# 实现语音听写

    本文系原创,禁止转载. 分享如何使用c#对接科大讯飞语音听写服务,简单高效地实现语音听写. 实现语音听写主要分为录音和语音识别两部分:录音是指获取设备声卡端口的音频数据并将之保存为音频文件,语音识别就 ...

  7. 深入理解 JavaScript（二）

    立即调用的函数表达式 前言 大家学 JavaScript 的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这 ...

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

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

  9. Java实现简单文件过滤器

    输入路径查找该路径下的指定文件类型的文件 代码思路: 想要循环遍历文件夹下所有子文件夹,就要用到递归. 首先判断路径是否存在: 是:获取文件 判断是否文件夹: 是:调用自身,继续获取子文件夹下内容 否 ...

  10. C#设计模式总结（转）

    一.引言 经过这段时间对设计模式的学习,自己的感触还是很多的,因为我现在在写代码的时候,经常会想想这里能不能用什么设计模式来进行重构.所以,学完设计模式之后,感觉它会慢慢地影响到你写代码的思维方式.这 ...