JQuery AJAX（1）

最新推荐文章于 2024-07-28 17:31:47 发布

朱海涛的博客

最新推荐文章于 2024-07-28 17:31:47 发布

阅读量129

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_40770950/article/details/85160429

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

2.AJAX的特点：
通过AJAX与服务器进行数据交换，AJAX可以使网页实现局部刷新。

3.AJAX的核心：
Ajax的核心是JavaScript对象XMLHTTPRequest，简而言之，XMLHttpRequest使您可以通过
JavaScript想服务器进行处理响应。

4.同步和异步的概念 B/S模式（同步）Ajax（异步）
同步交互：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
异步交互：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。
区别：一个需要等待，一个不需要等待，在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。
小白式理解：
同步:你现在传输吧，你完成了，我在做事
异步:你现在传输吧，我去做我的事情了，数据传输完了之后告诉我一声

test1.asp:

.get(url,[data],[callback],[type]) .post() .getJSON() 等方法参数可参考该方法参数

第一个参数：请求路径

第二个参数: 对象结构的名/值对列表

{

name:"zht",

age:20

}

第三个参数：表示异步交互成功之后调用的回调函数。回调函数的参数值为服务器端响应的信息

第四个参数: 表示衣服交互成功以后返回内容的格式 xml JSON html script Text

[{"name":"zhu","pass":"123456","age":1},{"name":"zhang","pass":"654321","age":2}]

通过JQuery接受get请求返回的JSON字符串
    <script src="/js/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input").click(function (){
                $.getJSON("test1.asp",function (data){
                    var data=data;
                    for(var i=0;i<data.length;i++){
                        var $p=$("<p>"+data[i].name+" "+data[i].age+"</p>");
                        $("div").append($p);
                    }
                })
            });
        })
    </script>
</head>
<body>
    <input type="button" value="JQuery 实现的异步请求（get）">
    <div></div>
</body>

JQuery实现异步请（post）

<script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/js/json2.js"></script>
<script>
    $(function () {
        $("input").click(function () {
            /*
                   JQuery.get(url,[data],[callback],[type])
                   首个参数必须，其他三个参数可选
                   第一个参数表示要请求页面的URL地址
                   第二个参数表示对象结构的键值对
                   第三个参数表示异步交互成功之后调用的回调函数
                   第四个参数表示服务器响应信息返回的内容格式 xml JSON text

                   JQuery还提供了getJSON()和getScript()方法用来接受JSON数据和JavaScript文件
                   该类方法不需要设置第四个参数
             */
            $.post("test1.asp",{
                name:"朱海涛",
                pass:"masterYourself",
                age:20
            },function (data) {
                alert(data);
            });
        });
    })
</script>

ajax方法是JQuery实现Ajax的底层方法，也就是说它是get(),post()等方法的基础

//1.加载JavaScript文件
$.ajax({
    type:"get",
    url:"test.js",
    dataType: "script"
});
//2.把客户端的数据传递给服务端，并获取服务器的响应信息
$.ajax({
    type:"get",
    url:"test.asp",
    data:"username=jackson&password=123456",
    success:function (data) {
        alert(data);
    }
});
//3.加载HTML页面
$.ajax({
    url:"test.html",
    cache:false,
    success:function () {
        $("#div").append(html);
    }
});

Ajax()参数列表 http://www.cnblogs.com/tylerdonet/p/3520862.html

朱海涛的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录