在前端开发中，由于同源策略的限制，浏览器不允许跨域访问其他域名下的资源。而我们有时候又需要从其他域名获取数据或者调用接口来完成某些功能。这时候，就需要使用一些技术手段来实现跨域请求。本文将介绍如何使用jQuery Ajax实现跨域请求。
跨域请求的两种方式
在介绍如何使用jQuery Ajax实现跨域请求之前，先来了解一下常见的跨域请求方式。
JSONP
JSONP是一种利用<script>标签实现跨域请求的方法，通过在请求URL中添加一个回调函数的参数，服务器端返回的数据会被包裹在该回调函数中，然后在客户端执行该函数来获取返回数据。JSONP的优点是简单易用，但是只能用于GET请求，并且无法处理错误信息。
CORS
CORS（Cross-Origin Resource Sharing）是W3C规范定义的一种跨域请求方式，可以支持各种HTTP请求类型，也可以处理错误信息。但是，CORS需要服务器端进行特殊设置，如果服务器端没有进行相应配置，还是无法实现跨域请求。
使用jQuery Ajax实现跨域请求
在使用jQuery Ajax实现跨域请求前，需要确保服务器端已经进行了CORS相关的配置。如果服务器端没有进行相应设置，可以先尝试使用JSONP方式实现跨域请求。
在jQuery中，可以通过设置crossDomain和xhrFields属性来实现跨域请求。具体代码如下：
-- -------------------- ---- -------
--------
---- ------------------------------
----- ------
------------ -----
---------- -
---------------- ----
--
-------- ------------------ -
---------------------- ----------
--
------ ------------- ------- ------ -
------------------------ ------- -------
-
---其中，crossDomain属性表示是否开启跨域请求，xhrFields属性则是其他XMLHttpRequest属性的键值对集合，可以用于设置是否携带cookie等信息。如果服务器端需要验证用户信息，可以将withCredentials设置为true，表示发送Ajax请求时会带上cookie信息。
总结
本文介绍了跨域请求的两种方式以及如何使用jQuery Ajax实现跨域请求。在使用跨域请求时，应该首先确认服务器端是否已经进行了CORS相关的配置。如果没有进行相关设置，可以考虑使用JSONP方式实现跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/926