JS简单模拟HTTP请求比Ajax方便

JavaScript 2012-08-18 JavaScript,http,请求

在JS中,我们要请求一个URL地址,就算不需要获得请求结果,但是用Ajax请求时最普遍的了。然而,Ajax在跨域上不太方便,但本文不讨论JS跨域问题,只是结合经验给一个技能模拟HTTP请求又不会导致跨域问题的技巧。

原型需求

1、假设我们访问a.com/index.html;

2、点击页面中的触发按钮会异步请求b.com一个index.php文件并且GET一个值;

3、然后index.php获取这个值并写到t.txt文件中。

步骤:

a.com/index.html -> 点击按钮 -> 请求 b.com/index.php?do=hello -> b.com/index.php文件把do的值hello获取写入t.txt文件

Ajax的做法

我们先使用Ajax来实现这个方法,这里借助jQuery来调用Ajax。

a.com的文件

JS模拟HTTP请求-琼台博客

a.com/index.html代码:

<meta charset="utf-8" />
<title>JS简单模拟HTTP请求 - 琼台博客</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	function get(){
		$.get('http://b.com/index.php?do=hello');
	}
</script>
<button onclick="get()">请求 URL:http://b.com/index.php?do=hello 接口 【琼台博客】</button>

b.com文件

JS简单模拟HTTP请求

b.com/index.php代码:

<?php
$fp = fopen('t.txt','w');
fwrite($fp,$_GET['do']);	  
fclose($fp);

首先我们使用火狐浏览器测试

JS简单模拟HTTP请求

请求结果直接标红了。

我们在使用谷歌浏览器测试

请求提示XMLHttpRequest cannot load http://b.com/index.php?do=hello. Origin http://a.com is not allowed by Access-Control-Allow-Origin.

表示跨域权限问题。但是,这两种请求的确被处理了。我们来看下b.com下有没有没有t.txt文件

JS简单模拟HTTP请求

已经有t.txt文件了,再来看下内容

[root@lee b.com]# cat t.txt
hello

文件内容已被正确写入。

简单模拟HTTP方法

以上是Ajax方法,我们再来看一种简单模拟请求方法。使用<script>标记的src值来模拟请求,我们知道<script>标记里的src可以指定任何文件,包括PHP。所以目前有不少网站的做法也是直接指定到一个PHP文件,由PHP文件来动态生成JS文件。比如cnzz的统计代码就是这么处理的。但是,我们在这里也可以把它当做一个简单模拟HTTP请求的功能来看待,就比Ajax简单多了。

请看a.com/index.html代码:注意已经去掉Ajax请求,改成添加<script>方式模拟请求,do的值hello改成script

<meta charset="utf-8" />
<title>JS简单模拟HTTP请求 - 琼台博客</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	function get(){
		$('body').append('<scr'+'ipt src="http://b.com/index.php?do=script"></sc'+'ript>');
	}
</script>
<button onclick="get()">请求 URL:http://b.com/index.php?do=hello 接口 【琼台博客】</button>

b.com的代码还是没变,为了测试,我们把刚才生成的t.txt文件删除了,现在b.com下就只有一个index.php文件。

运行下结果

JS简单模拟HTTP请求

我们来看下是否产生了t.txt文件?

JS简单模拟HTTP请求

产生了,查看t.txt文件内容看下是否是script

[root@lee b.com]# cat t.txt
script

结果正确

注意

1、目前为止Ajax请求也能处理,但有的浏览器会在控台给出标红提示跨域。

2、采用<script>方法类似使用windown.open()一样,只是script不会弹出新窗口。

3、Ajax因为跨域不能获取返回内容,而通过<script>方式可以获得处理返回的动态结果。

4、如果使用<script>方式一定要确定URL地址的安全,因为不少跨脚本攻击都是通过<script>的src指向。

文字链接:《JS简单模拟HTTP请求比Ajax方便

文章地址:http://www.qttc.net/201208184.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 4

  • img也有src,还有CSS也可以
    2017-02-03 18:43:48 [ 跟帖 ]
    1 #
  • 又看了一遍,发现之前的评论好弱智啊。。
    2013-05-18 16:02:52 [ 跟帖 ]
    2 #
  • 又看了一遍,其实本文重点介绍的是没有提示的http方式提交。我有个其他的问题,怎么用javascript或者php来向远程页面post或者get提交信息,然后从远程页面提交后的信息,抓取自己需要的结果显示呢?
    2012-08-25 23:24:20 [ 跟帖 ]
    3 #
  • 博主是个潜行的代码牛啊,ajax这块还没有好好研究,先收藏了。以后多多交流
    2012-08-25 14:09:44 [ 跟帖 ]
    4 #