AJAX(3) CORS和JSONP

AJAX是一个强大的工具，可以让我们创建交互式、动态的web应用程序。它允许我们向服务器发送异步请求，并对服务器的响应作出反应，而无需刷新整个页面。


在AJAX中，我们经常需要跨域请求资源，也就是从一个源向另一个源发送请求。由于浏览器安全策略的限制，这种跨域请求通常会受到限制，我们需要使用其他方法来实现。

CORS (Cross-Origin Resource Sharing)是一种W3C标准，它允许我们实现跨域请求。CORS通过添加一些HTTP头字段来实现跨域请求，这些头字段用于指定请求的源、允许的请求方法、允许的响应头字段等。


为了启用CORS，我们需要在服务器端配置CORS头字段。通常情况下，我们需要添加以下头字段：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With

其中，`Access-Control-Allow-Origin`指定允许的请求源，`Access-Control-Allow-Methods`指定允许的请求方法，`Access-Control-Allow-Headers`指定允许的请求头字段。

如果服务器端启用了CORS，那么我们就可以在客户端通过AJAX发送跨域请求。在发送请求之前，我们需要设置以下请求头字段：

Origin: https://example.com

其中，`Origin`指定请求的源。

当浏览器发送跨域请求时，服务器会先返回一个预检请求（OPTIONS请求），以检查请求是否被允许。如果预检请求成功，那么浏览器会发送实际的请求。


如果服务器端没有启用CORS，那么浏览器会阻止跨域请求，并抛出错误。

JSONP (JSON with Padding)是一种技术，它允许我们绕过同源策略的限制，实现跨域请求。JSONP的工作原理是将数据包装在JSON格式的字符串中，然后通过<script>标签加载这个字符串。由于<script>标签不受同源策略的限制，因此这种方法可以实现跨域请求。


为了使用JSONP，我们需要在服务器端提供一个JSONP端点，这个端点需要将数据包装在JSON格式的字符串中，并指定一个回调函数。在客户端，我们需要使用<script>标签加载这个JSONP端点，并指定回调函数。当JSONP端点返回数据时，浏览器会调用回调函数，并将数据传递给回调函数。


JSONP是一种简单易用的跨域请求技术，但它也有一个缺点，那就是它只能用于GET请求。如果我们需要发送其他类型的请求，那么我们需要使用其他方法，比如CORS。

AJAX、CORS和JSONP的区别和联系

• AJAX是一个强大的工具，它允许我们创建交互式、动态的web应用程序。
• CORS是一种W3C标准，它允许我们实现跨域请求。
• JSONP是一种技术，它允许我们绕过同源策略的限制，实现跨域请求。
• CORS是一种更现代、更安全的方法，它可以用于所有类型的请求。
• JSONP是一种简单易用的方法，但它只能用于GET请求。