Ajax(实现前后端交互效果)

这篇具有很好参考价值的文章主要介绍了Ajax(实现前后端交互效果)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax学习目标:

能够知道和服务器相关的基本概念;知道客户端和服务器通信的过程;什么是Ajax以及应用场景,知道接口和接口文档的概念。

1.客户端和服务器概念:

Ajax(实现前后端交互效果)

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

服务器:上网过程中,负责存放和对外提供资源的电脑叫做服务器;

客户端:上网过程中,负责获取和消费资源的电脑;

Ajax(实现前后端交互效果)

2.URL地址的概念:

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

常见的URL例子:

http://www.baidu.com

http://www.taobao.com

2.1-URL地址的组成部分:

1.客户端与服务器之间的-通信协议;

2.存有改资源的-服务器名称;

3.资源在服务器上-具体的存放位置

Ajax(实现前后端交互效果)

 3.客户端与服务器的通信过程:分为请求-处理-响应的三个步骤(网页中的每一个资源都是同各国这个方式从服务器获取回来的)

Ajax(实现前后端交互效果)

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

1.打开Chrome浏览器;

2.打开Chrome的开发者工具(Mac option+command+i);

3.切换到NetWork面板;

4.选中Doc标签;

5.刷新页面,分析客户端与服务器的通信过程

Ajax(实现前后端交互效果)

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

4.1服务器对外提供的资源有文字,图片,音频,视频等等,视频也是一种资源

【数据是网页的灵魂】 

HTML是网页的骨架; CSS是网页的颜值; JavaScript是网页的行为; 数据是网页的灵魂。骨架、颜值、行为皆为数据服务数据,在网页中无处不在。

4.2网页中如何请求数据

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

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

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

简单用法(new一个实例) var xhrObj=new XMLHttpRequest()

4.3资源的请求方式 两种 post get

客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式为get和post请求。

get请求通常用于获取服务端资源(向服务器要资源);

例如:根据URL地址,从服务器获取HTML文件,CSS文件,js文件,图片文件,数据资源等;

post请求通常用于向服务器提交数据(往服务器发送资源);

例如:登陆时向服务器提交的登陆信息,注册时向服务器提交的注册信息,添加用户时向服务器提交的用户信息等各种数据提交操作;

5.Ajax(Asynchronous JavaScript And XML)--异步JavaScript和XML

通俗理解:在网页中用到XMLHttpRequest(简称xhr)对象了就是Ajax,

是为了和服务器之间进行数据交互(传输)的

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

Ajax(实现前后端交互效果)

5.1Ajax的典型应用场景:

第一种:用户名检测:注册用户时,通过Ajax的形式,动态检测用户名是否被占用

 Ajax(实现前后端交互效果)

 第二种:搜索提示:当输入搜索关键字时,通过Ajax的形式,跟动态加载搜索提示列表

Ajax(实现前后端交互效果)

第三种:数据分页显示:当点击页码值的时候,通过Ajax的形式,根据页码值动态刷新表格的数据

Ajax(实现前后端交互效果)

第四种:数据的增删改查:数据的添加、删除、修改、查询操作,都要通过Ajax的形式,来实现数据的交互 

Ajax(实现前后端交互效果)

只要网页和服务器之间要传输了都要用到Ajax,所以这个应用场景非常广泛

6.JQuery中的Ajax

Ajax(实现前后端交互效果)

6.1.    $.get() 函数的语法

Ajax(实现前后端交互效果)

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

被中括号包括的代表的是可选的,可以写也可以不写

Ajax(实现前后端交互效果)

<button id="btnGET">发起不带参数的GET请求</button>

<script>

//$.get(url,[data],[callback])[data],[callback]可选择

(function() {

('#btnGET').on('click', function() {

$.get('http: //www.liulongbin.top:3006/api/getbooks', function(res) {

console.log(res);

})

})

})

</script>

Ajax(实现前后端交互效果)

<button id="btnGETTINFO">发起带参数的GET请求</button>

<script>

(function() {

('#btnGETTINFO').on('click', function() {

$.get('http: //www.liulongbin.top:3006/api/getbooks', {

id: 1

}, function(res) {

console.log(res);

})

})

})

</script>

6.1.    $.post() 

Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果)

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

}

})

})

})

Ajax(实现前后端交互效果)

 7接口的概念

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口),同时,每个接口必须有请求方式。

7.1分析接口的请求过程

1.通过GET方式请求接口的过程

Ajax(实现前后端交互效果)

2.通过POST方式请求接口的过程

Ajax(实现前后端交互效果)

7.2接口测试工具 :为了验证接口能否被正常访问,我们常常需要使用接口测试工具,来对数据接口进行检测。

好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。

PostMan下载官网网址:Download Postman | Get Started for Free

8.1使用PostMan测试GET接口

步骤:1.选择请求的方式;2.填写请求的URL地址;3.填写请求的参数;4.点击Send按钮发起GET请求;5.查看服务器响应的结果

8.2使用PostMan测试POST接口

Ajax(实现前后端交互效果)

8.3 接口文档:接口的说明文档,好的接口文档包含了对接口URL,参数以及输出内容的说明,参照接口文档就能方便的知道接口的作用,以及接口如何使用调用。

