【精选】Ajax技术知识点合集

Ajax技术详解

Ajax简介

在这里插入图片描述

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建 交互式、快速动态应用的网页开发技术,无需重新加载整个网页的情况下,能够更新页面局 部数据的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下,对页面的某部分进行更新。

Ajax 的使用

  • Ajax 的运行原理

在这里插入图片描述

  • XMLHttpRequest 对象

XMLHttpRequest 是浏览器接口对象,该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用,通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互,而无需让整个页面刷新,因此成为 Ajax 编程的核心对象。

  • Ajax 的使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.example.com");

发送请求

xhr.send()

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){
  //0:请求未初始化
  //1:服务器连接已建立
  //2:请求已接收
  //3:请求处理中
  //4:请求已完成,且响应已就绪
  if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("span").innerHTML=xhr.responseText;
    alert(xhr.responseText);
   }
}

Ajax请求

Ajax请求

请求的步骤:

正如您在上面的示例中所看到的,XMLHttpRequest对象起着重要作用

  1. 用户从 UI 发送请求,JavaScript 中调用 XMLHttpRequest对象。
  2. HTTP请求由XMLHttpRequest 对象发送到服务器。
  3. 服务器使用 JSP,PHP,Servlet,ASP.net 等与数据库交互。
  4. 检索数据。
  5. 服务器将 XML 数据或 JSON数据发送到 XMLHttpRequest 回调函数。
  6. HTML和 CSS 数据显示在浏览器上。
方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步)
send(string)将请求发送到服务器。string:仅用于 POST 请求

Ajax同步或异步

Async=true

当使用 async=true时,请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById("view").innerHTML = xhr.responseText;
   }        
}
xmlhttp.open("GET","get.txt",true);
xmlhttp.send();

Async = false

我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax服务器响应

状态行 xhr.status状态码,如200,304,404等;

响应主体 xhr.responseText与xhr.responseXML都表示响应主体。

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的responseText或responseXML属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
var xhr = new XMLHttpRequest();


xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);
xhr.send();


xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
    //解析返回的xml文件
  xmlDoc = xhr.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("ARTIST");
  for (i=0;i<x.length;i++) {
       txt = txt + x[i].childNodes[0].nodeValue + "<br>";
   }
  document.getElementById("view").innerHTML = txt;
  }
}



JSON详解

在这里插入图片描述

  • JSON简介

JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于阅读和编写,同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。

  • 为什么要使用 JSON

在 JSON 未出现之前在 Ajax 中对于数据传递方式,会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快、更易解析。

  • JSON 格式的特征
  • JSON的语法规则

JSON 是按照特定的语法规则所生成的字符串结构。

大括号表示 JSON 的字符串对象。{ } 属性和值用冒号分割。{“属性”:“value”} 属性和属性之间用逗号分割。{“属性”:“value”,“属性”:“value”,…} 中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]

JSON 字符串对象:

{"userid":1,"username":"admin","sex":"male"}

数组:

[{"userid":1,"username":"admin"},
 {"userid":2,"username":"zhangsan"}]
  • JOSN的数据类型
  1. string:字符串,必须要用双引号引起来。
  2. number:数值,与 JavaScript 的 number 一致,
  3. object:JavaScript 的对象形式,{ key:value }表示方式,可嵌套。
  4. array:数组,JavaScript 的 Array 表示方式[ value ],可嵌套。
  5. true/false:布尔类型,JavaScript 的 boolean 类型。
  6. null:空值,JavaScript 的 null。

和XML的比较
可读性

JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负。

可扩展性

XML天生有很好的扩展性,JSON当然也有,没有什么是XML可以扩展而JSON却不能扩展的。不过JSON在Javascript主场作战,可以存储Javascript复合对象,有着xml不可比拟的优势。

编码难度

XML有丰富的编码工具,比如Dom4j、Dom、SAX等,JSON也有提供的工具。无工具的情况下,相信熟练的开发人员一样能很快的写出想要的xml文档和JSON字符串,不过,xml文档要多很多结构上的字符。

JACKSON 的使用

