web学习笔记(四十三)ajax
时间:2024-04-17 07:05:19 来源:网络cs 作者:亙句 栏目:卖家故事 阅读:
目录
1.相关基础概念
1.1客户端与服务器
1.2URL地址
1.3 客户端和服务器端通信的过程
1.4 一个URL地址放入浏览器,到页面渲染发生了什么事情
1.5 数据
1.6资源的请求方式
2.Ajax
2.1什么是Ajax
2.2 jQuery 中的Ajax
2.2.1 $.get()的语法
2.2.2$.post()的语法
2.2.3 $.ajax()的语法
1.相关基础概念
1.1客户端与服务器
我们上网的本质就是通过互联网来获取和消费资源,而用来存放和对外提供资源的电脑叫做服务器,用来获取和消费资源的电脑叫做客户端。
1.2URL地址
URL(全称是UniformResourceLocator)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
URL地址一般由客户端与服务器之间的通信协议、存放资源的服务器名称、资源在服务器上具体的存放位置三部分组成。
1.3 客户端和服务器端通信的过程
客户端与服务器之间的通信过程,分为 请求 – 处理 – 响应 三个步骤。网页中的每一个资源,都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。1.4 一个URL地址放入浏览器,到页面渲染发生了什么事情
1.5 数据
网页中的数据也是服务器对外提供的一种资源,而数据也是网页的灵魂。数据在网页中无处不在,我们之前说的html、css、javascript这些都是为数据服务的。
1.6资源的请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为get 和post请求。
get请求通常用于获取服务器端资源(向服务器资源)(例如:根据URL地址,从服务器获取HTML文件、CSS文件、js文件、图片文件、数据资源等)post请求通常用于向服务器提交数据(往服务器发送资源)(例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作。)在浏览器中,默认情况下,通过在地址栏输入 URL 的方式发起请求时,浏览器会使用 GET 方法来请求资源,而无法直接模拟使用 POST 方法发送请求。要使用 POST 方法发送请求,通常需要通过表单提交或者使用 AJAX 技术来实现。
2.Ajax
2.1什么是Ajax
AJAX 就是 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但时,Ajax能让我们轻松实现网页与服务器之间的数据交互。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(无感刷新)。
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX主要用来进行搜索提示(在搜索关键字时,动态加载提示列表)、用户名检测(注册时检测该用户名是否被占用)、数据分页显示(根据页面值动态刷新表格中的数据)、数据的增删改查(实现数据的交互)AJAX 工作原理Ajax可使因特网应用程序更小、更快,更友好。2.2 jQuery 中的Ajax
浏览器提供的XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数,
极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下:
$.get();$.post()$.ajax() ------推荐使用2.2.1 $.get()的语法
jQuery 中$.get()函数的功能单一,专门用来发起get()请求,从而将服务器上的资源请求到客户端来进行使用。
$.get(url,[data],[callback]);
参数名 | 参数类型 | 是否必选 | 说明 |
url | string | 是 | 要请求的资源地址 |
data | object | 否 | 请求资料期间要携带的参数 |
callback | function | 否 | 请求成功时的回调函数 |
(1)当 $.get()函数不带参数时,将直接提供请求的URL地址和请求成功之后的回调函数即可。
// get无参请求 $.get('http://192.168.13.18:8080/api/getbooks', function (i) { console.log(i); }) // {status: '200', msg: '获取图书列表成功', data: Array(3)}
(2)当 $.get()函数带参数时,将会返回符合参数条件的数据。
// get传参请求 $.get('http://192.168.13.18:8080/api/getbooks', { id: 228 }, function (res) { console.log(res); }) // {status: '200', msg: '获取图书列表成功', data: Array(1)}
2.2.2$.post()的语法
jQuery中$.post()函数的功能单一,专门用来发起post请求,从而向服务器提交数据。
$.post(url,[data],[callback])
参数名 | 参数类型 | 是否必选 | 说明 |
url | string | 是 | 要提交的资源地址 |
data | object | 否 | 要提交的数据 |
callback | function | 否 | 数据提交成功时的回调函数 |
(1)当 $.post()函数不传参时, 会向服务器提供一条空的数据。
// post不传参 $.post('http://192.168.13.18:8080/api/addbook', function (res) { console.log(res); }) // {id: 234, bookname: null, author: null, publisher: null}
(2)当 $.post()函数传参时,会向服务器提交我们传过去的数据。
// post传参 $.post('http://192.168.13.18:8080/api/addbook', { 'id': 133, 'bookname': 'ajax1', 'author': '张三', 'publisher': '郑州图书出版社' }, function (res) { console.log(res); }) // {status: 201, msg: '添加图书成功'}
2.2.3 $.ajax()的语法
相比于 $.get()和$post()函数,jQuery中提供的$.ajax()函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
$.ajax({ type:'',//请求的方法,例如 GET 或POST(type也可以换成method) url:'',//请求的URL地址 data:{},//这次请求要携带的数据 success:function(res){}//请求成功之后的回调函数})
(1) $.ajax()发起GET请求:
$.ajax({ method: 'get', data: { id: 233 //可以传参也可以不传,传参返回指定数据,不传返回所有数据 }, url: 'http://192.168.13.18:8080/api/getbooks', success: function (res) { console.log(res); } })
(2)$.ajax()发起POST请求:
$.ajax({ method: 'post', url: 'http://192.168.13.18:8080/api/addbook', data: { 'bookname': 'ajax3', 'author': '张三', 'publisher': '郑州图书出版社' }, success: function (res) { console.log(res); } })
本文链接:https://www.kjpai.cn/gushi/2024-04-17/159649.html,文章来源:网络cs,作者:亙句,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!
上一篇:快速上手PyWebIO:Python开发者的Web应用利器!
下一篇:返回列表