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

最新推荐文章于 2021-08-06 03:06:43 发布

zhaihaohao1

最新推荐文章于 2021-08-06 03:06:43 发布

阅读量393

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/50081391

版权

ajax 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课件_47.第九章：Ajax技术[2]-初探浏览器原生Ajax接口(2)_1

ajax02.html客户端 demo function encodeU(data) { var str=''; for (var i in data) {// 对参数进行url编码 str+=encodeURIC
复制链接

扫一扫