​ 在 JDK 中并没有内置操作 JSON 格式数据的 API,因此使用处理 JSON 格式的数据需要借 助第三方类库。几个常用的 JSON 解析类库:

  1. Gson: 谷歌开发的 JSON 库,功能十分全面。
  2. FastJson: 阿里巴巴开发的 JSON 库,性能十分优秀。
  3. Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器”

Jackson 简介

Jackson 是一种解析 JSON 格式数据的 API,也是最流行,速度最快的 JSON API,最新版本是2.13.3,有3个jar包需要下载:

  1. jackson-core-2.13.3.jar(核心jar包)
  2. jackson-annotations-2.13.3.jar(提供Json注解支持)
  3. jackson-databind-2.13.3.jar(数据绑定,依赖于前两个包)

在项目中引入Jackson

image-20220621141708477

序列化

**使用Jackson把java对象转换成Json数据。**首先,创建TestBean.java

public class TestBean {
  //id
  private String id;
    //姓名
  private String name;
  //嵌套对象
  private List<Element> elements;

  public String getId() {
    return id;
   }

  public void setId(String id) {
    this.id = id;
   }

  public String getName() {
    return name;
   }

  public void setName(String name) {
    this.name = name;
   }

  public Elements getElements() {
    return elements;
   }

  public void setElements(Elements elements) {
    this.elements = elements;
   }
}

}

再创建Element.java

public class Element {
    //年龄
  private Integer age;
    //呢称
  private String ename;

  public Integer getAge() {
    return age;
   }

  public void setAge(Integer age) {
    this.age = age;
   }

  public String getEname() {
    return ename;
   }

  public void setEname(String ename) {
    this.ename = ename;
   }
}

把Java对象转成Json
Element element = new Element();
element.setAge(23);
element.setEName("java");
ObjectMapper objectMapper = new ObjectMapper();
String elementStr = objectMapper.writeValueAsString(element);
System.out.println(elementStr);

输出结果如下

{"age":23,"elName":"java"}

反序列化

把Json转成Java对象
String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements\":[{\"age\":22,\"elName\":\"xiaozhang\"},{\"age\":26,\"elName\":\"xiaosan\"}]}";
ObjectMapper objectMapper = new ObjectMapper();
TestBean testBean = objectMapper.readValue(str, TestBean.class);
System.out.println(testBean.toString());

输出结果如下:

TestBean(id=1, name=haha, elements=[Element(age=22, elName=xiaozhang), Element(age=26, elName=xiaosan)])

常用注解

  1. 将这个注解加载类上,不存在的字段将被忽略。

    @JsonIgnoreProperties(ignoreUnknown = true)
    
  2. 指定忽略字段

    @JsonIgnoreProperties({ “password”, “secretKey” })
    
  3. 标在字段上,将忽略此字段

    @JsonIgnore
    
  4. 标在时间字段上使用指定规则格式化(默认转化成时间戳)

    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
    
  5. 是否参与序列化

    JsonInclude.Include.NON_EMPTY:属性为空或者null都不参与序列化

    JsonInclude.Include.NON_NULL:属性为null不参与序列化

    @JsonInclude(参数)
    
  6. 标在字段上,指定序列化后的字段名

    @JsonProperty("firstName")
    
  7. 自定义某些类型字段的序列化与反序列化规则

    @JsonDeserialize(using= T extends JsonDeserializer.class)
    @JsonSerialize(using= T extends JsonSerializer.class)
    

Jquery 的 Ajax 使用

在这里插入图片描述

在 JQuery 中提供了对 Ajax 的封装,让我们在使用 Ajax 技术时变得更加容易。在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法,如:$.ajax()$.get()$.post()$.getJSON()

  • $.ajax()在异步请求中提交数据

$.ajax()方法中通过 data 属性来存放提交的数据,支持 JSON 格式的数据

1,提交普通格式数据

在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过 name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet中都是通过request.getParameter方法根据name获取value的。

通过 JavaScript 对象指定提交数据

data:{
  userid:100,
  username:"zhangsan"
}

2,提交 JSON 格式数据

$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交,通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。

data:JSON.stringify({name:value,name:value......})

在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

  • $.ajax()处理响应中的 JSON 格式数据

$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是 一个 JSON 格式的数据,那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是 JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。

  • $.get()的使用

