AJAX详解笔记

最新推荐文章于 2024-07-19 12:00:00 发布

weiweibbzm

最新推荐文章于 2024-07-19 12:00:00 发布

阅读量211

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/m0_73840003/article/details/127854621

版权

概念：

AJAX：异步的JavaScript和XML技术（XML已被JSON取代）

jQuery就是一个JS的框架

AJAX异步请求技术

JSON是一种数据表示方式

jQuery框架：

是一个封装JavaScript的框架技术，对JS中的一些常用的方法和行为进行了封装。所以本身是一个js文件

jQuery中的核心函数：jquery（）；

在这个函数中，可以使用三种函数：

1.选择器 2.HTML标签 3.函数（也就是jQuery中的新的语法格式）

通常使用$符号来代替jquery：jquery() ----> $()

选择器：jQuery的选择器与css选择器完全一样（作用：帮助找到对象）

$("#Id")表示在jQuery中找到对应的Id的标签对象

属性方法attr：

在jQuery中大量方法可以同时赋值与取值

$().attr("href"); 获取href属性的值

$().attr("href","abc"); 为href属性赋值

重点：attr方法可以获取我们自己定义的属性

<a id="first" href="www.baidu.com" stuId="33">baidu</a>

$("#first").attr("stuId") 我们可以正常获取到"33"

事件：

jQuery可以为页面元素添加事件绑定

<input type="checkbox" id="myace" >

<input type="checkbox" class="ace">

$("#myace").click(function(){

$(".ace").attr("checked",$(this).prop("checked"));

});

<html>

<head>

<meta charset="utf-8">

<title></title>

<script src="js/jquery-3.5.1.js"></script>

<script>

$(function(){

$(".dela").click(function(){

if(confirm("是否确认删除("+$(this).attr("goodsId")+")？")){

location.href="?goodsId="+$(this).attr("goodsId");

}

})

});

</script>

</head>

<body>

<A class="dela" goodsId="1">删除</A><br>

<A class="dela" goodsId="2">删除</A><br>

<A class="dela" goodsId="3">删除</A><br>

<A class="dela" goodsId="4">删除</A><br>

<A class="dela" goodsId="5">删除</A><br>

<A class="dela" goodsId="6">删除</A><br>

</body>

</html>

JSON：JavaScript对象表示法(JavaScript Object Notation)

是在JavaScript中用来表示一个对象的表示方式

在客户端与服务器之间进行数据传递

语法格式：是一种 K-V 的键值对映射的表示方式；就只有两个内容：JSON对象和JAON数组

JSON支持更多的数据类型，Value可以支持字符串，数值，对象，数组，ture，false，null

JSON对象：var jsonobj = {key:value，key:value};

JSON数组：var jsonArr = [{}，{}];

比较Java，XML，JSON

学员对象，有学号，姓名

1.Java类

class Stu{

private Integer stuId;

private String stuName;

}

Stu s1 = new Stu(1,”张三”);

Stu s2 = new Stu(2,”李四”);

List<Stu> stuList = new ArrayList<>();

2.XML

</stu>

</stu>

</stuList>

3.JSON

[{"stuId":1,"stuName":"张三"}，{"stuId":2,"stuName":"李四"}]

JS中使用JSON

var jsonobj = {"stuId":1 ,"stuName":"张三"};

alert(jsonobj.stuId);

jsonobj.stuName = "张三";

alert(jsonobj.stuName);

var jsonArr = [jsonobj,{"stuId":2 ,"stuName":"李四"}] ;

alert(jsonArr[1].stuName);

</script>

JSON字符串：是一个符合JSON格式的字符串（因为请求/响应只能是文本）

将一个JSON字符串转换成JSON对象

var jsonTxt = "{'stuId':1 ,'stuName':'张三'}" ;

var jsonobj = eval('('+jsonTxt+')');

JSON的依赖

jackson的注解

1.针对日期类型的注解：

@JsonFormat（pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8"）

2.针对二向映射的注解：

@JsonIgnore

AJAX : Asynchronous JavaScript And XML 。

异步的JavaScript 和 XML（JavaScript是语言，XML是数据传输的协议）

异步：A，B可以同时执行，相互不受影响（在线观看视频，可以发送弹幕）

同步：A，B必须一前一后执行，之间相互影响

异步请求：

AJAX的核心对象叫XHR：XmlHttpRequest

异步就是在不影响当前浏览器页面的情况下，使用JavaScript的xhr对象向服务器发送请求；同样由JavaScript的xhr对象接收服务器的响应，xhr对象接收响应后，可以通过执行JavaScript脚本来影响HTML页面，以实现局部刷新，达到异步请求

执行流程：

1.由HTML页面元素触发事件调用脚本

2.由JS中的xhr对象向服务器发送异步请求

3.服务器将响应发送给JS中的xhr对象

4.由xhr对象调用JS的函数（回调函数）实现影响HTML页面元素

jQuery框架的ajax请求：jQuery框架中针对ajax请求进行了封装

$.ajax({参数设置})；

参数设置：

data：发送到服务端的数据 data：{"username":"zhangsan"，"age":25}

dataType：相应的数据类型 dataType:xml / json

success(data,textStatus,jqXHR) 表示成功时回调的函数

type 表示请求的方式 get / post

url 表示请求的地址

weiweibbzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX详解笔记

AJAX详解笔记： AJAX：异步的JavaScript和XML技术（XML已被JSON取代） jQuery就是一个JS的框架 AJAX异步请求技术 JSON是一种数据表示方式
复制链接

扫一扫