文章接上篇 异步请求之同域名 异步请求 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里面要调用的方法 并将结果传递过来
然后做一些后续的操作