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

ajax02.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课时47初探浏览器原生Ajax接口(2)_2-->
<!--使用post方式传数据给服务器，并返回数据-->
<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])+'&';
            }
            console.log(str.substr(0,str.length-1));
            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('post','ajax02.PHP');
//              这个头信息一定要设置，不设置拿不到，是固定的，服务器返回的数据（表单提交已经默认设置过了）
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//              post请求吧拼接好的字符串id=10&a=1&b=2&c=3放到 xhr.send(data);
                xhr.send(data);
            });

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

ajax02.PHP

服务器端

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

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

猜你在找的Ajax相关文章