jQuery ajax 跨域

一 ajax

  1. ajax–前后台分离开发,专门做后台数据的访问。局部刷新技术:
    (1)异步请求:请求和后续代码同时执行;
    (2)同步请求:等待请求执行完成后,再执行后续代码
  2. api(程序应用集–数据接口);
  3. 原生js在访问后台数据时专门写
    (1)实例化对象
    (2)open :连接远程服务器 。参数:method 请求的方式:get post ;url:请求的服务器路径;async:当前的请求是同步还是异步,true:异步,false:同步; user 用户名 ; password 密码
    (3)send() 发送请求
    (4)响应事件onreadystatechange
    (5)渲染界面
  4. localhost:63342 webstrom自带的本地服务器
  5. 请求后台数据接口的时候,可以传参也可以不传
  6. 原生js 尽量不要同步 ,因为原生js是单线程的,会造成线程堵死
  7. 为什么会产生跨域:
    域名解析就是localhost 没有写端口号默认80端口
    –协议不一致会产生跨域;
    –端口不一致也会导致跨域;
    –域名不一致也会产生跨域;
### 解决方案概述 当使用 jQuery 发起 AJAX 请求时,如果目标 URL 属于不同源,则会触发浏览器的安全机制,阻止请求完成。为了克服这一限制,可以采用 JSONP 或 `$.getScript` 方法来处理请求[^1]。 ### 使用 JSONP 进行请求 JSONP 是一种通过 `<script>` 标签加载 JavaScript 文件的方式,它允许开发者绕过同源策略限制。在 jQuery 中可以通过设置 `dataType` 参数为 `"jsonp"` 来启用此功能: ```javascript $.ajax({ url: "https://api.example.com/data", dataType: 'jsonp', success: function(response){ console.log('Data received:', response); }, error: function(xhr, status, error){ console.error('Error occurred:', xhr.responseText || error); } }); ``` 这种方法仅适用于 GET 请求,并且服务端需支持返回带有回调函数包裹的数据结构。 ### 利用 $.getScript 执行脚本形式的请求 另一种替代方案是利用 `$.getScript()` 函数直接加载并执行远程服务器上的 JS 文件。这种方式同样依赖于被访问的服务提供有效的响应内容: ```javascript $.getScript("https://example.com/path/to/script.js", function(data, textStatus, jqxhr) { console.log('Script loaded and executed.'); // 可在此处操作由 script.js 提供的功能或变量 }); ``` 需要注意的是,上述两种方法都要求对方服务器配合配置相应的接口以适应客户端的需求[^2]。 ### CORS 配置作为更通用的选择 除了以上提到的技术外,在现代 Web 开发环境中更为推荐的做法是由后端开启 CORS (Cross-Origin Resource Sharing),这是一种 HTTP 头部字段定义了哪些来源能够获得特定资源访问权限的标准协议。一旦启用了 CORS 支持,就可以像平常一样发起普通的 XMLHttpRequests 而不必担心问题[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值