Ajax练习

最新推荐文章于 2021-08-29 15:43:32 发布

众生皆苦你是草莓味

最新推荐文章于 2021-08-29 15:43:32 发布

阅读量517

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/Yang_lan1/article/details/89816677

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端代码

必须在服务器环境下运行


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 300px;
           height: 300px;
           background-color: darkgray;
           margin: 50px auto;
           text-align: center;
           border: 1px solid #000;  
       }
       img{
           width: 200px;
           height: 200px;
           display: block;
           margin: 10px auto 10px;
           border: 1px solid #000;
       }
       p{
           text-align: center;
           background: pink;
       }
    </style>
     <script src="ajax.js"></script>
     <script>
         window.onload = function(){
             //1.获取需要设置的元素
            var  oDiv = document.querySelector('#title');
            var  oDes = document.querySelector('#des');
            var  oImg = document.querySelector('img');
            //2.获取所有按钮
            var oBtns = document.querySelectorAll('button');
            //3.给按钮添加点击事件
            oBtns[0].onclick = function(){
                //4.发送Ajax请求到服务器
                ajax({
                    type : 'get',
                    url : 'post.php',
                    data : {'name' : this.getAttribute('name')},
                    timeout : 3000,
                    success : function(xmlhttp){
                       var res =  xmlhttp.responseText.split('|');
                       oDiv.innerHTML = res[0];
                       oDes.innerHTML = res[1];
                       oImg.src = res[2];
                    },
                    error : function(xmlhttp){
                        alert(xmlhttp.status);
                    }
                })
            }
            oBtns[1].onclick = function(){
                ajax({
                    type : 'get',
                    url : 'post.php',
                    data : {'name' : this.getAttribute('name')},
                    timeout : 3000,
                    success : function(xmlhttp){
                       var res =  xmlhttp.responseText.split('|');
                       oDiv.innerHTML = res[0];
                       oDes.innerHTML = res[1];
                       oImg.src = res[2];
                    },
                    error : function(xmlhttp){
                        alert(xmlhttp.status);
                    }
                })
            }
            oBtns[2].onclick = function(){
                //4.发送Ajax请求到服务器
                ajax({
                    type : 'get',
                    url : 'post.php',
                    data : {'name' : this.getAttribute('name')},
                    timeout : 3000,
                    success : function(xmlhttp){
                       var res =  xmlhttp.responseText.split('|');
                       oDiv.innerHTML = res[0];
                       oDes.innerHTML = res[1];
                       oImg.src = res[2];
                    },
                    error : function(xmlhttp){
                        alert(xmlhttp.status);
                    }
                })
            }
         }
     </script>
</head>
<body>
    <div class="box">
        <p id="title">商品标题描述</p>
        <img src="" alt="">
        <p id="des">商品描述信息</p>
        <button name="zyl">朱一龙</button>
        <button name="by">白宇</button>
        <button name="qx">易烊千玺</button>
    </div>

</body>
</html>

JS代码

function obj2str(data){
    var res = [];
    data.t = new Date().getTime();
    for(var key in data){
        //将中文转换为特殊字符串，例如%E5%BC%A0%E4%BD%86
        res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    return res.join('&');

}
function ajax(option){//timeout为超时时间
    //0.将对象转换为字符串
    var str = obj2str(option.data);//转发为key=value&key=value这种形式
    //1.创建一个异步对象
  var xmlhttp,timer;
  if(window.XMLHttpRequest){
     xmlhttp = new XMLHttpRequest();
  }else{
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
  }
   //2.设置请求方式和请求地址
  if(option.type.toLowerCase() === 'get'){
    xmlhttp.open(option.type,option.url+'?'+ str,true);
   //3.发送请求
   xmlhttp.send();
  }else{
      xmlhttp.open(option.type,option.url,true);
      //以下代码只能写到open和send之间
      xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
      xmlhttp.send(str);
  }
   //4.监听状态的变化
   xmlhttp.onreadystatechange = function(){
       if(xmlhttp.readyState == 4){
           //如果接受到服务器的响应，就要把定时器关掉
           clearInterval(timer);
           if(xmlhttp.status >=200 && xmlhttp.status <= 300 || xmlhttp.status == 304){
            //状态码判断
            //成功后执行的回调函数
            option.success(xmlhttp);
           }else{
            //失败后执行的回调函数
            option.error(xmlhttp);
           }
       }
   }
   //判断外界是否传入了超时时间
   if(option.timeout){
       timer  = setTimeout(function(){
           xmlhttp.abort();//中断请求
           clearInterval(timer);
       },option.timeout)
   }
}

后台代码

一般用JSON保存和交换数据

<?php
   //1.定义字典保存商品信息
   $products = array('zyl'=>array('title'=>'朱一龙','des'=>'人见人爱','image'=>'images/2.jpg'),
                     'by'=>array('title'=>'白宇','des'=>'花见花开','image'=>'images/1.jpg'),
                     'qx'=>array('title'=>'易烊千玺','des'=>'车见车爆胎','image'=>'images/3.jpg') );
   //2.获取前端传递的参数
   $name = $_GET['name'];
   //3.根据前端传入的key,获取对应的字典
   $product  = $products[$name];

   //4.将小字典中的内容取出来返回给前端
   echo $product['title'];
   echo '|';
   echo $product['des'];
   echo '|';
   echo $product['image'];

?>

众生皆苦你是草莓味

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax练习

前端代码必须在服务器环境下运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
复制链接

扫一扫