AJAX-prototype.js实现Ajax

最新推荐文章于 2018-01-04 11:20:57 发布

Co_zy

最新推荐文章于 2018-01-04 11:20:57 发布

阅读量600

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Co_zy/article/details/76615028

版权

web前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

代码分两部分
1.用一个简单服务器脚本rand.php模拟不断变化的股票价格:

<?php
srand((double)microtime()*1000000);
$price = 50+rand(0,5000)/100;
echo "$price";
?>

2.新建一个prototype-test.html文件,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stock</title>
    <script src="prototype.js"></script>
    <script>
        function checkprice() {
            var myAjax = new Ajax.PeriodicalUpdater('price','rand.php',{method:'post',frequency:3.0,decay:1});
        }
        window.onload = checkprice;
    </script>
</head>
<body>
<h2>Stock Reader</h2>
<p>Current Stock Price:</p>
<div id="price"></div>

</body>
</html>

这个界面很简单,一个标题一行文字,还有显示股票价格的div,
图中红圈位置的数据会随时变化.

这里写图片描述

prototype.js的一些类封装的代码可以发送服务器请求,监视请求的过程,处理返回的数据.
Ajax.Request
var myAjax = new Ajax.Request(url,{method:’post’,parameters:mydata,onComplete:responseFunction});
Ajax.Updater
var myAjax = new Ajax.Updater(elementID,url,options);
Ajax.PeriodicalUpdater
var myAjax = new Ajax.PeriodicalUpdater(‘id’,’url’,{method:’post’,frequency:3.0,decay:1});
这个是本案例使用的,比Ajax.Updater多了两个参数frequency,decay