课件_47.第九章：Ajax技术[2]-初探浏览器原生Ajax接口(2)_1

发布时间：2020-12-16 01:47:38 所属栏目：百科来源：网络整理

导读：ajax02.html 客户端 !DOCTYPE html!--客户端--!--课时47初探浏览器原生Ajax接口(2)_1--!--使用get方式传数据给服务器，并返回数据--html id="html"head meta charset="utf-8" / titledemo/title script type="text/javascript" src="jquery-2.1.4.min.js"/sc

ajax02.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课时47初探浏览器原生Ajax接口(2)_1-->
<!--使用get方式传数据给服务器，并返回数据-->
<html id="html">
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function encodeU(data) {
            var str='';
            for (var i in data) {

//                对参数进行url编码
                str+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&';
            }
            return str.substr(0,str.length-1);
        }
        $(function(){
            $('button').click(function(){
                //创建XHR对象,后面的Ajax操作都是基于这个对象的！
                var xhr=new XMLHttpRequest();
                xhr.addEventListener('readystatechange',function(){
                    if (xhr.readyState==4) {
                        //请求完成，将服务器返回的数据，输出来！
                        console.log(xhr.responseText);
                        $('body').append(xhr.responseText);
                    }
                });
//                调用encodeU的方法，传入一个对象
                var data=encodeU({
                    id:10,a:1,b:2,c:3
                });
                xhr.open('get','ajax02.php?'+data);
                xhr.send(null);
            });

        });
    </script>
</head>
<body>
<button>开始</button>
</body>
</html>

ajax02.php

服务器端

<?php
//可以执行各种PHP代码，各种判断，以及从数据库中获取到数据,返回给客户端
////sleep(5);
//if($_GET['id']==10){
//    print_r($_GET);
//}else{
//    echo'没有数据';
//}
print_r($_GET);
echo'访问到数据';
?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!