web学习笔记(四十三)ajax

2024-03-23 14:20
文章标签 学习 笔记 web ajax 四十三

本文主要是介绍web学习笔记(四十三)ajax,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

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);}})

这篇关于web学习笔记(四十三)ajax的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/838566

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码