Hot For Coding

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

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

原型需求

  • 假设我们访问a.com/index.html
  • 点击页面中的触发按钮会异步请求b.com一个index.php文件并且GET一个值
  • 然后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/index.html

<meta charset="utf-8" />
<title>JavaScript简单模拟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/index.php

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

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

full

请求结果直接标红了。

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

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文件

full

已经有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>JavaScript简单模拟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文件。

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

full

产生了t.txt文件,看看里面内容

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

结果正确

注意

  • 目前为止Ajax请求也能处理,但有的浏览器会在控台给出标红提示跨域
  • 采用<script>方法类似使用windown.open()一样,只是script不会弹出新窗口
  • Ajax因为跨域不能获取返回内容,而通过<script>方式可以获得处理返回的动态结果
  • 如果使用<script>方式一定要确定URL地址的安全,因为不少跨脚本攻击都是通过<script>的src指向
分享

TITLE: JavaScript简单模拟HTTP请求比Ajax方便

LINK: https://www.qttc.net/184-javascript-simulate-http-request.html

NOTE: 原创内容,转载请注明出自琼台博客