异步请求之非同域名简单异步请求script标签

最新推荐文章于 2024-06-29 07:42:15 发布
置顶 最新推荐文章于 2024-06-29 07:42:15 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： script javascript 异步 文章标签： callback function url javascript 服务器 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li277680701/article/details/7283095
版权
javascript 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
异步
4 篇文章 0 订阅
订阅专栏
script
1 篇文章 0 订阅
订阅专栏

文章接上篇 异步请求之同域名 异步请求 ajax

原理：script标签有个src属性 此处的src我们可以用非本域的地址 所以我们可以通过动态创建script实现异步请求

优点：实现了跨域异步请求 对域名的要求不是很大

缺点：由于只有src属性让我们来做操作 所以在请求的时候只能是GET请求 无法实现post提交 还有就是服务器端需要特殊操作才能实现回调函数

由于script标签这里和服务器关联比较大，首先来个事例让大家大体上有个了解

首先本地解析两个域名 www.a.com 和www.b.com

把域名解析到本地：

首先找到host文件

C:\Windows\System32\drivers\etc\hosts

在最下面添加

127.0.0.1    www.a.com

127.0.0.1    www.b.com

这两行 然后重启浏览器

这样www.a.com和www.b.com和你访问127.0.0.1是一样的了

可以通过apache配置虚拟主机给www.a.com和www.b.com分别指向不同的目录 由于文章有限这里就不继续赘述了

www.a.com目录下建test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var creatscript = function(url){
		var head = document.getElementsByTagName("head").item(0);
		var script = document.createElement ("script");     
		script.src = url;     
		script.type="text/javascript";
		head.appendChild (script);
	}
	var checkusername = function(usertext){
		var url = 'http://www.b.com/test.php?username='+usertext+'&callback=callbackfun';
		creatscript(url);
	}
	var callbackfun = function(code){
		if(code=='1'){
			alert("已经存在");
		}else{
			alert("可以使用");
		}
	}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
<input type="text" name="username" id="username" οnblur="checkusername(this.value)"/>
 </BODY>
</HTML>
www.b.com目录下建test.php 

<?php
if($_GET['username']=='zhangsan'){
	echo $_GET['callback'].'("1")';
}else{
	echo $_GET['callback'].'("0")';
}
?>

此处没有什么太多说的

基本上代码看懂基本上就没有太多问题了

现在从开始将各个地方讲解一遍

creatscript方法动态创建一个script标签传递一个url过去

checkusername方法调用creatscript方法并构建一个字符串 此处传递一个回调函数的方法名称

callbackfun方法是回调函数 也就是动态调用的script里面要调用的方法 并将结果传递过来

然后做一些后续的操作




