Ajax跨域请求

Js是不能进行跨域访问的,出于安全考虑。js设计时规则定义,不可以跨域请求。

一、什么被称为跨域

1.域名不同;

2.域名相同、端口不同;

只有域名相同,端口相同时才能访问。

解决办法:

        使用jsonp解决跨域问题

什么是jsonp:

        Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

使用jquery的getJSONP方法:

$.getJSONP(this.URL_Serv, category.getDataService);

URL_Serv:请求地址,category.getDataService:参数。

返回的js脚本格式:category.getDataService(json字符串);

eg:

category.getDataService({
    "data": [
		{
			"u": "/products/1.html",
			"n": "<a href='/products/1.html'>图书、音像、电子书刊</a>",
			"i": [
				{
					"u": "/products/40.html",
					"n": "经管励志",
					"i": [
						"/products/41.html|经济",
						"/products/42.html|金融与投资",
						"/products/43.html|管理",
						"/products/44.html|励志与成功"
					]
				}
			]
		}
    ]
});

 

### AJAX 请求的实现方式 #### 什么是是指当一个资源试图从不同的源加载另一个资源时发生的限制行为。这种限制是由浏览器的安全机制——同源策略引起的,该策略规定只有协议、主机名和端口号完全相同的两个页面才能互相访问数据[^3]。 #### CORS 的工作原理 CORS 是一种基于 HTTP 头部的标准解决方案,用于实现在不同源之间安全地共享资源。通过在服务端设置特定的响应头字段,比如 `Access-Control-Allow-Origin`,可以指定哪些源被允许访问资源[^1]。例如,在 Java Servlet 中可以通过如下代码来配置: ```java response.setHeader("Access-Control-Allow-Origin", "http://example.com"); ``` 上述代码表示只允许来自 `http://example.com` 名下的请求访问当前资源[^2]。 #### JSONP 的工作机制 JSONP (JSON with Padding) 并不是真正意义上的技术,而是一种利用 `<script>` 标签不受同源策略限制的特点绕过的方法。其核心思想是在客户端动态创建一个 `<script>` 元素,并将其 src 属性指向目标 URL,同时传递回调函数名称作为参数给服务器。服务器返回的数据会包裹在这个回调函数里执行[^4]。 下面展示了一个简单的 JSONP 请求例子: ```javascript function handleResponse(data){ console.log('Data received:', data); } var script = document.createElement('script'); script.src = 'https://another-domain.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 需要注意的是,JSONP 只支持 GET 方法,无法满足更复杂的交互需求。 #### 总结两种方法的区别与适用场景 | 特性/方法 | 支持HTTP动词种类 | 安全性保障 | 浏览器兼容情况 | | --- | --- | --- | --- | | **CORS** | 所有(GET, POST, PUT etc.) | 高;依赖于现代浏览器的支持以及正确的头部设定 | 较好,主流浏览器均支持 | | **JSONP** | 单一(仅限GET) | 低;因为它是通过注入脚本的方式完成调用 | 极佳,几乎所有环境都可运行 | 因此对于安全性要求较高或者需要使用多种 HTTP 动词的应用来说推荐采用 CORS 方案;而对于那些只需要简单获取远程数据且需考虑老旧浏览器兼容性的项目,则可以选择 JSONP。 ### 示例代码片段 以下是使用 jQuery 发起 CORS 请求的一个实例: ```javascript $.ajax({ url: "https://api.example.com/data", type: 'GET', dataType: 'json', success: function(response){ alert(JSON.stringify(response)); }, error:function(xhr,status,errorThrown){ alert("Error occurred while fetching the data."); } }); ``` 此段代码展示了如何借助第三方库简化异步通信过程并处理可能遇到的各种状态变化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值