Ajax_day01

最新推荐文章于 2025-08-04 10:37:14 发布

原创最新推荐文章于 2025-08-04 10:37:14 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #服务器 #servlet

Ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了客户端与服务器的概念，包括上网的目的和它们的角色。讲解了URL地址的组成和作用，以及网页打开的过程。接着深入讨论了Ajax技术，解释了其用于异步数据交互的重要性，并给出了jQuery中$.get()、$.post()和$.ajax()的使用示例。此外，还涉及到了接口的概念和接口测试工具PostMan的使用，以及接口文档的关键组成部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.客户端与服务器端

1.1上网的目的

上网的本质目的：通过互联网的形式来获取和消费资源

1.2服务器

上网过程中，负责存放和对外提供资源的电脑，叫作服务器

1.3客户端

上网过程中，负责获取和消费资源的电脑，叫作客户端

2.URL地址

2.1URL地址的概念

URL（全称UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

2.2URL地址的组成部分

URL地址一般由三部分组成：

客户端与服务器之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

http://www.cnblogs.com/liulongbinblogs/p/11649393.html

http：通信协议

www.cnblogs.com：服务器名称

liulongbinblogs/p/11649393.html：资源在服务器上具体的存放位置

3.分析网页的打开过程

3.1图解客户端与服务器的通信过程

注意：

客户端与服务器之间的通信过程，分为请求-处理-响应三个步骤
网页中的每一个资源，都是通过请求-处理-响应的方式从服务器获取回来的

3.2基于浏览器的开发者工具分析通信过程

打开Chrome浏览器
Ctrl + shift + i打开Chrome的开发者工具
切换到Network面板
选中Doc页签
刷新页面，分析客户端与服务器的通信过程

4.服务器对外提供了哪些资源

4.1网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然通过请求-处理-响应的方式进行获取。

如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。

XMLHttpRequest（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。

最简单的用法 var xhrObj = new XMLHttpRequest()

4.2资源的请求方式

客户端请求服务器时，请求的方式有多种，最常见的两种请求方式分别为get和post请求

get请求通常用于获取服务端资源（想服务器要资源）
- 例如：根据url地址、从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等
post请求通常用于向服务器提交数据（往服务器发送资源）
- 例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

5.了解Ajax

5.1什么是Ajax

Ajax的全称是Asynchronous Javascript And XML（异步 JavaScript 和 XML）

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax

5.2为什么要学Ajax

之前所学的技术，只能把网页做得更美观漂亮，或添加一些动画效果，但是Ajax能让我们轻松实现网页与服务器之间的数据交互

5.3Ajax的典型应用场景

用户名检测：注册用户时，通过ajax的形式，动态检测用户名是否被占用
搜索提示：当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表
数据分页显示：当点击页码的时候，通过ajax的形式，根据页码动态刷新表格的数据
数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互

6.jQuery中的Ajax

6.1了解jQuery中的ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 ajax 相关的函数，极大地降低了ajax的使用难度。

jQuery中发起 ajax 请求最常用的三个方法：

$.get()
$.post()
$.ajax()

6.2 $.get()函数的语法

jQuery中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

$.get() 函数的语法如下：

$.get(url, [data], [callback])

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

$.get() 发起不带参数的请求

使用$.get() 发起不带参数的请求的请求时，直接提供请求的url地址和请求成功之后的回调函数即可，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    console.log(res) // 这里的 res 是服务器返回的数据
})

$.get() 发起带参数的请求

使用$.get() 发起带参数的请求的请求时，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {
    console.log(res) 
})

6.3 $.post()函数的语法

jQuery中$.post() 函数的功能单一，专门用来发起post请求，从而向服务器提交数据

$.post() 函数的语法如下：

$.post(url, [data], [callback])

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post() 向服务器提交数据

使用$.post() 向服务器提交数据的示例代码如下：

$.post('http://www.liulongbin.top:3006/api/addbook', //请求的url地址
    {bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社'}, //提交的数据
    function(res) { //回调函数
        console.log(res)
    }
)

6.4 $.ajax() 函数的语法

相比于 $.get() 和 $.post() 函数，jQuery中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。

$.ajax() 函数的基本语法如下：

$.ajax({
    type: '', //请求的方式，例如 GET 或 POST
    url: '', //请求的url地址
    data: {}, //这次请求要携带的数据
    success: function(res) { }  //请求成功之后的回调函数
})

使用$.ajax() 发起GET请求

使用$.ajax() 发起GET请求时，只需将 type属性的值设置为 ‘GET’即可：

<body>
    <button id="btnGet">发起GET请求</button>
    <script>
        $(function() {
            $('#btnGet').on('click', function() {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1
                    },
                    success: function(res) {
                        console.log(res)
                    }
                })
            })
        })
    </script>
</body>

使用$.ajax() 发起POST请求

使用$.ajax() 发起POST请求时，只需将 type属性的值设置为 ‘POST’即可：

<body>
    <button id="btnPost">发起POST请求</button>
    <script>
        $(function() {
            $('#btnPost').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: '史记',
                        author: '司马迁',
                        publisher: '上海图书出版社'
                    },
                    success: function(res) {
                        console.log(res)
                    }
                })
            })
        })
    </script>
</body>