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

最新推荐文章于 2024-06-29 07:42:15 发布

置顶起个名字真难啊啊啊啊啊

最新推荐文章于 2024-06-29 07:42:15 发布

阅读量1.2k

点赞数 1

分类专栏： script javascript 异步文章标签： callback function url javascript 服务器 html

本文链接：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里面要调用的方法并将结果传递过来

然后做一些后续的操作

起个名字真难啊啊啊啊啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录