码迷,mamicode.com
首页 > Web开发 > 详细

ajax(2)

时间:2018-10-19 23:49:03      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:http   定时   html   []   一个   信息   伦敦   返回   技术分享   

onreadystatechange

技术分享图片

responseText将响应信息作为字符串返回。

responseXML将响应信息作为XML文档返回。

send发送请求到http服务器并返回。

setRequestHeader单独制定请求的某个http头

status返回当前请求的http状态码

readyState返回xmlHttp请求的当前状态(对象本身的状态)

XMLHttpRequest提供客户端同http服务器通讯的协议(该对象是和浏览器本身相关的,不同浏览器创建的方式不一样)。

glodPrice.php

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script language="javascript" type="text/javascript">
    
    var myXmlHttpRequest;

    function updateGoldPrice(){
        
        myXmlHttpRequest=getXmlHttpObject();

        if(myXmlHttpRequest){
            //创建ajax引擎对象成功
            //window.alert("ok");
            var url="glodPriceProcess.php";
            var data="city[]=dj&city[]=tw&city[]=ld";

            myXmlHttpRequest.open("post",url,true);
            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            myXmlHttpRequest.onreadystatechange=function chuli(){
                //接收数据json
                //readyState=4只能代表完成,不表示成功了。
                if(myXmlHttpRequest.readyState==4){
                    if(myXmlHttpRequest.status==200){
                        //取出数据,进行处理
                        //window.alert("ok");
                        //取出并转成对象数组
                        var res_objects=eval("("+myXmlHttpRequest.responseText+")");

                        $(‘dj‘).innerText=res_objects[0].price;
                        if(res_objects[0].price>1000){
                            djimg.src="up.png";
                        }else{
                            djimg.src="down.png";
                        }
                        $(‘tw‘).innerText=res_objects[1].price;
                        if(res_objects[1].price>1000){
                            twimg.src="up.png";
                        }else{
                            twimg.src="down.png";
                        }
                        $(‘ld‘).innerText=res_objects[2].price;
                        if(res_objects[2].price>1000){
                            ldimg.src="up.png";
                        }else{
                            ldimg.src="down.png";
                        }

                    }
                }
            }
            myXmlHttpRequest.send(data);
        }
    }

    //使用定时器 每隔5秒
    window.setInterval("updateGoldPrice()",5000);

</script>
<script language="javascript" type="text/javascript" src="my.js">
</script>
</head>
<center>
<h1>每隔5秒钟更新数据(以1000为基数计算涨跌)</h1>
<table border="0" style="border:2px solid pink">
    <tr><td colspan="3"><img src="bg.png"/></td></tr>
    <tr><td>市场</td><td>最新价格$</td><td>涨跌</td></tr>
    <tr><td>伦敦</td><td id="ld">788.7</td><td><img src="down.png" id="ldimg"/>211.3</td></tr>
    <tr><td>台湾</td><td id="tw">854.0</td><td><img src="down.png" id="twimg"/>146.0</td></tr>
    <tr><td>东京</td><td id="dj">1791.3</td><td><img src="up.png" id="djimg"/>791.3</td></tr>
</table>
</center>
</html>

glodPriceProcess.php

<?php
    
    //这里两句话很重要,第一句话告诉浏览器返回的数据是xml格式
    header("Content-type: text/html; charset=utf-8");
    //如果这里写成Content-type: text/html,会报错,得不到数据
    //告诉浏览器不要缓存数据
    header("Cache-Control:no-cache");

    //接收
    $cities=$_POST[‘city‘];

    //随机地生成 三个 500-2000的数
    $res=‘[{"price":"400"},{"price":"1000"},{"price":"1200"}]‘;

    $res=‘[‘;
  
    for($i=0;$i<count($cities);$i++){
        if($i==count($cities)-1){
            $res.=‘{"cityname":"‘.$cities[$i].‘","price":"‘.rand(500,1500).‘"}]‘;
        }else{
            $res.=‘{"cityname":"‘.$cities[$i].‘","price":"‘.rand(500,1500).‘"},‘;
        }
    }

    file_put_contents("D:/install/wamp/www/mylog.log",$res."\r\n",FILE_APPEND);

    echo $res;

?>

 

使用ajax与服务器通信的步骤

①创建一个XMLHttpRequest对象

②创建url.data,通过xmlHttpRequest.send()

③服务器接收ajax的请求,做相应处理(操作数据库),然后返回结果(echo 语句)

④客户端通过xmlHttpRequest的属性responseText,responseXML取的数据,然后就完成局部刷新当前页面任务。

 

ajax(2)

标签:http   定时   html   []   一个   信息   伦敦   返回   技术分享   

原文地址:https://www.cnblogs.com/liaoxiaolao/p/9819617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!