使用JSONP时,必须在手机客户端创建一个script标识

lxf2023-12-14 03:40:02

JSONP(JSON with Padding)是一种跨域请求解决方案,它容许在没有受同源策略限定的情形下从一个域中向另一个域中请求数据。

JSONP的原理是运用<script>标签的src特性并没有跨域请求限定的特点来达到跨域请求数据库访问。 使用JSONP时,必须在手机客户端创建一个script标识,将需要访问的网络资源URL以主要参数方式传达给网络服务器,网络服务器在接受到要求后,将它们装进一个函数调用中返还给手机客户端,这一函数公式便是在手机客户端事先界定好一点的调用函数。


下边是一个JSONP的事例:

手机客户端编码:

function handleResponse(response) {
  //解决缺少对象的信息
}

var script = document.createElement('script');
script.src = 'https://jsonp.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器端编码:

var data = { name: 'John', age: 30 };
var jsonpResponse = 'handleResponse('   JSON.stringify(data)   ');';
res.send(jsonpResponse);

在这样一个例子中,手机客户端编码中创建了一个script标识,将需要访问的网络资源URL传达给网络服务器,并选定了调用函数的名称是handleResponse。网络服务器在接受到要求后,将它们装进一个函数调用中返还给手机客户端,函数公式名叫handleResponse,其实就是在手机客户端事先界定好一点的调用函数。


除开上边的实例,下列是一个更完整的JSONP实例,它演示了怎么使用jQuery去进行JSONP要求:

$.ajax({
  url: "http://example.com/api",
  dataType: "jsonp",
  data: {
    name: "John",
    age: 30
  },
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

在这样一个例子中,使用jQuery的$.ajax方式来开展JSONP要求。在其中,url主要参数特定要请求的URL,dataType主要参数特定要所使用的基本数据类型,data主要参数特定要上传的数据信息。假如网络服务器取得成功回应了要求,success调用函数能被启用并传送回应数据信息做为主要参数。假如请求失败,error调用函数能被启用并传送错误报告做为主要参数。


以下属于一些关于JSONP补充:

  1. JSONP仅支持GET要求,不兼容POST等其它HTTP方式。
  2. 由于JSONP要求是由实例化script标识达到的,因此需要保证被请求的数据库返回是JSONP格式数据信息,而非普通JSON文件格式,不然在对待时会有拼写错误。
  3. 在服务器端解决JSONP要求时,必须分析callback主要参数数值,并把数据信息外包装在这个函数的调用中回到,比如:
handleData({"name": "John", "age": 30});
  1. 在服务端解决返回数据时,必须保证调用函数的名称与要求时设定的callback主要参数数值同样。
  2. 因为JSONP要求是由script标识达到的,所以很难在要求时设定请求头(比如Content-Type),也未获取响应头(比如Cookie),这也是JSONP与XHR等其它跨域请求方法的一个差别。

还有一些有关JSONP需要注意的事项:

  1. JSONP存在一定的安全隐患,由于返回数据信息能够被随意JavaScript代码启用与处理,可能会致使xss漏洞(XSS)等安全隐患。因而,使用JSONP的时候需要保证请求的数据库是可靠的,而且返回数据信息不包括恶意程序。
  2. 使用JSONP时,假如服务端返回数据信息过多,可能会致使电脑浏览器卡屏或奔溃。因而,必须在服务端对返回信息进行缩小或分页查询解决,以保证信息量在一定范围之内。
  3. 使用JSONP时,应注意兼容问题。尽管JSONP是一种比较通用跨域请求计划方案,但一些较老浏览器(比如IE6)中可能出现兼容性问题,自然,微软公司现在抛下IE了(笑)。因而,使用JSONP的时候需要开展可用性测试,并根据实际情况挑选别的跨域请求方法(比如CORS)。
  4. 最终需注意,因为JSONP的控制方式与一般的XHR要求不一样,因而不能使用XHR所提供的一些高端特点(比如上传图片、获得进展等)。

总体来说,JSONP是一种又简单又高效的跨域请求解决方法,但因其存在一些局限(比如仅支持GET要求,没法设定请求头和获得回应一等),因此实际应用中必须根据实际情况来选择。如今,跨域请求资源整合共享(CORS)、Nginx代理商等成为了跨域请求的主力方式。文中仅仅是为了介绍一下以前常用的一种跨域请求解决方案。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上,大家可以学到最新前端开发技术,掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例,让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件,帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进,能够帮助你节约时间精力,提高研发效率。 此外,本站还拥有一个有活力的小区,你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信,街道的能量能够帮助你能够更好地进步与成长。 在网站上,大家可以寻找你需要的一切前端工程师网络资源,使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭,一起探索前端工程师的无限潜能!