Jqueryjsonp技术实现跨域数据请求

一、什么是跨域数据请求？

在Web应用中，当一个页面向与其所在不同域名或不同端口或不同协议等三个条件之一的服务器请求数据时，就会发生跨域数据请求。由于有同源策略（Same Origin Policy）的限制，Web应用只能在当前域名下访问自己的资源，不能访问其它域名下的资源。为了解决跨域数据请求的问题，jQuery出现了一种特殊的请求方式，即JSONP（JSON with Padding）。

二、JSONP（JSON with Padding）的原理

JSONP的核心思想是利用标签的跨域性，以及服务端可返回任意JavaScript代码的特性，从而实现跨域数据请求。简单说来，就是在客户端动态创建标签，src属性设置为服务端的数据请求地址，同时设定一个callback参数，该参数是客户端生成的函数名，用于将服务端返回的JSON字符串转换为一个JavaScript对象，并传入参数，使得数据能够被客户端正常处理。

$.getJSON("http://www.example.com/ajax.php?callback=?", function(data) {
  console.log(data);
});

其中，’http://www.example.com/ajax.php’是服务端请求地址，callback参数用于设定客户端生成的函数名（这里用’?’占位符），作为回调函数使用。此时，客户端通过动态创建一个名称为’?’的函数来接收服务端返回的数据。服务端在返回数据时，会把JSON字符串嵌入到’?’函数之中，客户端通过执行该函数来实现对数据的处理。

三、使用JSONP的注意事项

JSONP请求是一种hack技术，虽然其原理简单，但在使用过程中，还是需要注意一些事项：

1.服务器返回数据格式

服务端返回的数据是JavaScript代码，由客户端动态创建标签，插入该代码到页面中执行。因此，服务端返回的数据必须是合法JavaScript代码，即返回的数据必须以一段函数包裹起来，函数名由callback参数指定。服务端可通过获取callback参数的值，动态生成不同的函数来适应客户端的需求。

2.服务端安全问题

由于JSONP是动态插入JavaScript代码，客户端的安全问题需要由服务端加以处理。即服务端必须对返回的数据进行过滤，避免返回恶意代码包含在JSON字符串之中，将来危及客户端的正常使用。

3.客户端回调函数问题

当jsonp请求完成后，客户端的回调函数必须保证被删除，避免多次触发回调函数时冲突。如果同一个回调函数被多个jsonp请求使用，客户端不得不为每个请求设置不同的回调函数名，显然这会增加客户端的开发难度。jQuery为此提供了一种新的解决方案，即callback参数传’?’符号。这时，jQuery会替换’?’为一个随机的函数名，确保每个jsonp请求都使用不同的函数名来避免冲突。

四、总结

JSONP是处理跨域数据请求的一种hack技术，通过动态创建标签来实现服务端数据的获取。其核心思想是利用标签的跨域性，同时服务端返回的数据必须是合法JavaScript代码，以便客户端动态创建函数来接受数据。务必注意服务端和客户端的安全性问题，确保应用安全稳定。jQuery的JSONP请求方式使用简单，避免了客户端回调函数命名的冲突，提高了开发效率。