AJAX 异步请求详细教程

这篇具有很好参考价值的文章主要介绍了AJAX 异步请求详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


AJAX 异步请求

简介

Ajax 全称为 Asynchronous JavaScript And Xml -- 异步 js 和 xml,用来进行
交互式网页的制作;也是一种动态的网页开发技术,在不加载整个页面的前提下进行页面局部
内容的刷新;
Ajax 在后台与服务器进行少量的数据交互,使用网页实现异步更新,比传统的刷新整个页面
带给服务器的压力要小很多;让程序的运行更加顺畅;
Ajax 分为原生 js 实现和 Jquery 框架实现;
原生的 Ajax 需要定义 XmlHttpRequest 对象,通过该对象的 open 方法和 send 方
法进行请求方式的设置和请求发送,当请求发送到指定 url,被服务器接受并处理,再响应给
页面数据;
Jquery 提供的 ajax 是一个封装好底层实现的函数,只需要进行一些参数设置就能实现
ajax 请求的发送;

Jquery 版 Ajax

$.ajax() – Jquery提供的 ajax 函数

格式:
$.ajax({
url:"请求地址",
data:{},
type:"post/get",
async:true/false,
dataType:"text/json",
success:function(obj){},
error:function(){}
})
url:与 form 表单的 action 属性一致,表示请求发送的地址
data:请求发送时携带的参数,以传统的 key=value 方式进行发送
type:请求发送的方式,对应 form 表单的 method 属性
async:是否支持异步请求发送,true 表示支持异步请求,默认为 true
dataType:服务器响应给页面的数据类型,text、html、json、xml;其中 json 格式
的数据时最好处理的数据类型;
success: 请求响应成功调用的回调函数,如果响应成功,会将响应的数据封装到回调函数的
参数中,在 obj 对象中进行响应数据的获取
error: 请求响应失败后的回调函数,一般不写;
在真正使用 ajax 进行异步请求发送时,不是所有的属性都需要写,除了 url 属性,其他属
性都是可选属性;

注册验证用户名是否可用

register 页面

ajax异步请求,笔记,ajax,javascript,前端

servlet 类

ajax异步请求,笔记,ajax,javascript,前端

service 层

ajax异步请求,笔记,ajax,javascript,前端

dao 层

ajax异步请求,笔记,ajax,javascript,前端

$.get() 与 $.post()

$.get() 与 $.post() 是 $.ajax() 的二次封装,分别针对 get 请求和 post 请求
的 ajax;
$.get():只能处理 get 方式请求
$.post():只能处理 post 方式请求
语法:
$get/post(
"请求地址",
{key:value,key:value},
function(){},
"text"
)
注意:$.ajax() 和 $.get() 与 $.post() 实现的功能是一样的,但是$.get() 与
$.post() 在进行属性书写时顺序有严格要求;

ajax异步请求,笔记,ajax,javascript,前端

Ajax 返回数据类型

Ajax 支持多种返回值类型,主要有以下几种:
① xml:太复杂、解析起来比较麻烦,已被淘汰
② text/html:表示文本,一般情况下 html 使用 text 代替,因为 html 虽然说是页
面,但是本质和文本一样;
③ script:返回脚本
④ json:json 对象,是一种在页面上操作起来相对简单的数据类型,非常方便页面值获取,
是后续学习中首选的返回数据类型
⑤ jsonp:和 json 几乎一样,只不过 jsonp 支持跨域访问

JSON

json 简介


json 全称为 JavaScript Object Notation – js 对象简谱,是一种轻量级的数据
交换格式;它是基于 ECMAScript,采用独立的编程语言的文本格式进行储存和表示数据。该
语言简介、层次分明、易于浏览器解析换和生成对应的数据;目前是较为理想的数据交换语
言,易于编程人员阅读、编写、操作;
json 格式的数据分为:json对象、json数组、对象数组混合格式
json 在线解析工具:www.bejson.com
① 能够进行 json 数据格式校验
② 能够将不规范的 json 数据就行格式化


ajax异步请求,笔记,ajax,javascript,前端

JSON 对象

格式:
{
"key":"value",
"key2":"value2"
}
例如:表示一个有 name 和 age 属性的对象
{"name":"张三","age":"20"}

JSON 数组

与 java 的 Object 类型的一维数组表示方式一致。
格式:
[1,2,3,"apple"]

对象数组混合格式

数组内部嵌套对象,或者对象内部嵌套数组;
格式:
[{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
}]
	

小结

① JSON 格式的语法是使用 {} 或者是 [],{} 表示对象,[] 表示数组;
对象中数据的获取方式是通过 key 值获取 value 值
数组中数据的获取使用通过索引进行获取
② 对象中数据的储存是以 key:value 的形式,多个数据之间使用 ',' 隔开
③ 数组中数据的储存是以单个元素进行,多个数据之间使用 ',' 隔开	

JSON 应用

JSON 对象的使用

ajax异步请求,笔记,ajax,javascript,前端

jsp 页面

ajax异步请求,笔记,ajax,javascript,前端

servlet

ajax异步请求,笔记,ajax,javascript,前端

service 层

ajax异步请求,笔记,ajax,javascript,前端

ajax异步请求,笔记,ajax,javascript,前端

dao 层

