如何利用script标签构建跨域ajax

最新推荐文章于 2024-01-14 08:22:30 发布
转载 最新推荐文章于 2024-01-14 08:22:30 发布 · 1.7k 阅读 · 0
文章标签：

#function #xmlhttprequest #ajax #json #url #服务器

本文介绍了解决AJAX跨域请求的两种方法：通过服务器端代理和使用script标签加载远程资源。并通过一个具体示例展示了如何利用script标签实现跨域数据获取。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

要解决ajax跨域问题,网上给出的方法有二:
1是构建服务器端的代理。简而言之，就是ajax中调用的实质还是本机的url,而服务器端替js去取回远端地址。
2.利用script标记，生成一个 标签。在js加载完成后，再执行后续操作。
就是将原来新建xmlHTTPrequest对象的操作改成了新建script标签的操作.
这里给出一个例子:
#ajah.js

var  Ajah=function(url,varname,handleSuccess,handleFailure){ 
        /** 
        * handleSuccess,handleFailure must be functions 
        * */ 
        script = document.createElement("script"); 
        script.src=url; 
        var handler = function(str) 
        { 
                handleSuccess(str); 
        } 
        script.onload = function() 
        { 
                var json=eval(varname); 
                handler(json); 
        } 
        if(window.ie) 
        { 
                script.onreadystatechange = function() 
                { 
                        if(script.readyState=='complete'||script.readyState== 'loaded') 
                        { 
                                var json=eval(varname); 
                                if(typeof json != 'undefined') 
                                { 
                                        handler(json); 
                                } 
                        } 
                } 
        } 
        document.body.appendChild(script); 
}

 

而在网页中应这样调用:
#demo.html

<pre> 
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> 
<html> 
<head> 
  <meta name="generator" content= 
  "HTML Tidy for Linux (vers 1 September 2005), see www.w3.org"> 
  
  <title></title> 
        <script src="mootools.js"></script> 
        <script src="ajah.js"></script> 
</head> 
  
<body> 
<script> 
var ajah=new Ajah("data.js","json198",function(str){ 
        console.debug("returned:"); 
        console.debug(str); 
}, 
function(str){}); 
</script> 
</body> 
</html> 
</pre>

 

被调用的数据文件如下
#data.js

var json198="hello,this is json198";

 

