1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>xml</title>
  6. </head>
  7. <body>
  8. 	<div id="div"></div>
  9.  
  10. 	<button id="person">加载信息</button>
  11.  
  12. 	<script type="text/javascript">
  13. 		//声明全局XMLHttpRequest对象
  14. 		var myXmlHttpRequest;
  15. 		if(window.XMLHttpRequest){
  16. 			myXmlHttpRequest = new XMLHttpRequest();
  17. 		}else{
  18. 			myXmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
  19. 		}
  20.  
  21. 		var numb = 0;
  22.  
  23. 		document.getElementById("person").onclick = function(){
  24. 			var url="/app/json/a.json";
  25. 			/*
  26. 				O 表示未发送，open()函数还没执行。
  27. 				1 表示已发送，send()函数还没执行。
  28. 				2 send函数已执行，头部和状态吗都可以获取了。
  29. 				3 头部已收到，但响应体在解析中。
  30. 				4 表示请求已完成，包括响应头和响应体的内容已经接收到了。
  31. 				客户端跨域的XMLHttpRequest需要服务端的支持来保证JSON资源请求成功。
  32. 				服务器端在响应头加上带有Access-Control-Allow前缀的属性为跨域资源共享提供支持。
  33. 				CORS（Cross-Origin Resource Sharing）使得跨域资源共享的同时还可以禁止某些域名访问。
  34. 			*/
  35. 			myXmlHttpRequest.onreadystatechange = function(){
  36. 				if(myXmlHttpRequest.readyState===4&&myXmlHttpRequest.status===200){
  37. 					var myObject = JSON.parse(myXmlHttpRequest.responseText);
  38. 					var myJSON = JSON.stringify(myObject);
  39. 					var div = document.getElementById("div");
  40. 					div.innerHTML = myJSON;
  41. 				}
  42. 			}
  43.  
  44. 			console.log("走了"+(++numb));
  45. 			myXmlHttpRequest.open("GET",url,true);
  46. 			myXmlHttpRequest.send();
  47.  
  48. 		}
  49. 	</script>
  50. </body>
  51. </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. kali切换字符界面模式和切换图形界面模式

    我也是走了很多弯路,下面把正确的命令写出来,网上的不是说不正确,是linux命令做出了更改 Systemd是一种新的linux系统服务管理器 它替代了init, 直接上命令吧! 切换至字符界面 sud ...

  2. Android - 多语言自动适配

    Android为多语言适配提供了很大的方便.开发者不需要在代码中进行修改.只需要配置xml文件. res --> values 其中存放有xml文件.一般这些都是英文的字符串.我们可以存放其他语 ...

  3. 冒泡排序（java）

    冒泡排序是数据结构中很经典的排序算法,我的理解:以从小到大的顺序为例,原数组为arr[4] = {5, 6, 2, 3},从最右面的元素开始与相邻元素两两比较,交换位置(小的放在左边):从代码中也容易 ...

  4. Java8 Stream代码详解+BenchMark测试

    Java8 Stream基础.深入.测试 1.基本介绍 1.创建方式 1.Array的Stream创建 1.直接创建 // main Stream stream = Stream.of("a ...

  5. maven依赖jar包更新，业务jar需同步更新（业务jar依赖API）

    背景: 环境出现问题,定位为依赖jar缺失,修改工程pom文件补充依赖jar. 更新要点说明: 依赖jar,更新提交 业务jar,也需更新提交:maven构建会把依赖jar引用进去,更新环境如果单独更 ...

  6. 配置PLSQL,提升工作效率

    界面模板的配置: 方便用户快速点击需要的功能.如打开SQL Window 1.打开customize,用户自定义Toolbars对话框. 2.在Commands命令标签页,选中要添加的命令,拖动到工具 ...

  7. （转）mybatis常用jdbcType数据类型

    1 MyBatis 通过包含的jdbcType类型 BIT FLOAT CHAR TIMESTAMP OTHER UNDEFINED TINYINT REAL VARCHAR BINARY BLOB ...

  8. PHP中通过sqlsrv调用存储过程——成绩排名去除重复字段的数据行

    培训考试项目中,需要实现考试成绩排名:排名参考项为分数(score降序).参加日期(attendtime升序).第几次参加考试(frequency升序):并且,每个用户只保留一条数据(pid). 考试 ...

  9. HDU6043 KazaQ's Socks

    Problem Description KazaQ wears socks everyday. At the beginning, he has n pairs of socks numbered f ...

  10. 一台机器启动多个tomcat简单配置

    一台机器启动多个Tomcat只需要解决Tomcat端口冲突的问题. 相关配置:打开 Tomcat 目录下 conf \ server.xml 共修改三处端口,分别是: <Server port= ...