解决Ajax跨域请求的两种简易方案：JSONP与PHP代理

Ajax跨域限制与原理

Ajax存在跨域限制，例如www.baidu.com无法直接请求www.163.com的资源。但它可以请求同域名下的不同路径文件，如www.baidu.com/1.json或ent.baidu.com/1.json。这是出于安全考虑，服务器程序会拒绝来自其他服务器的XHR类型请求。

JSONP跨域方案

一、使用JSONP

JSONP全称JSON with Padding，是一种非官方协议。它允许服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。这仅是JSONP的一种简单实现形式，出处不可考。

可以将JSONP理解为JSON加上Padding（填充部分）。

绿色部分代表JSON数据，外层的fun();则是函数调用，属于Padding补充部分。

JSONP的原理在于将定义写在HTML源文件中，而将调用放在script标签引用的外部文件中。由于script标签允许跨文件使用，从而实现了跨域。引用的文件可以是php、js、txt等各种格式。

下面通过一个具体例子来说明：

jsonp.txt文件的内容如下：

//调用函数
fun({
  "result" : [
    {
      "name" : "小明",
      "age" : 12,
      "sex" : "男"
    },
    {
      "name" : "小红",
      "age" : 13,
      "sex" : "女"
    },
    {
      "name" : "小绿",
      "age" : 16,
      "sex" : "女"
    }
  ]
});

运行结果展示：

考虑到直接使用JSONP较为繁琐，可以将其封装为通用的实用工具：

jQuery已经提供了封装好的API，即ajax()函数。

具体用法可参考jQuery官方手册。

PHP后端代理方案

二、使用PHP进行数据代理

几乎所有后端语言都能实现此功能，以下是PHP示例：

<?php
  header("Content-Type:text/html;charset=utf-8");
  $a = file_get_contents("网址");
  print_r($a);
?>

其中，header用于设置返回给浏览器的头文件字符集和文件类型。

以上即为本文的全部内容，希望对读者有所帮助，欢迎支持本站。