【jquery Ajax】基础概念与使用教学
客户端与服务器 服务器上网过程中，负责存放和对外提供资源的电脑，叫做服务器。
客户端上网过程中，负责获取和消费资源的电脑，叫做客户端，
URL 地址 url 地址的概念 URL,中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有通过 URL 地址，才能正确等位资源的存放位置，从而成功访问到对应的资源。
URL 地址的组成部分 URL 地址一共分为三部分
客户端与服务器之间的通信协议存有该资源的服务器名称资源在服务器上具体的存放位置。 客户端与服务器的通信过程 过程解释客户端
打开浏览器输入要访问的网站地址回车，向服务器索要数据内容 web 服务器
服务器接受到客户端发来的资源请求服务器在内部处理这次请求，找到相关的资源服务器把找到的资源，响应（发送）给客户端
客户端与服务器之间每一个资源的通信过程，分为请求——处理——响应三个步骤
服务器对外都提供了哪些资源 网页中常见的资源
数据也是资源
网页中的数据，也是服务器对外提供的一种资源，例如股票数据，以及排行榜等
CSS 是网页的颜值 Javascript 是网页的行为数据 则是网页的灵魂 网页中如何请求数据如果要在网页中请求服务起上的数据资源，则需要用到 XMLHttpRequest 对象。
XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
var xhrObj = new XMLHttpRequest() 资源的请求方式 客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。
get 请求通常用于获取服务端资源（向服务器要资源）例如：根据 URL 地址，从服务器获取 HTML 文件，css 文件，js 文件，图片文件，数据资源等 post 请求通常用于向服务器提交数据（向服务器发送数据）例如：登录时向服务器提交的登录信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种数据提交操作 了解 Ajax 什么是 AjaxAjax 的全称是 Asynchronous Javascript And XML（异步 jJavaScript 和 XML）
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax
为什么要学 Ajax 之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax 能让我们轻松实现网页与服务器之间的数据交互。
Ajax 的典型应用场景 用户名检测：注册用户时，通过 ajax 传送数据，到服务器，进行判断检测用户名是否被占用
搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表
数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据（局部刷新）
了解 jquery 中的 Ajax 浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jquery 对其进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jquery 中发起 Ajax 请求最常用的三个方法如下：
.post() 提交数据.get()函数的语法 $.get(url,[data],[callback])
参数名 参数类型 是否必选 说明 url string 是 要请求的资源地址 data object 否 请求资源期间要携带的参数 callback function 否 请求成功时的回调函数 .get()函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可。
//记得导入 jquery<body><button id="get">发起不带参数的请求</button></body><script>
//res 是 get 拿到的数据})})</script>
('#get').on('click', function () {$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {console.log(res);})})</script>
发起带参数的请求，这个参数就相当于条件获取指定的数据。
只获取了 id:1 数据。
.post（）函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
参数名 参数类型 是否必选 说明 url string 是 提交数据的地址 data object 否 要提交的数据 callback function 否 数据提交成功时的回调函数 ('#post').click(function () {$.post('http://www.liulongbin.top:3006/api/addbook',{ bookname: 'ajax', author: '小解同志', publisher: 'CSDN 出版社' }, function (res) {console.log(res);//res 代表上传响应回来的数据})})</script>
.get（）和.ajax（）函数，是一个功能比较综合的函数，他允许我们队 Ajax 请求进行更详细的配置。
使用('#get').click(function () {$.ajax({type: 'get',url: 'http://www.liulongbin.top:3006/api/getbooks',data: {id: 2},success: function (res) {console.log(res);}})})</script>
使用('#get').click(function () {$.ajax({type: 'post',url: 'http://www.liulongbin.top:3006/api/addbook',data: { bookname: 'ajax', author: '小解同志', publisher: 'CSDN 出版社' },success: function (res) {console.log(res);}})})
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论