ajax ur跨域 示例代码

Ajax跨域是指在浏览器端使用Ajax技术进行网络请求时，请求的目标地址与当前页面的域名不一致。由于浏览器的同源策略限制，普通的Ajax请求是无法跨域的。为了解决这个问题，我们可以使用JSONP或者CORS来实现跨域请求。

JSONP（JSON with Padding）是一种利用<script>标签的src属性可以跨域加载资源的特性来实现跨域请求的方法。在JSONP请求中，我们需要在目标服务器上预先定义一个回调函数，然后在请求中指定这个回调函数的名称。服务器在返回数据时，会将数据作为参数传递给这个回调函数，然后浏览器会自动执行这个回调函数，从而获取到跨域的数据。

下面是一个使用JSONP进行跨域请求的示例代码：

function handleResponse(data) {
  console.log("跨域请求返回的数据：", data);
}
var script = document.createElement("script");
script.src = "http://example.com/api?callback=handleResponse";
document.body.appendChild(script);

在上面的示例中，我们通过创建一个<script>标签并设置其src属性为目标服务器的地址，同时指定了一个名为`handleResponse`的回调函数。目标服务器返回的数据会作为参数传递给这个回调函数。这样，浏览器会自动执行这个回调函数，并将跨域请求返回的数据输出到控制台。

需要注意的是，JSONP只支持GET请求，且需要目标服务器的配合，即目标服务器需要预先定义好回调函数。如果目标服务器不支持JSONP，我们可以使用CORS来实现跨域请求。

CORS（Cross-Origin Resource Sharing）是一种浏览器机制，它允许服务器在响应中设置一些特殊的HTTP头部，从而告诉浏览器是否允许跨域请求。在CORS中，浏览器会发送一个跨域请求的预检请求（OPTIONS请求），如果服务器返回的响应头中包含了允许跨域的信息，浏览器就会发送真正的跨域请求。

下面是一个使用CORS进行跨域请求的示例代码：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api", true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("跨域请求返回的数据：", xhr.responseText);
  }
};
xhr.send();

在上面的示例中，我们通过XMLHttpRequest对象创建一个GET请求，设置请求的URL为目标服务器的地址。通过设置`withCredentials`属性为true，告诉浏览器在跨域请求中携带凭证信息（如Cookie）。当请求状态变为4且响应状态为200时，我们可以通过`xhr.responseText`获取到跨域请求返回的数据，并输出到控制台。

需要注意的是，CORS需要服务器的支持，即目标服务器需要在响应头中设置`Access-Control-Allow-Origin`等相关字段来允许跨域请求。浏览器也会根据安全策略来限制跨域请求的行为，例如不允许携带凭证信息等。