<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xml</title>
</head>
<body>
	<div id="div"></div>
	<script type="text/javascript">
		var myXmlHttpRequest = new XMLHttpRequest();
		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;
			}
		}
		myXmlHttpRequest.open("GET",url,true);
		myXmlHttpRequest.send();
	</script>
</body>
</html>

JSON ： app/json/a.json

{
	"name":"码农007",
	"addr":"北京海淀",
	"工作":"程序员",
	"hobby":[
		"IT技术",
		"跑步",
		"健身",
		"天文学",
		"音乐"
	]
}

JSON异步及跨域的更多相关文章

  1. json _ ajax_跨域

    1 json 1 js 对象 语法: 1 通过一对{}表示一个对象 2 在{}中允许通过 key:value 的形式来表示属性 3 多对的属性和值之间使用 , 隔开 2 什么中JSON 按照JS对象的 ...

  2. 访问本地json文件因跨域导致的问题

    我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...

  3. json解决ajax跨域的原理

    jsonp只能解决GET类型的ajax请求跨域问题 jsonp请求不是ajax请求,而是一般的get请求 基本原理 浏览器端: 动态生成<script>来请求后台接口(src就是接口的ur ...

  4. GTA项目 二, JSON接口开放跨域访问

    public class CORSAttribute : ActionFilterAttribute { public string Domains { get; set; } public CORS ...

  5. 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  6. 谷歌通过ajax获取本地JSON文件，为什么会提示跨域？

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  7. 同源策略、跨域、json和jsonp

    同源策略 源(origin)就是协议.域名和端口号.若地址里面的协议.域名和端口号均相同则属于同源. 以下是相对于 http://www.a.com/test/index.html 的同源检测 • h ...

  8. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  9. 跨域利器JSONP(转)

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

随机推荐

  1. jmeter- Java-POST接口使用get与json格式传参

    在测试过程中发现各种接口传参形式,今天就来说说小编遇到的一种,接口请求方式为POST:URL传参以GET形式并携带JSON 可能这样诉说有不少同学不太理解. 如图: 上图所示就是一般get请求传参格式 ...

  2. JavaScript中Function原型及其prototype属性的简单应用

    大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...

  3. Certificates does not conform to algorithm constraints

    今天在开发时遇到一个新问题:Certificates does not conform to algorithm constraints,在此记录一下解决方案. 问题详情: [ERROR] Faile ...

  4. Selenium对浏览器支持的版本

    最新的selenium与几种常用浏览器的版本兼容情况: selenium 3.4.0 : Mozilla GeckoDriver 0.18  --  Firefox 53 - 56 Google Ch ...

  5. （转）添加eclipse、MyEclipse、Spring Tool Suite的反编译插件

    很多兄弟为在IDE里看不到源代码类而不得不下一个反编译工具,但是这样会降低代码效率,如果能直接在IDE里看,何乐而不为呢!现在我整理了一下网上很多兄弟的设置反编译的经验. 可分为下面几步. 1 下载J ...

  6. Spring源码情操陶冶-AbstractApplicationContext#registerBeanPostProcessors

    承接前文Spring源码情操陶冶-AbstractApplicationContext#invokeBeanFactoryPostProcessors 瞧瞧官方注释 /** * Instantiate ...

  7. 为什么 1000 == 1000会返回false，100 == 100会返回true

    给你们看一段神奇的代码 /*对这段代码可以提供如下解释 * 判断两个对象是否相等的是看两个对象的引用是否相同 如果相同那么就返回true否则返回false * Integer会对-128~127之间的 ...

  8. JVM学习笔记二：垃圾收集算法

    垃圾回收要解决的问题: 哪些内存需要回收? 线程私有区域不需要回收,如PC.Stack.Native Stack:Java 堆和方法区需要 什么时候回收? 以后的文章解答 如何回收? 首先进行对象存活 ...

  9. OpenLayers3--ol3--新特性

    OL3: A high-performance, feature-packed library for all your mapping needs < 一个可以满足各种地图应用的高性能的.功能 ...

  10. .NET MVC与三层架构

    虽然接触了两者有一段时间了,但是有时还是会混淆概念,在此处不打算说明二者的区别,因为二者都是架构模式,并且也有一定的共存度,在实际开发中,严格区分意义不大.基于最近涉及到这部分知识就在复习下,编程过程 ...