Ajax系列一-远古时代

2016-02-26

字数统计: 770字 | 阅读时长≈ 3分

题按–在真正的Ajax出现之前，是怎么实现类似效果的。

这几天断断续续的看完了ajax和http相关的教程，查询了Wikipedia相关资料，接下来几天，整理一下。

投票需求：要求无刷新投票，并且不允许使用XMLHttpRequest对象
分析：在XHR对象没有流行之前，已经有无刷新这种效果的要求

方法一： HTTP协议204 No Content

原理：利用http 204 No Content 状态码,浏览器不会跳转

前端：

<body>
    <div>
        <p><img width=300 height=400 src="lin.jpg"></p>
        <p><a href="vote.php">vote</a></p>
    </div>
</body>

后端：

<?php 
$votenum = file_get_contents("./vote.txt");
if ($votenum == null) {
    $votenum = 0;
}
$votenum += 1;
file_put_contents('./vote.txt', $votenum);
//利用HTTP协议的204特性
header('HTTP/1.1 204 No Content');
 ?>

方法二：利用图片加载的特性，完成请求

<script>
    function vote(){
        var lin = document.createElement('img');
        //设置src属性，浏览器将会请求对应的资源
        lin.setAttribute('src', './lin.jpg');
        document.getElementById("progress").appendChild(lin);
    }
</script>

方法三：利用css,js加载特性,原理同上。

方法四：利用iframe特性

Ajax注册，提交表单，页面无刷新
建议用POST，因为get会暴露用户信息
前端：

<div id="regres"></div>
/*form target-->iframe name*/
<form action="02-reg.php" method="post" target="regzone">
    <p>用户名：<input type="text" name="username"></p>
    <p>邮件：<input type="email" name="email"></p>
    <p><input type="submit" name="submit"></p>
</form>
<iframe width=0 height=0 frameBorder="0" name="regzone"></iframe>

后端：

<meta charset="utf-8">
<?php 
//经过运算，逻辑判断，注册是否成功
$msg = 1/0;
1-"注册成功"  0-"注册失败"
?>
<script type="text/javascript">
    //被请求的资源req.php想得到HTML里的元素，用parent
    parent.document.getElementById('regres').innerHTML = '注册成功!';
</script>

总结：

在不适用XMLHttpRequest对象的情况下，依然可以用js来实现对后台服务器请求，同时不刷新页面或跳转。

所谓Ajax：即指页面不刷新情况下，利用XMLHttpRequest发送HTTP请求；JS的网络化.

悄悄的发送请求，不刷新或跳转;后台能传递数据;前台假装没反应

问题：Ajax能实现文件上传吗？

分析：从HTTP协议角度看，上传文件，则要把文件的内容发送到服务器；
如果可以XMLHttpRequest对象在POST数据时，把文件的内容也发送过去。

XHR对象获取了你要上传的内容
JavaScript读取本地的文件内容
出于安全原因，js不能读取文件内容
Ajax上传文件是无法实现的。

问题：一些Ajax上传插件是怎样实现的？

iframe

用flash实现，如swfuploaded

用HTML5实现，已增加文件读取API

本文作者： Linking
本文链接： https://linking.fun/2016/02/26/Ajax系列一-远古时代的Ajax/

方法一： HTTP协议204 No Content

方法二：利用图片加载的特性，完成请求

方法三： 利用css,js加载特性,原理同上。

方法四： 利用iframe特性

总结：

方法三：利用css,js加载特性,原理同上。

方法四：利用iframe特性