Ajax(实现前后端交互效果)

 Ajax(实现前后端交互效果)

form表单的基本使用:

Ajax(实现前后端交互效果)

1.2表单的组成部分

1.表单标签:<form></form>

2.表单域(包含了文本框,密码框,隐藏域等) 

3.表单按钮 button

1.3form标签的属性

action和target用到是最多的,记住

Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

target作用就是规定了是在新窗口打开页面还是原先的窗口打开新页面。 

Ajax(实现前后端交互效果)

get会在URL中显示用户名密码,会存在密码泄漏的情况。

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 文章来源地址https://www.toymoban.com/news/detail-450434.html

Ajax(实现前后端交互效果)

 4.模版引擎

模版引擎不用手动添加字符串了

Ajax(实现前后端交互效果)

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

实现简易的模版引擎

1.定义模版结构

2.预调用模版引擎

3.封装template函数

4.导入并使用自定的模版引擎 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

 

Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 Ajax(实现前后端交互效果)

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

​​​​​​​Ajax(实现前后端交互效果) 

Ajax(实现前后端交互效果) 

 

到了这里,关于Ajax(实现前后端交互效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (前后端交互式)Ajax上传图片 + 更换背景图片

    上传-图片 注意1:上传的图片必须在2MB以内 注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问 请用img/背景图方式进行使用 上传图片的代码实现 * 1. 获取图片文件 * 2. 使用 FormData 携带图片文件 * 3. 提交到服务器,获取图片url网址使

    2024年02月14日
    浏览(47)
  • ajax中的和后端交互的put、patch、delete请求

    1、向后端发送一个put请求,请求修改数据: 重点:修改谁、修改成什么: 修改谁:修改user下第一个: user内容: 修改成什么:修改成“username=hhhpassword=575” 完整代码:(只复制了body里面的代码)  结果: json原来的内容: json文件内容的变化: user内容变化:   2、向后端

    2024年02月06日
    浏览(71)
  • Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二)

    Gpt微信小程序搭建的前后端流程 - 前端小程序部分-2.确定交互所需的后端API(二) 参考微信小程序- 小柠AI智能聊天 ,可自行先体验。 根据上一节的小程序静态页面设计,需要从后端获取数据的主要4个点: 登录流程; 获取今日已提问次数; 获取聊天记录; 发起聊天和响应。

    2024年02月13日
    浏览(43)
  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(76)
  • 【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

    目录 一、Ajax 1、简介 2、Axios (没懂 暂留) (1)请求方式别名 (2)发送get请求 (3)发送post请求 (4)案例 二、前端工程化 1、Vue项目-目录结构 2、Vue项目-启动 (1)vscode页面启动 (2)cmd命令框启动 3、配置Vue端口号 4、Vue项目开发流程 三、Vue组件库 - Element  1、快速入门

    2024年02月12日
    浏览(37)
  • Spring Boot学习随笔- 后端实现全局异常处理(HandlerExceptionResolver),前后端解决跨域问题(@CrossOrigin(局部解决)自定义跨域配置类(全局))

    学习视频:【编程不良人】2021年SpringBoot最新最全教程 异常处理作用:用来解决整合系统中任意一个控制器抛出异常时的统一处理入口 传统单体架构下的处理方式 配置全局异常处理类 resolveException :当控制器方法出现异常时,如果该方法没有try...catch,则会进入当前方法 针

    2024年02月04日
    浏览(66)
  • 通过ajax异步交互实现echarts绘图

    目录 前言 1.引入库 2.flask链接MYSQL读取数据 3.HTML页面echarts绘图 4.结果实现 总结: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 ECharts 遵循 Apache-2.0 开源协议,免费商用。 ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等

    2023年04月14日
    浏览(59)
  • 教你实现SSM和Ajax后端分页

    一,SSM中分页的使用 在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。 二,效果展示 点击前一页后一页首页或者尾页或者是跳转都是静态的实现。 三,表单的实现 3.1,前端代码 listByajax.jsp 3.2,Ajax的实现 3.3,配置好page(用于显示条数,

    2024年02月15日
    浏览(49)
  • 探索 AJAX 技术:实现动态数据交互的前端利器

    简介: AJAX(Asynchronous JavaScript and XML)技术在 Web 前端开发中扮演着重要的角色,它通过异步通信和动态内容更新,为用户带来更好的交互体验。本篇笔记将详细探索 AJAX 技术,并通过生动的代码演示来展示其在实现动态数据交互方面的优势。 1. 异步通信 异步通信是一种在

    2024年02月14日
    浏览(45)
  • 【毕设必备】手把手带你用Python搭建一个简单的后端服务- API的创建,前后端交互的数据传递,GET,POST,JSON,FLASK

    Python是一种 流行 的高级编程语言,具有易于学习和使用的特性,被广泛应用于各种领域。 简单易学 :Python的语法清晰简洁,易于理解和学习。与其他编程语言相比,Python的语法设计非常直观,使得编程新手也能快速上手。 强大的标准库和丰富的第三方库 :Python拥有一个庞

    2024年02月04日
    浏览(174)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包