$.get()方法是$.ajax()方法基于 get 方式发送异步请求的简化版。

语法

$.get(url,function(result))

$.get(url,"name=value&name=value",function(result))

$.get(url,data,function(result))

$.get(url,{userid:1,username:"zhangsan",...},function(result))
  • $.post()的使用

$.post()方法是$.ajax()方法基于 post 方式发送异步请求的简化版。

语法

$.post(url,function(result))

$.post(url,"name=value&name=value",function(result))

$.post(url,data,function(result))

$.post(url,{userid:1,username:"zhangsan",...},function(result))
  • $.getJSON()的使用

$.getJSON()方法是$.ajax()方法基于get方式发送异步请求,并将响应结果中JSON格式 的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格 式类型。$.getJSON()方法和 resp.setContentType("application/json")是一起使用的。

语法

$.getJSON(url,function(result))

$.getJSON(url,"name=value&name=value",function(result))

$.getJSON(url,data,function(result))

$.getJSON(url,{userid:1,username:"zhangsan",...},function(result))

serialize()方法的使用

将form 表单中的数据自动拼接成 name=value&name=value 结构。

语法

var param = $("form").serialize();

param 的值为:name=value&name=value

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/178591.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务

本文收录于【#云计算入门与实践 - AWS】专栏中&#xff0c;收录 AWS 入门与实践相关博文。 本文同步于个人公众号&#xff1a;【云计算洞察】 更多关于云计算技术内容敬请关注&#xff1a;CSDN【#云计算入门与实践 - AWS】专栏。 本系列已更新博文&#xff1a; [ 云计算 | …

世微 dc-dc降压恒流 LED汽车大灯 单灯 14V5A 68W车灯驱动方案 AP5191

产品描述 AP5191是一款PWM工作模式,高效率、外围简单、外置功率MOS管&#xff0c;适用于4.5-150V输入的高精度降压LED恒流驱动芯片。输出最大功率150W&#xff0c;最大电流6A。AP5191可实现线性调光和PWM调光&#xff0c;线性调光脚有效电压范围0.55-2.6V.AP5191 工作频率可以…

Oracle与Redis Enterprise协同,作为企业缓存解决方案

来源&#xff1a;虹科云科技 虹科干货丨Oracle与Redis Enterprise协同&#xff0c;作为企业缓存解决方案 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 单独使用Oracle作为企业缓存数据库时&#xff0c;会出现哪些问题呢&#xff1f;使用Redis Enterprise与Oracle共…

基于STM32的手势识别算法研究与应用

基于STM32的手势识别算法在人机交互和智能设备控制中具有重要的应用价值。本文将介绍基于STM32的手势识别算法的研究原理和实现步骤&#xff0c;并提供相应的代码示例。 1. 手势识别概述 手势识别是一种通过分析人体的手部动作和姿势来识别和理解人的意图的技术。基于STM32的…

Jina AI 的 8K 向量模型上线 AWS Marketplace,支持本地部署!

在当前多模态 AI 和大模型技术风头正劲的背景下&#xff0c;Jina AI 始终领跑于创新前沿&#xff0c;技术领先。2023 年 10 月 30 日&#xff0c;Jina AI 隆重推出 jina-embeddings-v2&#xff0c;这是全球首款支持 8192 输入长度的开源向量大模型&#xff0c;其性能媲美 OpenA…

如何将设置为静态IP的VMware虚拟机进行克隆以便可以复刻相应的环境

一定要关闭需要克隆的虚拟机右键要选择克隆的虚拟机&#xff0c;选择管理->克隆&#xff0c;进入克隆虚拟机向导 设定克隆出来的虚拟机名称以及位置&#xff0c;选择完成 克隆完成之后将会生成虚拟机&#xff0c;示例中生成的虚拟机为ubuntu-dev2 因为原本的虚拟机为静态ip的…

Pytorch中的tensor维度理解

Pytorch中的tensor维度理解 文章目录 Pytorch中的tensor维度理解摘要打消心理恐惧&#xff0c;从三维学起三维tensor参考文献 摘要 面对pytorch编程中的tensor时&#xff0c;我不时会感到恐惧。对里面数据是怎么排布的&#xff0c;一直没有一个直观的理解。今天我想把这个事情…

