AJAX_json笔记

最新推荐文章于 2020-12-22 18:53:30 发布
最新推荐文章于 2020-12-22 18:53:30 发布
阅读量105 收藏
点赞数
分类专栏： 笔记 文章标签： ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LUSHIJIE__/article/details/109721487
版权
本文详细介绍了AJAX技术，包括其概念、原生JavaScript和jQuery的实现方式，以及JSON的数据格式和在数据传输中的作用。通过示例代码展示了如何使用AJAX进行异步请求，并探讨了JSON在前后端数据交互中的重要性。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、AJAX是什么？

示例：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

二、使用方法

1.原生js实现

代码如下（示例）：

html页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            //w3c上复制的

            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
                open方法参数：
                    1.请求方式：POST、GET
                        GET方式：请求参数值URL后面拼接，send方法为空参
                        POST方式：请求参数在send方法中定义
                    2.请求的URL；
                    3.同步或异步请求：true(异步)、false(同步)；
                        区别：“同步”请求需要等待服务器响应后才能执行
                              “异步”请求不需要等待服务器响应
            */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            /*
            若为post请求则写这些。
            //2.建立连接
            xmlhttp.open("POST","ajaxServlet",true);
            //3.发送请求
            xmlhttp.send("username=tom");
            */

            //4.接受并处理来着服务器的响应结果
            //当服务器响应完成后触发（readyState就绪状态）
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    alert(xmlhttp.responseText);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();"/>
    <input />
</body>
</html>

servlet端

package com.fjut.web.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.获取请求参数
        String username = request.getParameter("username");
        //2.打印username
        System.out.println(username);
        //3.响应
        response.getWriter().write("hello"+username);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

2.JQuery实现方式

1.$.ajax 代码如下（示例）：

//语法：$.ajax({键值对});
				 //使用$.ajax()发送异步请求
		            $.ajax({
		                url:"ajaxServlet1111" , // 请求路径
		                type:"POST" , //请求方式
		                //data: "username=jack&age=23",//请求参数
		                data:{"username":"jack","age":23},
		                success:function (data) {
		                    alert(data);
		                },//响应成功后的回调函数
		                error:function () {
		                    alert("出错啦...")
		                },//表示如果请求响应出现错误，会执行的回调函数
		
		                dataType:"text"//设置接受到的响应数据的格式
		            });

2.$.get 代码如下（示例）：

/* 语法：$.get(url, [data], [callback], [type])
					* 参数：
						* url：请求路径
						* data：请求参数
						* callback：回调函数
						* type：响应结果的类型
*/
$.get(
                "ajaxServlet",
                {username:"rose"},
                function (data) {
                    alert(data);
                },
                "text"
            );

3.$.post 代码如下（示例）：

$.post(
                "ajaxServlet",
                {username:"rose"},
                function (data) {
                    alert(data);
                },
                "text"
            );

2.JSON

JSON(javascript Object Notation)-------->javascript对象表示法
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。

//json表示方法
var p = {"username":"张三","age":23,"gender":"男"};

  1. 语法：
    1. 基本规则
    * 数据在名称/值对中：json数据是由键值对构成的
    * 键用引号(单双都行)引起来，也可以不使用引号
    * 值得取值类型：
    1. 数字（整数或浮点数）
    2. 字符串（在双引号中）
    3. 逻辑值（true 或 false）
    4. 数组（在方括号中） {“persons”:[{},{}]}
    5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
    6. null
    * 数据由逗号分隔：多个键值对由逗号分隔
    * 花括号保存对象：使用{}定义json 格式
    * 方括号保存数组：[]
    2. 获取数据:
    1. json对象.键名
    2. json对象[“键名”]
    3. 数组对象[索引]
    4. 遍历
    //1.定义基本格式
    var person = {“name”: “张三”, age: 23, ‘gender’: true};

     	        var ps = [{"name": "张三", "age": 23, "gender": true},
 	            {"name": "李四", "age": 24, "gender": true},
 	            {"name": "王五", "age": 25, "gender": false}];
 	
 	
 	
 	
 	        //获取person对象中所有的键和值
 	        //for in 循环
 	       /* for(var key in person){
 	            //这样的方式获取不行。因为相当于  person."name"
 	            //alert(key + ":" + person.key);
 	            alert(key+":"+person[key]);
 	        }*/
 	
 	       //获取ps中的所有值
 	        for (var i = 0; i < ps.length; i++) {
 	            var p = ps[i];
 	            for(var key in p){
 	                alert(key+":"+p[key]);
 	            }
 	        }

  1. JSON数据和Java对象的相互转换

     * JSON解析器：
 	* 常见的解析器：Jsonlib，Gson，fastjson，jackson
 
 1. JSON转为Java对象
 	1. 导入jackson的相关jar包
 	2. 创建Jackson核心对象 ObjectMapper
 	3. 调用ObjectMapper的相关方法进行转换
 		1. readValue(json字符串数据,Class)
 2. Java对象转换JSON
 	1. 使用步骤：
 		1. 导入jackson的相关jar包
 		2. 创建Jackson核心对象 ObjectMapper
 		3. 调用ObjectMapper的相关方法进行转换
 			1. 转换方法：
 				* writeValue(参数1，obj):
                     参数1：
                         File：将obj对象转换为JSON字符串，并保存到指定的文件中
                         Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                         OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                 * writeValueAsString(obj):将对象转为json字符串

 			2. 注解：
 				1. @JsonIgnore：排除属性。
 				2. @JsonFormat：属性值得格式化
 					* @JsonFormat(pattern = "yyyy-MM-dd")

 			3. 复杂java对象转换
 				1. List：数组
 				2. Map：对象格式一致

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

