针对ajax(cors跨域)最简单输出json数据方法，无需第三方框架或代码和ajax跨域请求json数据这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展AJAXcors跨域请求、AJAX及

针对ajax(cors跨域)最简单输出json数据方法，无需第三方框架或代码和ajax跨域请求json数据这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展AJAX cors跨域请求、AJAX 及 同源策略/ CORS跨域、AJAX 跨域请求 - JSONP获取JSON数据、Ajax 跨域请求 jsonp获取json数据等相关知识，希望可以帮助到你。

• ajax(cors跨域)最简单输出json数据方法，无需第三方框架或代码（ajax跨域请求json数据）
• AJAX cors跨域请求
• AJAX 及 同源策略/ CORS跨域
• AJAX 跨域请求 - JSONP获取JSON数据
• Ajax 跨域请求 jsonp获取json数据

ajax(cors跨域)最简单输出json数据方法，无需第三方框架或代码（ajax跨域请求json数据）

/**
	 * cors输出json数据
	 * @param response
	 * @param json json字符串
	 * @param domain 需要跨域的域名
	 */
	protected void outputCrossstring(final HttpServletResponse response,final String json,final String domain) {
		try {
			response.setContentType("application/json;charset=utf-8");
			response.setCharacterEncoding("utf-8");
			response.setHeader("Pragma","No-cache");
			response.setDateHeader("Expires",0);
			response.setHeader("Cache-Control","no-cache");
			response.setHeader("Access-Control-Allow-Origin",domain); //核心请求头
			response.setHeader("Access-Control-Allow-Credentials","true"); //核心请求头
			PrintWriter out = null;
			try {
				out = response.getWriter();
				out.write(json);
				out.flush();
			} catch (Exception e) {
				e.printstacktrace();
			} finally {
				if (out != null) {
					out.close();
				}
			}
		} catch (Exception e) {
			e.printstacktrace();
		}
	}

AJAX cors跨域请求

在PHP文件上加上
header("Access-Control-Allow-Origin: *");   //全域名
header("Access-Control-Allow-Credentials: true");   //是否可以携带cookie

header("Access-Control-Allow-Methods: POST,GET,PUT,OPTIONS,DELETE");   //允许请求方式
header("Access-Control-Allow-Headers: X-Custom-Header");   //允许请求字段，由客户端决定
header("Content-Type: text/html; charset=utf-8"); //返回数据类型（ text/html; charset=utf-8、 application/json; charset=utf-8 )

AJAX 及 同源策略/ CORS跨域

什么是AJAX

是异步的JavaScript 和 XML

面试题：

请使用原生js来发送AJAX请求

let request = new XMLHttpRequest()
  request.open(''get'', ''/xxx'') // 配置request
  request.send()
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){ 
      if(request.status >= 200 && request.status < 300){
        console.log(''说明请求成功'')
      }else if(request.status >= 400){
        console.log(''说明请求失败'') 
      }
    }
  }

同源策略

如果你不是 xxxxx.com 里的js 你就不能向这个域名发送 任何ajax请求

只有 协议+端口+域名 一模一样才允许发ajax请求
【注意要】一模一样 一模一样 一模一样 一模一样

1、http：//baidu.com 可以向 http：//www.baidu.com 发送请求吗 ？？？
不能！！！要一模一样才行

2、http：//baidu.com：80 可以向 http：//baidu.com：81 发送 ajax 请求吗？？？
不能！！！端口不一样

cors 跨域

cors 可以告诉浏览器 不需阻止
cross-origin resource sharing 跨站资源共享

非要响应就在服务器写：
    response.setHeader(''Access-Control-Allow-Origin'',''xxxxxx 网址 xxxxxx'') 

为什么要有同源策略？

因为原页面用form 提交到另一个域名之后，
原页面的脚本无法获取新页面中的内容
所以浏览器认为是安全的

而ajax是可以读取响应内容的
因此浏览器不能允许你这样做（请求已经发出去了 只是没有响应而已）

同源策略的本质是：

一个域名的js
在未经允许的情况下不得读取另一个域名的内容
但浏览器并不阻止你向另一个域名发送请求

AJAX 跨域请求 - JSONP获取JSON数据

Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用XMLHttpRequest函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用GET请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

1、什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript,it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

HTML代码 （任一）：