微软离Altman越近,离OpenAI就越远!

大数据产业创新服务媒体 ——聚焦数据 改变商业 在OpenAI这场连续剧中&#xff08;之所以说是连续剧&#xff0c;这个事情肯定没完&#xff0c;后面肯定还会出续集&#xff09;&#xff0c;让我倍感意外的是&#xff0c;Altman刚跟OpenAI分手&#xff0c;“离婚手续”都还没办…

模拟量采集----测量输入的电流

生活中的模拟量有很多 大多都为电压信号和电流信号 今天讲如何测量输入的电流信号 通过欧姆定律可知 电流测量的测量&#xff1a;是将电流加载在固定阻值的电阻上&#xff0c;来测量这个电阻二端的电压 最后反算出电流的大小 所用的公式是IU/R 我们使用仿真软件来看测量…

连接k8s和凌鲨

通过连接k8s和凌鲨&#xff0c;可以让研发过程中的重用操作更加方便。 更新容器镜像调整部署规模查看日志运行命令 架构 所有操作通过k8s proxy连接&#xff0c;通过设置namespace label赋予访问权限。只有赋予特定label的namespace才能被访问。 使用步骤 部署k8s proxy 你…

深度学习图像修复算法 - opencv python 机器视觉 计算机竞赛

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步&#xff1a;将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

基于SSM的旅游管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

如何用java的虚拟线程连接数据库

我觉得这个很简单 首先确保你idea支持jdk21. 然后把idea编译成的目标字节码设置为21版本的 然后编写代码。 创建虚拟线程的方式有&#xff1a; Runnable runnable () -> {System.out.println("Hello, world!"); };// 创建虚拟线程 Thread virtualThread Thre…

likeshop单商户商城系统 任意文件上传漏洞复现

0x01 产品简介 likeshop单商户标准商城系统适用于B2C、单商户、自营商城场景。完美契合私域流量变现闭环交易使用。 系统拥有丰富的营销玩法&#xff0c;强大的分销能力&#xff0c;支持电子面单和小程序直播等功能。无论运营还是二开都是性价比极高的100%开源商城系统。 0x02…

【OpenCV实现图像:使用OpenCV生成拼图效果】

文章目录 概要通用配置不考虑间隔代码实现考虑间隔代码实现小结 概要 概要&#xff1a; 拼图效果是一种将图像切割为相邻正方形并重新排列的艺术效果。在生成拼图效果时&#xff0c;可以考虑不同的模式&#xff0c;包括是否考虑间隔和如何处理不能整除的部分。 不考虑间隔&a…

java代码调用twitter-api用例实战

一、申请twitter开发者账号 首先先申请twitter开发者免费的API&#xff0c;要填写申请的内容&#xff0c;放心大胆地写&#xff0c;申请完&#xff0c;会提供免费的API接口。 以下是我申请到的三个免费API 申请完开始进行测试调用。 读官方文档账户认证那块&#xff1a;https…

Python 2.7 在 Debian 服务器上获取 URL 时的 SSL 验证失败问题与解决方案

在使用Python的requests库从Debian稳定服务器上获取简单URL时&#xff0c;遇到了SSL证书错误。 根据用户的问题描述&#xff0c;您遇到了SSL证书验证失败的问题。 要解决这个问题&#xff0c;您可以采取以下步骤&#xff1a; 1. 升级到Python 2.7的最新版本&#xff1a; 首…

基于SSM的课程资源管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

5-6求1-20的阶乘和

#include<stdio.h> //求阶乘 int main(){int n;double sum0;//求和&#xff1a;一点一点加int t1;for (n1;n<15;n){tt*n;sumsumt;}printf("结果是&#xff1a;%22.15e \n",sum);return 0; }为啥最后是%22.15e呢&#xff1f; 因为这个求和的结果太大了 所以转…

git clone慢的解决办法

在网站 https://www.ipaddress.com/ 分别搜索&#xff1a; github.global.ssl.fastly.net github.com 得到ip&#xff1a; 打开hosts文件 sudo vim /etc/hosts 在hosts文件末尾添加 140.82.114.3 github.com 151.101.1.194 github.global-ssl.fastly.net 151.101.65.194 g…