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

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'访问到数据';
?>

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

猜你在找的Ajax相关文章