JSON异步及跨域
<!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异步及跨域的更多相关文章
- json _ ajax_跨域
1 json 1 js 对象 语法: 1 通过一对{}表示一个对象 2 在{}中允许通过 key:value 的形式来表示属性 3 多对的属性和值之间使用 , 隔开 2 什么中JSON 按照JS对象的 ...
- 访问本地json文件因跨域导致的问题
我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...
- json解决ajax跨域的原理
jsonp只能解决GET类型的ajax请求跨域问题 jsonp请求不是ajax请求,而是一般的get请求 基本原理 浏览器端: 动态生成<script>来请求后台接口(src就是接口的ur ...
- GTA项目 二, JSON接口开放跨域访问
public class CORSAttribute : ActionFilterAttribute { public string Domains { get; set; } public CORS ...
- 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...
- 谷歌通过ajax获取本地JSON文件，为什么会提示跨域？
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...
- 同源策略、跨域、json和jsonp
同源策略 源(origin)就是协议.域名和端口号.若地址里面的协议.域名和端口号均相同则属于同源. 以下是相对于 http://www.a.com/test/index.html 的同源检测 • h ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 跨域利器JSONP(转)
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
随机推荐
- windows调试工具列表
摘自windbg帮助文档(windbg中输入.hh): Debugging Tools for Windows (安装WinDbg后这些工具都会安装在目录C:\Program Files (x86)\ ...
- vue 自定义组件
1.Vue.component('component-test', { props:{}, data:function(){ return{} }, mounted:function(){}, com ...
- sqlserver的触发器练习实例
触发器的概念:它是由事件驱动的,就像java中的监听,当某个事件发生了,就会做一些工作. 下面直接上干货,创建insert触发器.delete触发器.DDL触发器和如何查看触发器定义 1.创建三个表学 ...
- 【SignalR学习系列】8. SignalR Hubs Api 详解（.Net C# 客户端）
建立一个 SignalR 连接 var hubConnection = new HubConnection("http://www.contoso.com/"); IHubProx ...
- 存储结构比较vector,list,dequeue,stack(转)
vector适用:对象数量变化少,简单对象,随机访问元素频繁list适用:对象数量变化大,对象复杂,插入和删除频繁最大的区别是,list是双向的,而vector是单向的.因此在实际使用时,如何 ...
- windows下配置cygwin和dig的环境变量
配置cygwin和dig的环境变量 打开"控制面板"("开始">"设置">"控制面板"),然后双击" ...
- Hexo博客添加SEO-评论系统-阅读统计-站长统计
原文地址:→传送门 写在前面 在五月出捣腾了一把个人博客,但是刚开始只做了一些基础设置,套路也没摸清,基础安装篇请看hexo从零开始到搭建完整,里面讲到了基础工具的安装及blog项目的文件夹含义,以及 ...
- 用SSH解决大局域网反向端口转发问题
本文作者Tony Lee,转载自FreeBuf.COM 自从家里换了联通光纤后,联通就在我家宽带出口前搭了一个路由器,我家也彻底沦为192.168.1.0/24段的局域网了,带来的问题就是在外网无 ...
- 36. leetcode 415. Add Strings
415. Add Strings Given two non-negative integers num1 and num2 represented as string, return the sum ...
- mybatis 详解（四）------properties以及别名定义
上一篇博客我们介绍了mybatis的增删改查入门实例,我们发现在 mybatis-configuration.xml 的配置文件中,对数据库的配置都是硬编码在这个xml文件中,如下图,那么我们如何改进 ...