Ajax——13——Ajax练习

一.Ajax小练习

a.php

<?php
//1.定义字典保存商品信息  key=>value
$products=array("nz"=>array("title"=>"甜美女装","des"=>"甜美系列","image"=>"images/1.jpg"),
    "bb"=>array("title"=>"奢华女包","des"=>"送女友","image"=>"images/2.jpg"),
    "tx"=>array("title"=>"键盘拖鞋","des"=>"程序员专属拖鞋","image"=>"images/3.jpg")
    );
//2.获取前端传递的参数
$name=$_GET["name"];
//echo $name;
//3.根据前端传入的key,获取对应的字典
$product=$products[$name];//取出name对应的字典
//print_r($product);
//4.将小字典中的内容取出来返回给前端
echo $product["title"];
echo "|";//如果标题也有竖线，会引起误解，前端和后台交互数据一般用XML或JSON
echo $product["des"];
echo "|";
echo $product["image"];

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto;
            text-align: center;
            background: #ccc;
        }
        img{
            width: 200px;
            height: 200px;
            display: block;
            margin: 10px auto 10px;
            border: 1px solid #000;
        }
        p{
            text-align: center;
            background: pink;
        }
    </style>
    <script src="d.js"></script>
    <script>
        window.onload=function(ev){
            //1.获取需要设置的元素
            var oTitle=document.querySelector("#title");
            var oDes=document.querySelector("#des");
            var oImg=document.querySelector("img");//这里不加#，找这个bug找了好久
            //2.获取所有按钮
            var oBtns=document.querySelectorAll("button");
            //3.给所有按钮添加点击事件
            oBtns[0].onclick=function(){
                //4.发送Ajax请求到服务器
                Ajax({
                    type:"get",
                    url:"a.php",
                    data:{"name":this.getAttribute("name")},//假如点击的是第0个按钮，就把第0个按钮的名字“女装”取出来发送给服务器，根据传过来的name,就可以从大的字典（PHP代码的前几行）当中，根据key取到value
                    timeout:3000,
                    success:function(xhr){
                        // alert(xhr.responseText);
                        var res=xhr.responseText.split("|");//竖线隔开
                        // console.log(res);
                        oTitle.innerHTML=res[0];
                        oDes.innerHTML=res[1];
                        oImg.setAttribute("src",res[2]);

                    },
                    error:function(xhr){
                        alert(xhr.status);
                    }
                });
            }
            oBtns[1].onclick=function(){
                //
            }
            oBtns[2].onclick=function(){
                //
            }
            }

    </script>

</head>
<body>
<div>
    <p id="title">商品标题名称</p>
    <img src="" alt="" >
    <p id="des">商品描述信息</p>
    <button name="nz">女装</button>
    <button name="bb">包包</button>
    <button name="tx">拖鞋</button>

</div>
</body>
</html>

d.js

function obj2str(data) {
    /*
    {
        "userName":"lnj",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();
    var res = [];
    for(var key in data){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function Ajax(option) {
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    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 (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

二.XML

XML的格式，后端如何返回一个XML的数据给前端，前端接受XML如何处理XML,XML和HTML都是可扩展性语言，但是XML的标签是可以随便写的

1.XML必须有根节点，根标签是可以随便写的，所有的数据都必须写到根标签当中
2.如果服务器返回的是xml数据，那在前端不要通过responseText来获取，要通过responseXML来获取
3.

原文链接：https://blog.csdn.net/x1037490413/article/details/105094410