funciton Ajah(url,varname,handleSuccess,handleFailure){…}
Ajah这个构造函数调用四个参数:
url:远端地址
varname:远端返回数据的变量名
handleSuccess:加载完毕后加载的函数
handleFailure:暂时没用上

 
使用动态的script标签的方式实现JS的跨域请求
cjd6568358的专栏
05-19 2876
首先，需要满足的条件是： 1、自身对JS代码
Jquery跨域Ajax请求测试
08-26
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先，了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制，它规定了只有来自同一协议、同一域名和同一...
动态script标签-跨域调用
rsylqc的专栏
05-19 3204
Ajax技术不能实现跨域工作，可以通过使用动态script标签来实现跨越调用。 创建一个新的script标签，并插入DOM中，浏览器会像载入页面本身的script标签一样载入和运行插入标签的源文件。新script标签的源文件包含了一个页面本身已存在的一个JavaScript函数的调用，当执行这个源文件时，也会执行已存在的函数，这一过程定义了一个回调函数的方法。 如下程序段：
Script标签解决跨域
等，你的到来。
11-16 6258
关于跨域，首先我们来讲一下基础知识。 –什么是跨域请求：从一个域下去访问另一个域下的脚本(js/php)或者文档结构(html)。 –为什么跨域：因为我们往往需要其他域下的数据，另一个因为同源策略的限制，不进行跨域无法直接请求另一个域的数据。 –怎么样进行跨域请求：img、a、form、link、iframe可以跨域，但是没有返回值，所以不进行使用，最主要使用的是script标签。然后，通过j
通过script标签实现JSONP跨域调用
孙群
04-05 4235
为了演示通过script标签实现JSONP跨域调用，在VS的解决方案中有两个不同域的网站，客户端网站MyClientJSONP的域是localhost://24114，处理JSONP请求的服务器网站MyServerJSONP的域是localhost://24115，本示例就是为了演示从MyClientJSONP跨域调用MyServerJSONP，解决方案如下图所示： 客户端Cli
【Web】跨域请求
qq_45677671的博客
02-23 1432
文章目录同源策略实现一个跨域请求JSONPscript 标签的本质配置代理正向代理反向代理 同源策略 同源策略是由浏览器给的 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求 当我们向别人的服务器发送请求的时候，就会被浏览器阻止了 什么是“别人的服务器”？ 当 请求协议/域名/端口号 有任意一个不同的时候，那么就算是别人的服务器 这个时候就会触发同源策略 我们管触发了同源策略的请求叫做跨越请求 实现一个跨域请求 有的时候我们是需要实现跨域请求的 我们需要多个服务器给一个页面提供数据 那
ie7下利用ajax跨域盗取cookie的解决办法
10-30
在IE7浏览器环境下，利用AJAX技术跨域盗取cookie的操作涉及了Web安全性的敏感问题。cookie是服务器为了标识用户身份而存储在用户浏览器中的小文件，通常包含敏感信息，如登录凭证、偏好设置等。跨域问题是指出于安全...
通过jquery的$.getJSON做一个跨域ajax请求试验
12-12
JSONP通过动态插入`<script>`标签来绕过这一限制，因为`<script>`标签可以加载来自不同源的脚本。 在给定的示例中，后端PHP代码创建了一个名为"yuyue_interface"的接口，该接口接收三个参数：用户姓名（name）、...
jquery中ajax处理跨域的三大方式
11-22
JSONP是一种古老的跨域解决方案，它是利用`<script>`标签可以跨域加载JavaScript资源的特性。当使用jQuery的`$.ajax`方法并设置`dataType: 'jsonp'`时，jQuery会动态创建一个`<script>`标签，并将请求转换为对指定...
Ajax请求WebService跨域问题的解决方案
12-10
它的原理是利用`<script>`标签可以跨域请求JavaScript文件，服务端返回一个JavaScript函数调用，这个函数包含了实际的数据。但是，JSONP只支持GET请求，并且无法处理非简单请求（如POST、PUT等），因此在安全性及...
跨域问题，解决方案（前后端代码）
最新发布
kkkys_kkk的博客
01-14 1420
因此，利用 `` 标签的这两个特性，可以通过动态创建 `` 标签，给 `src` 属性设置跨域的 URL，从而实现在浏览器中跨域请求资源的效果。1. JSONP（JSON with Padding）：通过动态创建 `` 标签，利用 `` 标签可以跨域请求数据的特性，将响应数据包装在回调函数中返回，通过调用回调函数来获取数据。3. 代理：通过服务器端进行中转，将前端的请求发送到同源的后端，由后端代为请求目标资源，并将结果返回给前端。
Javascript中如何解决跨域？
蓝斑.json的博客
01-05 609
每种方法都有其适用场景和限制，通常CORS是最常见和推荐的解决方案。需要注意的是，服务器端的配置是解决跨域问题的关键。在客户端（JavaScript）实施跨域解决方案时，通常需要与服务器端的配置相结合。：这是HTML5中的一个功能，允许不同源之间的脚本进行有限的通信。：这是最推荐的方法。服务器设置适当的HTTP头部允许来自不同源的请求。：由于WebSocket不受同源策略限制，因此也可以用来实现跨域通信。：这种方法用于两个有共同顶级域名的页面之间的通信（例如，允许所有域的访问，或者指定某些域可以访问。
Django学习---原生ajax
weixin_30519071的博客
04-23 123
Ajax 原生ajax Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。 XmlHttpRequest对象的主要方法： a. void open(String method,String url,Boolen async) 用于创建请求 ...
如何解决跨域问题
weixin_65308648的博客
07-20 678
的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是。WebPack是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静。片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。4）第四次挥手主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，1）第一次挥手主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭。...
java面试经常问到的问题
IT宅
03-10 284
深入理解前端跨域方法和原理 前言 受浏览器同源策略的限制，本域的js不能操作其他域的页面对象（比如DOM）。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。 这里需要明确的一点是：所谓的域跟js的存放服务器没有关系，比如baidu.com的页面加载了google.com的js，那么此js的所在域是baidu.com而不是google.com。也就是说，此时该js能
用script标签实现跨域
小黄同学的博客
06-01 1378
用<script>来实现跨域请求数据 首先接口传数据的格式是var xx = xxxxxxxxxxxxx这样的格式的 动态创建script的标签在src中写入接口连接，在chrome等浏览器的script的回调是onload，ie是onreadystatechange，在这里面处理返回成功回调函数。 具体代码片段 `function AjaxJsonpAsync(url, datas, callback){
js利用script标签进行跨域请求
butterBallj的博客
08-14 2450
ajax的jsonp虽然可以进行跨域，但是由于返回的数据问题，可能存在无法正确捕捉回执结果，即：成功请求且在控制台Network中看到结果，但是ajax始终捕捉为错误信息且无法拿取返回值。 下面直接上代码： var correct = function(address) { var script = document.createElement('script'); scri...
通过script标签跨域、ajax跨域
热门推荐
engineer的博客
05-22 1万+
JSON(JavaScript Object Notation){javascript对象表示法}是一种数据交换格式；JSONP(JSON with Padding) 是一种可以绕过同源策略的方法，即通过使用json与标记结合的方法。总的来说json就是一种数据格式，jsonp是一种非正式的数据交换协议。 上面提到了同源策略，什么是同源策略？同源策略是由Netscape提出的的一个著名的安全策略
Script标签里写ajax请求,用javascript动态创建script标签解决ajax跨域请求问题
weixin_33419305的博客
08-05 975
用javascript动态创建script标签解决ajax跨域请求问题:出于安全问题, ajax在进行请求数据时是不能跨域请求的,但是我们还经常会有这样的需求,下面是用js动态创建script标签中的src属性来解决这一问题.问题重现:比如:在 域名下的页面, 无法用ajax请求下的内容.这里给出一个用JS模拟ajax的方式实现跨域, 但仅仅局限于GET模式!在 标签中, src的属性是可以设...
实现跨域Ajax远程登录及主界面打开方案
- JSONP（JSON with Padding）是一种老式的解决方案，通过动态创建script标签来实现跨域请求，但存在安全隐患，现在已经不推荐使用。 - CORS是现代浏览器支持的机制，它允许服务器指定哪些域可以访问资源，通过在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值