zoukankan      html  css  js  c++  java
  • 使用XMLHttpRequest异步通信

    <!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>


  • 相关阅读:
    vue脚手架项目配置后端接口(mock数据)
    list添加删除动画(transition-group)
    fast mock官网mock数据
    vuex日志插件(createLogger)
    环形进度条
    程序员的周末生活
    hbase错误之Region in transition异常解决
    不同虚拟机之间的文件传递
    windows上链接虚拟机
    hadoop——yarn
  • 原文地址:https://www.cnblogs.com/zhengwenqiang/p/6804625.html
Copyright © 2011-2022 走看看