Ajax——14——XML练习

最新推荐文章于 2021-07-06 15:48:37 发布

野生小米椒

最新推荐文章于 2021-07-06 15:48:37 发布

阅读量122

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x1037490413/article/details/105506454

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一：a.php

<?php
//注意：执行结果中有中文，必须在php文件顶部设置
//header("content-type:text/html;charset=utf-8");
//如果PHP中需要返回XML数据，前端要接收到数据，必须在PHP文件顶部设置
header("content-type:text/xml;charset=utf-8");
 //在php中获取本地的xml
echo file_get_contents("info.xml");//把要获取文件的路径通过参数的形式传递

二：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>
    <!-- 括号里的ev,ev1,是event事件对象，所有的鼠标移动，键盘点击的详细状况都保存在这个形参里面-->
    <script>
        window.onload=function(ev){
            // 1.获取需要设置的元素
            var oTitle = document.querySelector("#title");
            var oDes = document.querySelector("#des");
            var oImg = document.querySelector("img");
            // 2.获取所有按钮
            var oBtns = document.querySelectorAll("button");
            oBtns[0].onclick=function(){
                var self=this;
                //调用自己封装的js
               Ajax({
                   type:"get",
                   url:"a.php",
                   data:{"name":this.getAttribute("name")},
                   timeout: 3000,
                   success:function(xhr){
                       // console.log(xhr.responseXML);//document(全局对象)，xml基本结构的代码，和js的document类型一样
                      var name=self.getAttribute("name");//对应第12行的self
                       var res=xhr.responseXML;
                       var title=res.querySelector(name+">title").innerHTML;//拿到以name命名的字符串为父元素的title
                       var des=res.querySelector(name+">des").innerHTML;
                       var image=res.querySelector(name+">image").innerHTML;
                       // console.log(title);
                       // console.log(des);
                       // console.log(image);
                       oTitle.innerHTML=title;
                       oDes.innerHTML=des;
                       oImg.setAttribute("src",image);
                   },
                   error:function(xhr){
                       console.log(xhr.status);
                   }
               })
            }

        }

    </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);
    }
}

四：info.xml

<?xml version="1.0" encoding="UTF-8" ?>
<products>
    <nz>
        <title>甜美女装</title>
        <des>甜美系列</des>
        <image>images/1.jpg</image>
    </nz>
    <bb>
        <title>奢华女包</title>
        <des>送女友</des>
        <image>images/1=2.jpg</image>
    </bb>
    <tx>
        <title>键盘拖鞋</title>
        <des>程序员专属拖鞋</des>
        <image>images/3.jpg</image>
    </tx>
</products>

野生小米椒

关注

0
点赞
踩
0

收藏

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

一：a.php<?php//注意：执行结果中有中文，必须在php文件顶部设置//header("content-type:text/html;charset=utf-8");//如果PHP中需要返回XML数据，前端要接收到数据，必须在PHP文件顶部设置header("content-type:text/xml;charset=utf-8"); //在php中获取本地的xmlec...
复制链接

扫一扫

专栏目录