jquery ajax跨域与原生JS的跨域

最新推荐文章于 2023-05-15 17:34:42 发布
最新推荐文章于 2023-05-15 17:34:42 发布
阅读量2k 收藏
点赞数
分类专栏： Js ajax跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slyjit/article/details/46743587
版权

一、JQ 的ajax跨域

a.com/a.html文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$("#btn").click(function(k) {
			$.ajax({
				type: 'GET',  //这里用GET
				url: 'b.com/b.php',
				dataType: 'jsonp',  //类型
				data: {age:'cce',sex:'dd'},
				jsonp: 'callback', //jsonp回调参数，必需
				async: false,
				success: function(result) {//返回的json数据
						alert(result.message); //回调输出
				},
							timeout: 3000
			})
		});
	});
</script>
</head>
 
<body>
<input type="button" id="btn" value="button" />
</body>
</html>
b.com/b.php 

$callback =isset($_GET['callback'])?trim($_GET['callback']):false;//jsonp回调参数
if($callback)
	$date = array("sex"=>$_GET['sex'], "age"=>$_GET['age']);
	$tmp= json_encode($date); //json 数据
	echo $callback.'(' . $tmp .')';//返回格式，必需
}

二、原生JS的ajax跨域

在查找原生JS的ajax跨域  找到一篇非常棒的资料链接走你

按照文章中的资料可以很好的实现跨域

保罗森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现ajax与ajax的跨域请求实例
11-27
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ console.log(ajax.r
jquery中ajax处理跨域的三大方式
lgxzzz的博客
08-24 7804
由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法： 一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持 只需要在服务端填上响应头： 1 2 3 header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受，*/ header("Acc
原生AJAX请求以及AJAX跨域问题
我的博客
09-16 2839
说在前面： 传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请...
浏览器访问跨域问题
liubangbo的专栏
12-15 477
项目中遇到一个问题：用ajax来获取数据，但返回的status为0，从浏览器的打印看应该是跨域问题： origin 'file://' has been blocked by CORS policy: Response to preflight request does not pass access control chech: No "Access-Control-Allow-Origin"...
原生与JQuery的ajax的使用
05-08
内容包括 原生js的ajax与jQuery中的ajax 还包含了跨域的解决方法已经JSONP的原理及封装
Ajax跨域请求COOKIE无法带上的完美解决办法
12-09
1、原生ajax请求方式： 1 var xhr = new XMLHttpRequest();  2 xhr.open(“POST”, “http://xxxx.com/demo/b/index.php”, true);  3 xhr.withCredentials = true; //支持跨域发送cookies 4 xhr.send(); 2、...
Js原生ajax与跨域(代理)上传文件
09-29
Js原生ajax与跨域(代理)上传文件：JS原生模拟ajax请求与实现ajax跨域代理上传文件和jquery跨域上传文件Dome
ajax跨域解决办法
12-25
本资源主要介绍了AJAX跨域的解决办法，以及解决方案间的比较
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
01-21
本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发...
AJAX请求及解决跨域问题
m0_67403272的博客
07-31 1383
AJAX其实就是异步的js和xml通过ajax可以在浏览器中发送异步请求。最大优势无刷新获取数据优点1.可以无需刷新页面与服务器进行通信2.允许根据用户事件更新部分页面内容当然也存在其缺点问题比如跨域问题等！...
JavaScript原生 解决跨域问题
我是菜鸡
03-28 5673
什么是跨域呢？简单来说就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。 www.abc.com/index.html --> www.abc.com/service.php（非跨域） www.abc.com/index.html --> www....
Ajax的含义,好处和两种传参方式
s_y_f_的博客
11-02 947
鼠标事件 1.onclick(鼠标单击事件,鼠标单击后触发) 示例: 在这里插入代码片
原生JS实现Ajax及Ajax的跨域请求
weixin_30613343的博客
11-04 714
前 言 　如今，从事前端方面的程序猿们，如果，不懂一些前后台的数据交互方面的知识的话，估计都不太好意思说自己是程序猿。当然，如今有着许多的框架，都有相对应的前后台数据交互的方法。 而，其中，用得最多的应该苏算是JQuery的Ajax了。但是，今天，影子向大家介绍的是原生js的Ajax，及跨域请求。 一、JQuer...
原生js实现跨域
前端技术教程
08-19 991
原生js实现跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下： 首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制
js跨域解决方案
weixin_42230222的博客
07-10 389
js跨域解决方案 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同， 都被当作是不同的域。 跨域原理，即是通过各种方式， 避开浏览器的安全限制。 1 跨域资源共享(cors) 后台服务器端通过设置 Access-Control-Allow-Origin 即可，前端无需设置，若要带 cookie 请求，前后端都需要设置 。 res.header("Access-Control-Allow-Or
js跨域的解决方案
muzidigbig的博客
05-15 8245
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于的限制。两个页面拥有相同的协议，端口，域名就是同源，如果有一个不相同就是不同源。保护用户，防止一些网站盗取用户信息。 1、通过jsonp跨域 2、跨域资源共享（CORS） 3、document.domain + iframe跨域 4、location.hash + iframe 5、window.name + iframe跨域 6、postMessage跨域 7、nginx代理跨域 8、nodejs中间件代理跨域（非vue、v
原生JS实现Ajax的跨域请求
XIAOYANG55555的博客
08-05 416
原生JS如何实现Ajax的跨域请求？ 在解决这个问题之前，我们务必先清楚为什么我们要跨域请求，以及在什么情况下会跨域请求。 了解一下：“同源策略”，你就知道了； 　　同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 　　它的定义是： 　　　　一段脚本向后台请求数据，只能读取属于同一协议名、同一主机名、同一端口号...
js ajax跨域
Pand_1的博客
06-21 212
1.什么是ajax？ Ajax是指一种创建交互式网页应用的网页开发技术，无需重新加载整个网页的情况下，能够刷新部分网页的技术。 ajax的优点：能在不更新整个页面的前提下维护数据，它不需要任何浏览器插件，但需要用户允许js在浏览器上执行。 缺点：它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态。 2.ajax的使用及实现步骤 （1）创建一个xmlrequ...
使用原生 JavaScript 或者 jQuery 来实现 Ajax。
最新发布
06-01
Ajax 是一种在 Web 应用程序中使用的技术，可以在不刷新整个页面的情况下向服务器发送请求和接收响应。使用原生 JavaScript 或者 jQuery 来实现 Ajax，可以使用以下两种方式： 1. 使用原生 JavaScript 实现 Ajax 使用原生 JavaScript 实现 Ajax 可以使用 XMLHttpRequest 对象，示例代码如下： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` 以上代码使用了 GET 方法向服务器发送了一个请求，请求的路径为 `/api/data`。当请求成功时，会在控制台输出响应的内容。 2. 使用 jQuery 实现 Ajax 使用 jQuery 实现 Ajax 可以使用 jQuery.ajax 方法，示例代码如下： ```javascript $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', success: function (response) { console.log(response); }, error: function (xhr, status, error) { console.log(error); } }); ``` 以上代码使用了 GET 方法向服务器发送了一个请求，请求的路径为 `/api/data`。当请求成功时，会在控制台输出响应的内容，当请求失败时，会输出错误信息。 这里需要注意的是，使用原生 JavaScript 实现 Ajax 需要手动处理跨域请求的问题，而使用 jQuery 实现 Ajax 可以自动处理跨域请求的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值