XHR2,请求XML

最新推荐文章于 2021-08-18 11:25:56 发布

维克多噗噗

最新推荐文章于 2021-08-18 11:25:56 发布

阅读量831

点赞数

分类专栏： xhr

xhr 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

请求XML

books.xml

<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
</bookstore>

用responseXML得到数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
    </style>
</head>
<body>
    <button id="btn">获取XML===>title列表</button>
    <div id="box"></div>
    <script type="text/javascript">
    btn.onclick = function (e) {
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveObject('Microsoft.XMLHTTP');
        };
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    console.log(xhr.responseXML);
                    var data = xhr.responseXML.querySelectorAll('title');
                    console.log(data[0].innerHTML);
                    for (var i = 0; i < data.length; i++) {
                        box.innerHTML += data[i].innerHTML+"<br>";
                    }
                }
            }
        }
        xhr.open('get','books.xml',true);
        /*
            如果是请求js文件, js内数据必须是双引号;
         */
        xhr.send();
    }
    </script>
</body>
</html>

XHR2文件上传

    在标准浏览器下，XMLHttpRequest已经升级了，可以支持很多的一些特性
    a)可以跨域，在同一服务器下访问不同的域，跟正常的AJax请求过程一样，但需要后端配合
    b)权限问题,后端请求头要允许你访问的域
        ⑥  header(‘Access-Control-Allow-Origin:http://www.域名.com’)

3. XMLHttpRequest增加了很多功能
    c)  规范不推荐使用 onreadystatechange 事件监听状态值，它推荐使用onload

4. IE8+浏览器如果想实现跨域请求，则需要使用另外一个对象实现

    d) 创建对象 var xhr = new XDomainRequest( ) 过程跟之前一样
        [ https://msdn.microsoft.com/library/cc288060(v=vs.85).aspx ]
        [ https://xhr.spec.whatwg.org/ ]

上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        a {text-decoration: none;}
        ul,li {list-style: none;}
        body {font-family: "Microsoft yahei";}
    </style>
</head>
<body>
    <input type="file" multiple id="input">
    <button id="btn">获取</button>

    <script type="text/javascript">

    btn.onclick = function (e) {
        console.log(input.files[0]);
        var xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveObject('Microsoft.XMLHTTP');
        };
        xhr.onload = function (e) {
            console.log("上传成功");
            // 上传成功参数
            console.log(JSON.parse(this.response));
        }
        // 上传数据
        var upload = xhr.upload;
        upload.onprogress = function (e) {
            console.log('当前进度'+e.loaded+"总进度"+e.total);
        }
        xhr.open('post','postFile.php',true);
        // 上传的文件
        var oFormData = new FormData();
        oFormData.append('file',input.files[0]);
        // 发送给服务器
        xhr.send(oFormData);
        // 发送结束
        xhr.onloadend = function(pe) {
            console.log("end");
        }
    }
    </script>
</body>
</html>

proFile.php

<?php
    header('Content-type:text/html; charset="utf-8"');
    $upload_position = 'uploads/';

    if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
        exit_status(array('code'=>1,'msg'=>'错误提交方式'));
    }

    if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){

        $pic = $_FILES['file'];

        if(move_uploaded_file($pic['tmp_name'], $upload_position.$pic['name'])){
            exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_position.$pic['name']));
        }

    }
    // echo $_FILES['file']['error'];
    exit_status(array("code"=>2,"msg"=>"出现了一些错误"));

    function exit_status($str){
        echo json_encode($str);
        exit;
    }
?>

维克多噗噗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XHR2,请求XML

请求XMLbooks.xml<bookstore> <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> <
复制链接

扫一扫

专栏目录