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

ajax.完整案例

时间:2018-07-22 00:17:50      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:兼容   title   details   形式   send   asp   ajax   charset   state   

php写法
<?php
$id $_GET[‘id‘];
if($id==1){
      $arr[‘name‘] = "三只松鼠";
      $arr[‘money‘] = 100;
      $arr[‘guige‘] = "3袋装";
      $arr["love"] = 1;
      $arr["srcc"]="img7_03.png";
echo json_encode($arr);
}else {
      $arr "请输入id";
}
?>
 
 
<!DOCTYPEhtml>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
      </head>
      <body>
            <div class="" id="box">
            <img src="" alt="" />
            <class="p1">姓名</p>
            <class="p2">钱</p>
            <class="p3">规格</p>
            <class="p4">爱</p>
            <button>点击按钮</button>
            <href=""></a>
            </div>
      
      </body>
      <script type="text/javascript">
      var p1=document.querySelector(".p1");
      var p2=document.querySelector(".p2");
      var p3=document.querySelector(".p3");
      var p4=document.querySelector(".p4");
      var btn=document.querySelector("button");
      var imgs=document.querySelector("img");
      var ap=document.querySelector("a");
      
      
            //做兼容处理。创建新的对象   http://www.jb51.net/article/23175.htm
            if(window.XMLHttpRequest){
                  //创建新的对象
                  var ajax = new XMLHttpRequest();
            }else{
                  var ajax = new ActiveXObject();
            }
            
            btn.onclick=function(){
                         //打开,用什么方式获取, 文件有id写id,同步还是异步
                  ajax.open("GET","new_file.php?id=1",true);
            ajax.send(); /*发送数据*/
            
         
/*ajax,当事件改变时当请求被发送到服务器时,我们需要执行一些基于响应的任务。*/
            ajax.onreadystatechange function(){
                  /*判断是否获取成功*/  http://blog.csdn.net/u013381651/article/details/51261956
                  if(ajax.readyState==4){ 
每当 readyState 改变时,就会触发 onreadystatechange 事件。
                        if(ajax.status==200){
                              //获取它的对象进行转换成整数*/
                              var obj=JSON.parse(ajax.responseText);
                              p1.innerHTML="姓名"+obj.name;
                              p2.innerHTML="钱"+obj.money;
                              p3.innerHTML="规格"+obj.guige;
                              p4.innerHTML="爱"+obj.love;
                                 /*点的形式进行获取打印对象*/
                             
                              imgs.src=obj.srcc;
                              /*a.href=obj.html;*/
                              
/*点的形式进行获取打印对象*/
                        }
                  }
            }
                  
                  
            }
            
      </script>
</html>

ajax.完整案例

标签:兼容   title   details   形式   send   asp   ajax   charset   state   

原文地址:https://www.cnblogs.com/fengyuzhen34/p/9348370.html

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