ajax跨域请求json数据

涛哥
PHP代码

在Ajax中进行跨域请求JSON数据，需要注意浏览器的同源策略限制。同源策略要求如果两个页面在协议、域名或端口上任意一个不同，则不能进行跨域访问。

以下是几种常见的跨域请求JSON数据的方法：

  1. JSONP

使用JSONP（JSON with Padding）技术可以实现跨域请求JSON数据。JSONP是一种利用<script>标签的跨域方式，通过动态创建<script>元素来请求一个带有回调函数的URL地址，在后端返回的JavaScript代码中调用该回调函数并传递JSON数据。

function jsonp(url, callback) {
  var script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.head.appendChild(script);
}

jsonp('http://example.com/data', 'processData');

function processData(data) {
  console.log(data);
}

在这个示例代码中，使用了JSONP技术请求'http://example.com/data'地址的JSON数据，并指定回调函数为'processData'。在后端返回的JavaScript代码中会调用该回调函数并传递JSON数据。

  1. CORS

使用CORS（Cross-Origin Resource Sharing）技术也可以实现跨域请求JSON数据。CORS是一种通过HTTP头部信息告诉浏览器哪些跨域请求可以被接受的机制。

在前端代码中，使用XMLHttpRequest对象发送一个带有Origin头部的请求，后端在响应中设置Access-Control-Allow-Origin头部来允许跨域请求。如果后端不支持CORS，也可以使用代理来转发请求，将跨域请求变成同源请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.setRequestHeader('Origin', 'http://mywebsite.com');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

在这个示例代码中，使用了XMLHttpRequest对象发送一个带有Origin头部的GET请求。在后端返回的响应中，需要设置Access-Control-Allow-Origin头部为'http://mywebsite.com'，以允许跨域请求。

 
  • 标签
  • JavaScript
  • ajax请求