LUSHIJIE__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springcloud学习
LUSHIJIE__的博客
02-25 1263
springcloud 一、springcloud和springboot的关系 springboot专注于快速方便的开发单个个体微服务。 springCloud是关注全局的微服务线条整理治理框架，他将springboot开发的一个个单体微服务整合并管理起来，为各个微服务之间提供：配置管理，服务发现，断路器，路由，微代理，事件总线，全局锁，决策竞选，分布式会话等等集成服务。 springboot可以离开springcloud独立使用，开发项目，但是springcloud离不开springboot，属于依
Ajax基础学习笔记
ZJia_X的博客
11-13 166
一、Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。 二、实现步骤 //1.创建Ajax对象 var xhr = new XMLHttpRequest(); //2.告诉Ajax请求地址以及请求方式 xhr.open('get','http://www.baidu.com'); //3.发送请求 xhr.send(); //4.获取服务器端给予客户端的响应数据 xhr.onload = function(){
原生JS写Ajax的请求函数
没做过产品的后端不是个好前端
11-12 193
本文主要介绍了如何通过原生JavaScript封装ajax请求，文中给出了具体的实现代码和详细的解释，希望对你有所帮助。一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象； ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 ajax({ url: "./TestXHR.aspx", //请..
原生Ajax使用笔记---get和post方法，url传参
Jeffrey的博客
11-29 441
AJAX是Asynchronous Javascript And XML（异步JavaScript和XML）的缩写，用于创建快速动态网页的技术。AJAX的核心对象是XMLHttpRequest ，在每个浏览器中都有。 原生Ajax的使用步骤： 创建一个核心对象XMLHttpRequest 编写一个回调函数 编写请求方式和请求路径（open操作） 发送请求（send操作） JSP页面和原生...
Vue第四天笔记
weixin_44235471的博客
10-13 520
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
原生的AJAX——0624笔记整理
张静的博客
06-28 250
原生ajax相关内容，同步异步，cros跨域，jsonp跨域。 一、什么是AJAX AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（局部刷新技术） AJAX 和请求数据有关。 AJAX = 异步 JavaScript 和 XML（XML也是一种树形结构文档，写法和html写法一致，写的标签是自定义的标签）。 是一种用于创建快速动态网页的技术。 AJAX 通过在后台与服务器进行少量数据交换，返回到前端，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行
JSON_ajax笔记2
08-08
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，设计... 这些是JSON和AJAX的基本概念及使用方法，它们共同构成了Web应用程序中数据交互的重要组成部分，使得用户可以享受到更流畅、更动态的网页体验。
JSON_ajax笔记1
08-08
在实际开发中，JSON与AJAX（Asynchronous JavaScript and XML）结合使用，允许Web应用在不刷新整个页面的情况下与服务器进行异步通信。AJAX通过XMLHttpRequest对象实现，可以发送HTTP请求并接收响应，通常接收的数据...
Ajax&Json笔记
03-28
在Ajax应用中，JSON经常被用作数据交换格式，因为它能直接被JavaScript解析，不需要额外的解析库。当一个Ajax请求发送到服务器时，服务器端处理请求并返回JSON格式的数据。JavaScript的XMLHttpRequest对象接收到这些...
Ajax和Json的笔记
最新发布
03-06
Ajax和Json的笔记
Ajax_JQuery笔记.rar
03-12
3. **$.getJSON()**：专门用于发送JSON格式的GET请求，返回的数据会自动被解析为JavaScript对象。 4. **$.load()**：用于加载远程HTML片段，并将其插入到指定的DOM元素中，常用于页面部分内容的动态加载。 **三、...
原生ajax基础知识笔记
weixin_30300523的博客
07-03 98
原生ajax基础知识笔记 1、创建 XMLHttpRequest 对象 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject。 代码示例: // Creates a X...
Spring Boot学习
LUSHIJIE__的博客
12-22 850
Spring Boot 文章目录Spring Boot一、Spring Boot简介1.Spring Boot的特点2.SpringBoot的核心功能二、快速入门1.创建maven工程（普通maven工程就可以）2.添加SpringBoot的起步依赖3.编写SpringBoot的引导类4.测试结果5.编写Controller类6.运行结果三、SpringBoot的热部署四、springBoot整合Mybatis（注解）1.添加必要的起步依赖2.向springBoot的配置文件中添加连接数据库的信息3.创建数
spring配置类和xml的案例理解
LUSHIJIE__的博客
11-22 799
spring 文章目录spring一、spring配置类的注解（作用替代主xml的内容）二、测试类变化1.获取容器类变化二、spring整合junit来实现去掉重复的获取核心容器和业务层对象的内容。解决总结 一、spring配置类的注解（作用替代主xml的内容） //注解： @Configuration： 作用：用于指定当前类是一个配置类 使用位置：当前类之前 例：@Configuration public class springConfiguration{}
Hibernate学习
LUSHIJIE__的博客
12-21 664
Hibernate学习 文章目录Hibernate学习一、Hibernate体系结构的要素1.会话工厂(SessionFactory)2. 会话(Session)3.事务(Transaction)4.连接提供者(ConnectionProvider)5.事务工厂(TransactionFactory)二、入门案例1.创建maven工程并导入所需依赖2.编写核心配置文件（hibernate.cfg.xml）3.编写实体类和映射配置文件4.编写实体类和通过注解实现5.注意错误6.测试CRUD 一、Hiber
spring增删改查案例（用spring的内容和JdbcTemplate和Druid相关知识实现）
LUSHIJIE__的博客
11-21 548
springIoc案例 文章目录springIoc案例一、第一步——配置jar包的坐标二、写包结构三、搭建springIoc开发环境——编写xml文件写测试（查看代码是否可用）使用注解的方式：***总结 一、第一步——配置jar包的坐标 <packaging>jar</packaging> <dependencies> <dependency> <groupId>org.springframe
echart学习-1
LUSHIJIE__的博客
12-14 440
echart学习 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录echart学习一、ECharts是什么？二、下载ECharts三、入门案例四、效果图 一、ECharts是什么？       ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动
ssm整合实现zTree异步加载
LUSHIJIE__的博客
12-14 298
系列文章目录 文章目录系列文章目录前言一、什么是异步加载树？二、如何实现异步加载树效果图：案例1.创建数据库2.创建maven工程2.1.依赖2.2.搭建环境持久层代码业务层代码web层代码界面代码总结 前言 学习到zTree时，在实现异步加载树的时候有点疑问，最后解决了。记录一下，希望能帮助到刚刚接触到zTree的同学学习。 提示：以下是本篇文章正文内容，下面案例可供参考 一、什么是异步加载树？       异步加载树：是指在一开始的时候只
Mybatis学习-1
LUSHIJIE__的博客
11-24 272
Mybatis环境搭建 文章目录Mybatis环境搭建一、mybatis的环境搭建二、入门案例1.基于配置XML实现2.基于注解二、mybatis的CRUD操作三、mybatis中的事务（面试问题）1.什么是事务2.事务的四大特性ACID3.不考虑隔离性会产生的3个问题4.解决办法：四种隔离级别总结 一、mybatis的环境搭建       第一步：创建maven工程并导入坐标。      &n
Servlet与JSP基础教程：包括Ajax和JSON
"这是一份关于JSP、Servlet和JSON的学习笔记，主要涵盖了这些技术的基础概念、开发实践以及相关的重要知识点，适合初学者和进阶者参考。" 在JSP和Servlet的学习中，首先理解架构是至关重要的。传统的C/S（Client/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值