jQuery中Ajax的基本使用（1）

最新推荐文章于 2020-11-17 01:09:25 发布

诗渊

最新推荐文章于 2020-11-17 01:09:25 发布

阅读量1.6k

点赞数 5

分类专栏： jQuery 文章标签： jquery ajax javascript 异步

本文链接：https://blog.csdn.net/u014607184/article/details/51377647

版权

Ajax全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）。AJAX并不是一种新的编程语言，而是一种将现有技术标准结合起来的新方法。使用Ajax，可以在不重新加载整个页面的情况下，并且实现异步提交，与服务器交换数据并更新部分网页的艺术，提升了用户体验。

那么首先需要弄懂同步和异步有什么区别。Web程序开发基本都是同步的，意为执行一段程序才能执行下一段。比如前端界面需要从服务器端获取某些资源，如果采用同步的话，必须等待服务端的响应并且前端接收到资源后，前端脚本程序才会向下执行，如果响应比较慢，响应时间长的话，就回引起应用程序挂起或停止。如果采用异步请求的话，前端脚本程序发送异步请求之后无需等待服务器的响应，可以直接继续执行程序，当响应就绪后对响应进行处理。使用Ajax最关键的地方就是实现异步请求，所以，我们在使用Ajax时大部分都是采用异步模式。

jQuery对Ajax做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery采用了三层封装：最底层的封装方为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高是$.getScript()和$.getJSON()方法。

1 .load()，$.get()和 $.post()的使用

1.1、.load()方法

.load()是一个局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。
.load()方法可以设置三个参数： url(这个是必须的，表示文件的 url 地址，参数类型为 String)、data(可选，发送的 key/value 数据，参数类型为 Object) callback(可选，成功或失败的回调函数，参数类型为函数 Function)。
异步加载一个html文件：

<body>
    <input type="button" value="ajax异步请求" />
    <div></div>
</body>
<script>
    $(function(){
    
        $("input").click(function(){
    
            $("div").load("user.html");
        });
    });
</script>

其中user.html文档中为两个p标签：

<p class="p1">我是段落1</p>
<p class="p2">我是段落2</p>

这就能显示html文件中的两个段落，如果需要从加载的文档中过滤元素这样，只显示段落1，则只需要在路径URL参数中增加需要的选择器即可：

$("div").load("user.html .p1");

当然，有的时候我们不仅是只从服务端加载资源，还需要向服务端提交数据，这时我们就需要传输第二个可选参数，向服务器提交数据有两种方式：get 和 post。默认为get提交方式。

最低0.47元/天解锁文章

诗渊

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery中Ajax的基本使用（1）

本博客对jQuery中Ajax的基本方法进行简单介绍，jQuery对ajax进行了三个层次的封装：最底层的封装方为：\$.ajax()，而通过这层封装了第二层有三种方法：.load()、\$.get()和\$.post()，最高是\$.getScript()和\$.getJSON()方法。文中对这几个方法的使用进行了简单的说明。
复制链接

扫一扫