ajax异步请求,笔记,ajax,javascript,前端

ajax异步请求,笔记,ajax,javascript,前端

运行结果

ajax异步请求,笔记,ajax,javascript,前端

JSON 数组的使用

servlet 类

ajax异步请求,笔记,ajax,javascript,前端

响应的 json 数组

ajax异步请求,笔记,ajax,javascript,前端

jsp 页面

ajax异步请求,笔记,ajax,javascript,前端

运行结果

ajax异步请求,笔记,ajax,javascript,前端

数组对象混合格式

servlet

ajax异步请求,笔记,ajax,javascript,前端

servlet 响应的数据

ajax异步请求,笔记,ajax,javascript,前端

jsp 页面获取数据

第一种方式 – 有缺陷,需要事先知道数组大小

ajax异步请求,笔记,ajax,javascript,前端

第二种方式 – 具有通用性

ajax异步请求,笔记,ajax,javascript,前端

运行结果

ajax异步请求,笔记,ajax,javascript,前端

Jackson 工具

简介

Jackson 是一个可以将各种类型的数据转换为 json 字符串的工具;
能够对常用对象、数组、集合等类型的数据快速的转换为 json 字符串,能够大幅度的提升开
发效率;
Jackson 工具的使用需要依赖3个 jar 包:
① jackson-core
② jackson-databind
③ jackson-annotations

ajax异步请求,笔记,ajax,javascript,前端

jackson 工具的使用

将 jar 包导入项目

ajax异步请求,笔记,ajax,javascript,前端
ajax异步请求,笔记,ajax,javascript,前端

ajax异步请求,笔记,ajax,javascript,前端

将新添加的 jackson jar 包加入到服务器中

ajax异步请求,笔记,ajax,javascript,前端

ajax异步请求,笔记,ajax,javascript,前端

ajax异步请求,笔记,ajax,javascript,前端

jackson 转换对象

servlet 类

ajax异步请求,笔记,ajax,javascript,前端

响应给页面的数据

ajax异步请求,笔记,ajax,javascript,前端

jsp 页面进行响应数据的获取

ajax异步请求,笔记,ajax,javascript,前端

运行结果
ajax异步请求,笔记,ajax,javascript,前端文章来源地址https://www.toymoban.com/news/detail-787119.html

到了这里,关于AJAX 异步请求详细教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • [前端系列第6弹]Ajax简明教程:轻松实现Web页面的异步交互

    在这篇文章中,我将介绍Ajax的基本概念、原理、优缺点、实现方法和应用场景,以及如何使用它来实现Web页面的异步交互。还将给一些简单而实用的例子,让你可以跟着我一步一步地编写自己的Ajax代码。 目录 一、什么是Ajax 二、如何使用Ajax (一)JavaScript中使用Ajax (二)

    2024年02月13日
    浏览(45)
  • 异步请求-AJAX

    什么是同步交互 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后,按照预先编写好的程序中的业务逻辑进行处理,比如和数据库服务器进行数据信息交换。最后,服务器对请求进行响应,将结果返回给客户端,返回一个HTML在浏览器中显示,通常会有CSS样

    2024年02月06日
    浏览(35)
  • Ajax 与 Axios 异步请求

    1. 网页中如何请求数据 2. 资源的请求方式 客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务端资源(向服务器要资源) post 请求通常用于向服务器提交数据(往服务器发送资源) 1. 什么是Ajax 2. 为什么要学

    2024年03月28日
    浏览(51)
  • AJAX异步请求&JSON数据格式

    目录 前言 1.AJAX的实现方式 1.1原生的js实现方式 1.2JQuery实现方式 2.1语法 3.JSON数据和Java对象的相互转换 3.1将JSON转换为Java对象 3.2将Java对象转换为JSON AJAX:ASynchronous JavaScript And XML    异步的JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技

    2024年02月16日
    浏览(44)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(54)
  • 探索异步交互:JavaScript AJAX 的全面指南

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-AjAx 目录 AJAX AJAX 的优势 AJAX 的使用 创建一个 ajax 对象 配置链接信息 发送请求 一个基本的 ajax 请求 ajax 状态码 readyStateChange resp

    2024年02月03日
    浏览(52)
  • 【Java】数据交换 Json 和 异步请求 Ajax

     🎄欢迎来到@边境矢梦°的csdn博文,本文主要讲解Java 中 数据交换和异步请求 JsonAjax 的相关知识🎄 🌈我是边境矢梦°,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下 🫰🫰🫰 ,下次更新不迷路🎆 Ps: 月亮越亮说明知识点越重要 (重要性或者难度

    2024年02月13日
    浏览(48)
  • 什么是AJAX?如何使用原生JavaScript搭建AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(46)
  • 什么是AJAX?如何使用原生JavaScript进行AJAX请求?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月07日
    浏览(41)
  • 【测试】selenium拦截Ajax(XHR)等异步请求数据

    1.说明 在爬取某个网站的时候遇到加密参数,由于js代码经过混淆编译不好破解,所以采用selenium的方式获取参数,但是我们获取selenium的数据基本上都是基于页面的,对于网站发起的异步请求,我们可以从日志中提取 2.设置driver参数 我们首先要通过Option对象(比如说ChromeOp

    2024年02月13日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包