ajax jsonp原理(示例代码)

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

Ajax JSONP（JSON with Padding）是一种跨域请求数据的技术。在同源策略限制下，浏览器不允许通过XMLHttpRequest对象直接发送跨域请求。而JSONP利用了script标签的src属性不受同源策略限制的特性，通过动态创建script标签，向服务器请求数据，并在服务器返回的数据中包裹回调函数的调用，从而实现跨域请求数据的目的。

示例代码如下所示：


function handleResponse(data) {
  // 处理返回的数据
  console.log(data);
}
function fetchData() {
  // 创建script标签
  var script = document.createElement('script');
  // 设置script标签的src属性，包含请求的URL和回调函数名
  script.src = 'http://example.com/data?callback=handleResponse';
  // 将script标签添加到文档中
  document.body.appendChild(script);
}

在上述示例代码中，我们定义了一个名为`handleResponse`的回调函数，用于处理服务器返回的数据。然后，通过`fetchData`函数触发请求数据的操作。在`fetchData`函数中，我们动态创建了一个script标签，并将请求的URL和回调函数名作为src属性的值。这里的回调函数名`handleResponse`需要和服务器端返回的数据中的回调函数名保持一致。通过将script标签添加到文档中，浏览器会自动发送请求，并在返回的数据中包裹回调函数的调用。当服务器返回数据时，会调用`handleResponse`函数，并将数据作为参数传入，从而实现对返回数据的处理。

需要注意的是，服务器返回的数据需要以回调函数的调用形式返回，即返回的数据应该是一个函数调用的形式，如`handleResponse(data)`，其中`data`是具体的数据。这样浏览器在接收到数据时，会将其当作JavaScript代码执行，从而触发回调函数的调用，并将数据作为参数传入。

通过使用Ajax JSONP技术，我们可以实现跨域请求数据，解决了同源策略限制的问题，从而在网页中获取并处理来自其他域的数据。