面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 4309
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
Nuxt页面自定义meta标签和asyncData异步请求
01-03
一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是：hid属性是页面的唯一标识 若想...
【JavaScript】＜script＞标签的异步加载
ColdCoder的博客
03-10 2274
异步加载script的好处：加快首屏响应速度 异步加载script的方式 1.异步加载JS getMap.onclick = function(){ //获得需要插入的位置 var oDiv = document.getElementById('div'); //异步创建script var script = document.createElement('script'); script.src = 'https://
script 标签中， async 和 defer 两个属性有什么用途?
最新发布
canjava的博客
06-29 146
两个属性都被用于控制脚本的加载和执行方式，但它们的行为有所不同。
defer async 区别
weixin_30607659的博客
06-21 117
链接 <script src="script.js"></script> 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js"></scri...
异步请求之同域名 异步请求 ajax
it's a good man
02-22 1239
今天上午在一qq群里大家让我讲点什么，聊着聊着讲到ajax，然后就有了本文 作者文笔极烂，上学时语文基本保持在及格分数线上下。所以有胡言乱语大家一笑而过不必当真，当然如果有不对的地方 希望斧正 首先既然讲到异步请求 我先讲讲我会的一些异步请求 也是本文和接下来几篇文章的一个纲目吧 1、同域名 异步请求 ajax（本文） 2、非同域名简单异步请求script标签 3、同域名异步文件上传if
从域的概念上来区分HTTP请求，大致可以分为两种，同域的HTTP请求、非同域的HTTP请求。...
weixin_30672295的博客
11-30 254
从域的概念上来区分HTTP请求，大致可以分为两种，同域的HTTP请求、非同域的HTTP请求。HTTP请求的发起，可以是后台程序，也可以是浏览器。Java程序都是通过URLConnection来完成。浏览器端的请求的发起，依靠浏览器的内部实现了。在HTML文档中能够发起HTTP请求的元素有：<link> 请求CSS样式文件<script>请求JavaScript脚本...
ajax 同步请求和异步请求的差异分析
09-05
而同步请求虽然简单明了，但可能导致用户界面长时间无响应，用户体验较差，因此在大多数情况下，异步请求是更推荐的选择。 在实际开发中，通常我们会使用异步请求，并在`onreadystatechange`事件中定义回调函数，以...
详解SpringBoot中异步请求和异步调用(看完这一篇就够了)
08-26
使用Callable方式实现异步请求非常简单，只需要将返回的参数包裹一层Callable对象即可。可以继承WebMvcConfigurerAdapter类来设置默认线程池和超时处理。 异步请求的优点 异步请求可以提高服务器对客户端请求的...
原生JavaScrpit中异步请求Ajax实现方法
11-27
在前端页面开发的过程中，经常使用到Ajax请求，异步提交表单数据，或者异步刷新页面。 一般来说，使用Jquery中的$.ajax，$.post，$.getJSON，非常方便，但是有的时候，我们只因为需要ajax功能而引入Jquery比较不划算...
实现PHP多线程异步请求的3种方法
10-26
例如，对于简单的异步请求，CURL可能是最佳选择；而对于需要快速响应和低资源消耗的场景，`popen()`可能更合适；而当需要精确控制网络通信时，`fsockopen()`则更有优势。 在实际项目中，还可以考虑使用像`ReactPHP`...
script标签的位置及JavaScript中DOM文档的异步加载以及带来的问题
07-15 367
script 中js用document.documentElement加载DOM文档时是按照代码顺序加载的,但如果script写在前面,加载时DOM还不完整,所以就要把script标签放在最后面或者用异步加载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
JavaScript的异步加载
m0_55527208的博客
04-19 1993
JavaScript是单线程执行，即代码会一行一行自上而下执行，正常来讲，浏览器是同步加载js代码的，但是一旦遇到网速不好，或者加载的js代码文件过大，容易造成页面阻塞，整个网站将等待js加载而不进行后续的渲染工作，影响交互体验。3、遇到 script 外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。浏览器在开始运行一个页面时，会初始化js功能，当js开始作用时，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序。
JavaScript script标签同步异步加载过程
weixin_44000173的博客
08-02 1956
JavaScript script标签同步异步加载过程
c# 通过webView2模拟登陆小红书网页版，解析无水印视频图片，以及解决X-s,X-t签名验证【2023年4月29日】
byc6352的专栏
04-15 8197
c# 通过webView2模拟登陆小红书网页版，解析无水印视频图片，以及解决X-s,X-t签名验证。日期：2023-4-29
script标签的同步异步加载
xiaozhang_jiuke的博客
01-12 3967
script标签默认是同步加载的，也就是说，当读到script标签是引入外部js文件的，会立即停止对页面的向下解析，然后下载脚本并且执行，如果说js文件相对来说比较大，而且网速什么的又不是很好，那么用户在浏览网页的时候，会有很长一段时间的等待，用户体验很差。 当js文件里面没有对DOM进行操作或者对css进行操作的时候，我们可以将这个js文件设置成异步加载的，这样子会让用户体验更好。 那么如何设置js文件的异步加载呢？ 有两种方式： <script defer> <script
再聊浏览器js的异步ajax请求跨域问题
FREEDOM
09-20 1182
首先明确一点：跨域问题是浏览器自己的安全机制导致的，和后台没有任何关系！！！！ 跨域是指浏览器的不执行其他网站脚本的，由于浏览器的同源策略造成，是对JavaScript的一种安全限制 因为ajax跨域问题导致的两次请求问题 浏览器将CORS分为两中请求：简单请求（simple request）和复杂请求（not-so-simple-request）,两种处理方式是不一样的。 一、简单请求： 简单请求头会被加上Origin字段，用于服务器判断是不是允许内的请求域名； 二、复杂请求： 在发送...
script标签的同步和异步
qq_43248623的博客
08-21 5447
1）、把<script>标签放在<head>中意味着必须等到全部的js代码都下载解析和执行完成以后，才开始展现页面内容，为避免这个问题一般把js代码全部放在<body>元素内容后面 2）、script标签不带defer和async属性：同步模式，脚本获取和执行都是同步，页面会被阻塞，浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析 同步模式：又称阻塞模式，会阻止浏览器的后续执行，停止后续解析，只有当前加载完成才能进行下一步操作。 3）
SpringBoot异步请求与调用详解：提升性能的关键
在SpringBoot中，异步请求和异步调用是提升系统性能和用户体验的重要技术手段。本文将详细介绍如何在SpringBoot应用中实现异步请求，并对比其与同步请求的区别。 首先，异步请求与同步请求的主要区别在于处理机制。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值