Ajax

一、Ajax基础

（一）Ajax简介

概念：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
好处：通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
好处：
1、可以异步交互，进行局部网页的更新。
2、可以减少网络带宽对网页加载的影响。
3、ajax进行局部更新效率高，用户体验佳。

（二）原生JS实现Ajax请求：

javx的执行原理：https://www.runoob.com/ajax/ajax-tutorial.html
原理图：
实现步骤：
- 1、创建XmlHttpRequest 异步请求对象。
- 2、通过异步请求对象调用open方法发送请求。
  如果是post请求通过send来携带提交的数据
- 3、当请求提交之后处理一个准备事件，获取请求结束响应回来的状态
- 4、通过响应的状态码获取响应的结果。
- 5、从响应中获取响应回来的数据。
实现：
- 前端代码：

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>原生ajx</title></head><body><div><img alt="美女" src="data:image/aa.jpg" width="200px" height="300"></div>点赞：<button onclick="point(this)">0</button></body><script>function point(ob) {var num = ob.innerText;console.log(num);//1、创建一步请求对象var xmlhttp;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp = new XMLHttpRequest();} else {// IE6, IE5 浏览器执行代码xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2、发送请求到服务器xmlhttp.open("GET", "ajax?num=" + num + "&date=" + new Date(), true); //true是默认设置，表示异步交互xmlhttp.send(); //用于post发送数据//3、触发请求发送的准备事件xmlhttp.onreadystatechange = function() {//4、判断请求返回状态码if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//5、获取响应回来的数据ob.innerHTML = xmlhttp.responseText;}}}</script></html>

后台代码：

  package com.ujiuye.controller;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class JsAjaxServlet*/@WebServlet("/ajax")public class JsAjaxServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String num = request.getParameter("num");String date = request.getParameter("date");System.out.println(num + " : " + date);//点赞的逻辑if(num != null && num != "") {int nu = Integer.parseInt(num.trim());nu += 1;response.getWriter().println(nu);}else {System.out.println("num为空");response.getWriter().write(0+"");}            }protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");System.out.println("post请求");doGet(request, response);}}

（三）jQuery版Ajax

参考文档
- jquery1.8.3_api.chm
$.ajax({})
- 语法：$.ajax({
  url: “服务器地址”,
  method:“请求方法”,
  data:“查询参数”
  dataType:“返回数据类型”，
  async:“true”，// true表示异步
  success: function(html){ //ajax请求成功回调函数，回调函数括号中参数是响应回来的数据
  $("#results").append(html);
  }，
  error：function(error){ //异步请求失败的回调函数，error表示错误信息
  }
  });
  - 实例：
    - 前端js代码：
    - 后台：
- dataType：
  - “xml”: 返回 XML 文档，可用 jQuery 处理。很少使用
  - “html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
  - “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
  - “json”: 返回 JSON 数据。
  - “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  - “text”: 返回纯文本字符串，默认的返回数据类型
- data: 发送到服务器的数据。将自动转换为请求字符串格式，数据格式可以是"&foo=bar&foo=bar2" 或者是 {“key1：value1”,“key2”：“value1”,…}。对于第一种，也可以之间追加在url请求地址的后面，通过？来分隔查询参数。
- success: function(mess){}ajax请求成功的的回调函数。回调函数括号中的参数表示请求完成后台响应回来的数据。
- method: 发送请求的方式，取值get,post等，如果不指定默认get,
- 注意：
  - 1、括号中的参数是没有先后顺序的。
  - 2、参数名称是严格区分大小写。
  - 3、设置返回数据的数据类型的参数名为dataType，注意T是大写。
  - 4、最后参数的末尾不加逗号。
  - 5、字符串类型的参数需要加上引号。
$.get()
- 该种ajax是对原生的第二次封装，只能发送get请求
- 语法：.get(url, [data], [callback], [type])
  - url:待载入页面的URL地址,即请求发送的地址
  - data:待发送 Key/value 参数。
  - callback:载入成功时回调函数。
  - type:返回内容格式，xml, html, script, json, text, _default。
- 实例：
  - 1、引入jQuery.
  - 2、编写ajax函数
  - 3、后台接收请求的逻辑
  - get代码：
  - 后台代码：
$.getJSON()
- 语法：$.getJSON(url, [data], [callback])
  - url:发送请求地址。
  - data:待发送 Key/value 参数。
  - callback:载入成功时回调函数。
  - 实例：
  - 默认返回值类型为json
$.post()：
- 语法：$.post(url, [data], [callback], [type])
  - url:发送请求地址。
  - data:待发送 Key/value 参数。
  - callback:发送成功时回调函数。
  - type:返回内容格式，xml, html, script, json, text, _default。
  - 实例：
  - 将请求方式变成post
后台代码：
jQuery实现ajax总结：
- ajax和get/post、getJSON的区别：
  - 1、ajax函数中传递的是json对象，对象中参数的没有先后顺序的，而get、getJSON，post传递的参数是有顺序的。
  - 2、ajax是原生ajax的第一次封装，功能最全面，而get/getJSON，post是对原生js的二次封装，使用起来更简单。
  - 3、get和getJSON的区别是，get可以指定请求返回的数据类型，而getJSON返回数据的默认类型为JSON

二、JSON

（一）JSON简介:

概述：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
好处：
- 1、独立于编程，不受编程语言语法的限制，可以再多种语言之间做数据交换。
- 2、格式简介清晰，易于阅读和编写。
- 3、易于机器解析和生成，且可以提升网络传输效率。

（二）JSON应用

json格式的语法
- 组成： 1、[ ] {} ：，
  2、字符串
  3、数字
  4、字面量： true ，false ， null
- json对象的格式： {“name”: “John Doe”, “age”: 18, “address”: {“country” : “china”, “zip-code”: “10000”}}
- json数组对象：[3, 1, 4, 1, 5, 9, 2, 6]
- 数字： 45.6 或者56
- 字符串： “字符串”
json解析器：https://www.json.cn/
创建user的json对象：{“uid”:12,“password”:“12345”,“gender”:1,“birth”:“2020-08-24”}
- 前端解析json:
- 后台：
json格式的数组：[“王宝强”,“林志颖”,“林志玲”]
- 前端解析json
- 后台代码：
json对象中数据的获取：如果是json对象可以通过【.】点或者是 [] 来获取对象的值，其中点后面是对象的属性名，或者用中括号，括号中为字符串类型的属性名。

Json第三方解析工具

fastJson
- 阿里巴巴开源的一款json解析器，以快著称，但是在解析日期时会出现bug。
Gson
- Gson是谷歌开源的一款高效的json解析器。
jackson 解析工具
- jsckson 是是由开源社区贡献的一款实用最广的json解析器，引用量最多的json解析器。
jackson 解析器将java对象解析为json的步骤：
- 1、导包，三个jackson的jar.
- 2、创建json解析器的核心对象 ObjectMapper
- 3、将java对象解析为json格式字符串
- 4、将json格式字符串响应出去。
将javabean转json并解析：
- 前端：
- 后台代码：
将数组解析为json:
- 前端：
- 后台：
List集合的解析：
- 前端：
- 后台：
Map集合
- 前端
- 后台代码：

三、Ajax进阶

（一）Ajax同步与异步

1、对于ajax的同步，只有在如果后面的请求需要前面请求返回的是数据时，才会使用同步。
- 异步实例
  - 前端代码：

 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>java对象的json解析</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script></head><body><button onclick="getBean()">点我</button><table width="600px" border="1" cellspacing="0" align="center"><tr><th>编号</th><th>姓名</th><th>密码</th><th>性别</th><th>爱好</th><th>地址</th><th>生日</th><th>删除</th><th>修改</th></tr></table></body><script type="text/javascript">function getBean(){$.ajax({url:"jack?method=obj",method:"get",dataType:"json",async:true,success:function(data){console.log(1);}})$.ajax({url:"jack?method=arr",method:"get",dataType:"json",async:true,success:function(data){console.log(2);}})$.ajax({url:"jack?method=map",method:"get",dataType:"json",async:true,success:function(data){console.log(3);}   })}</script></html>

- 后台代码：

    package com.ujiuye.controller;import java.io.IOException;import java.util.ArrayList;import java.util.Date;import java.util.HashMap;import java.util.List;import java.util.Map;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 com.fasterxml.jackson.core.JsonGenerationException;import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.JsonMappingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.ujiuye.entity.User;@WebServlet("/jack")public class JackSonServlet extends HttpServlet {private static final long serialVersionUID = 1L;        @Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");resp.setCharacterEncoding("UTF-8");              String method = req.getParameter("method");if("obj".equals(method)) {Obj(req,resp);}else if("arr".equals(method)) {arr(req,resp);}else if("list".equals(method)) {list(req,resp);}else if("map".equals(method)) {map(req,resp);}else if("login".equals(method)) {login(req,resp);}}        private void login(HttpServletRequest req, HttpServletResponse resp) throws IOException {String name = req.getParameter("name");String password = req.getParameter("password");System.out.println(name + " : " + password);resp.getWriter().print("name");}private void map(HttpServletRequest req, HttpServletResponse resp) throws JsonGenerationException, JsonMappingException, IOException {Map<String,String> map = new HashMap<>();map.put("key1", "邓丽君");map.put("key2", "周杰伦");map.put("key3", "疼易迅");map.put("key4", "TFBOY");ObjectMapper om = new ObjectMapper();System.out.println(om.writeValueAsString(map));//第一个参数是响应对象获取输出流，第二个参数是解析的java对象om.writeValue(resp.getWriter(), map);}private void list(HttpServletRequest req, HttpServletResponse resp) throws IOException {List<User> uList = new ArrayList<>();uList.add(new User(1, "李四", "12345", 1, "打篮球,踢足球,打乒乓球", "北京", new Date()) );uList.add(new User(2, "李小龙", "125", 1, "功夫,打乒乓球", "北京", new Date()) );uList.add(new User(3, "甄子丹", "345", 1, "永春,打乒乓球", "香港", new Date()) );uList.add(new User(4, "成龙", "123456", 1, "醉拳,打乒乓球", "香港", new Date()) );uList.add(new User(5, "洪金宝", "345", 1, "螳螂腿,打乒乓球", "北京", new Date()) );           ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(uList);System.out.println(json);resp.getWriter().print(json);}       private void arr(HttpServletRequest req, HttpServletResponse resp) throws IOException {String[] st = {"小龙虾","帝王蟹","兔头","潴留"};ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(st);System.out.println(json);resp.getWriter().print(json);}        private void Obj(HttpServletRequest req, HttpServletResponse resp) throws IOException {User user = new User(1, "李四", "12345", 1, "打篮球,踢足球,打乒乓球", "北京", new Date());//创建jackson 的json 核心解析器对象ObjectMapper om = new ObjectMapper();//将java对象解析为json格式的字符串String json = om.writeValueAsString(user);System.out.println(json);//将json格式的字符串响应到客户端resp.getWriter().print(json);}         }

同步实例：
- 前端代码：

  <!DOCTYPE html><html><head><meta charset="UTF-8"><title>java对象的json解析</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script></head><body><button onclick="getBean()">点我</button><table width="600px" border="1" cellspacing="0" align="center"><tr><th>编号</th><th>姓名</th><th>密码</th><th>性别</th><th>爱好</th><th>地址</th><th>生日</th><th>删除</th><th>修改</th></tr></table></body><script type="text/javascript">function getBean(){ //同步按照编写顺序来执行$.ajax({url:"jack?method=obj",method:"get",dataType:"json",async:false,success:function(data){console.log(1);}})$.ajax({url:"jack?method=arr",method:"get",dataType:"json",async:false,success:function(data){console.log(2);}})$.ajax({url:"jack?method=map",method:"get",dataType:"json",async:false,success:function(data){console.log(3);} })}</script></html>

- 后台代码：

 package com.ujiuye.controller;import java.io.IOException;import java.util.ArrayList;import java.util.Date;import java.util.HashMap;import java.util.List;import java.util.Map;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 com.fasterxml.jackson.core.JsonGenerationException;import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.JsonMappingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.ujiuye.entity.User;@WebServlet("/jack")public class JackSonServlet extends HttpServlet {private static final long serialVersionUID = 1L;       @Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");resp.setCharacterEncoding("UTF-8");              String method = req.getParameter("method");if("obj".equals(method)) {Obj(req,resp);}else if("arr".equals(method)) {arr(req,resp);}else if("list".equals(method)) {list(req,resp);}else if("map".equals(method)) {map(req,resp);}else if("login".equals(method)) {login(req,resp);}         }       private void login(HttpServletRequest req, HttpServletResponse resp) throws IOException {String name = req.getParameter("name");String password = req.getParameter("password");System.out.println(name + " : " + password);resp.getWriter().print("name");}         private void map(HttpServletRequest req, HttpServletResponse resp) throws JsonGenerationException, JsonMappingException, IOException {Map<String,String> map = new HashMap<>();map.put("key1", "邓丽君");map.put("key2", "周杰伦");map.put("key3", "疼易迅");map.put("key4", "TFBOY");ObjectMapper om = new ObjectMapper();System.out.println(om.writeValueAsString(map));//第一个参数是响应对象获取输出流，第二个参数是解析的java对象om.writeValue(resp.getWriter(), map);}       private void list(HttpServletRequest req, HttpServletResponse resp) throws IOException {List<User> uList = new ArrayList<>();uList.add(new User(1, "李四", "12345", 1, "打篮球,踢足球,打乒乓球", "北京", new Date()) );uList.add(new User(2, "李小龙", "125", 1, "功夫,打乒乓球", "北京", new Date()) );uList.add(new User(3, "甄子丹", "345", 1, "永春,打乒乓球", "香港", new Date()) );uList.add(new User(4, "成龙", "123456", 1, "醉拳,打乒乓球", "香港", new Date()) );uList.add(new User(5, "洪金宝", "345", 1, "螳螂腿,打乒乓球", "北京", new Date()) );           ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(uList);System.out.println(json);resp.getWriter().print(json);}       private void arr(HttpServletRequest req, HttpServletResponse resp) throws IOException {String[] st = {"小龙虾","帝王蟹","兔头","潴留"};ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(st);System.out.println(json);resp.getWriter().print(json);}        private void Obj(HttpServletRequest req, HttpServletResponse resp) throws IOException {User user = new User(1, "李四", "12345", 1, "打篮球,踢足球,打乒乓球", "北京", new Date());//创建jackson 的json 核心解析器对象ObjectMapper om = new ObjectMapper();//将java对象解析为json格式的字符串String json = om.writeValueAsString(user);System.out.println(json);//将json格式的字符串响应到客户端resp.getWriter().print(json);}         }

（二）表单序列化

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<form action="user" id="form"><input type="hidden" name="mark" value="loginDo">姓名：<input type="text" name="name" ><br>密码：<input type="password" name="password"><br><input type="checkbox" name="rember" value="re" >记住用户名和密码<br><input type="button" value="登录" onclick="login()"><br>
</form>
</body>
<script type="text/javascript">function login(){//可以将form表单中数据拼接成查询参数，格式为mark=loginDo&name=%E6%9D%8E%E5%9B%9B&password=1234&rember=revar st = $("#form").serialize();console.log(st);console.log($("[name='mark']").val());$.getJSON("jack?method=login&"+st,function(data){console.log(data);})}
</script>
<script type="text/javascript">function login(){ //原生的方式将参数进行拼接console.log($("[name='mark']").val());$.getJSON("jack?method=login&mark=" + $("[name='mark']").val() + "&name=" + $("[name='name']").val() +"&password=" + $("[name='password']").val(),function(data){console.log(data);})}
</script></html>

使用传统方式获取表单数据
jQuery表单序列化获取数据：

Ajax基础,JSON,Ajax进阶相关推荐

购物车ajax php json,Ajax+json实现购物车结算
这次给大家带来Ajax+json实现购物车结算,Ajax+json实现购物车结算的注意事项有哪些,下面就是实战案例,一起来看一下. 全选商品单价数量小计操作全选删除选中产品总价:￥0 ...
ajax 循环json,Ajax 遍历json
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
网红快餐店_在一家快餐店工作解释了AJAX基础知识
网红快餐店 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 在一家快餐店工作解释了AJAX基础知识 (AJAX Basics Explained By Work ...
django - ajax发送json格式请求
一.业务场景如下很简单,哥就想实现一个登录,你去实现吧,那提到这个,我们会想到以下几点 1.前台,我要做一个登录业面 2.然后发送一个ajax请求 3.用户名密码一定是个表单,表单提交那是一个pos ...
Ajax基础和Json基础
AJAX: 1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML1. 异步和同步:客户端和服务器端相互通信的基础上* 客户端必须等待服务 ...
Java进阶学习第二十六天（JavaScript增强、AJAX基础）
一.JavaScript增强 1.什么是JavaScript ① 基于对象 JS本身就有一些现成的对象可供程序员使用,例如:Array.Math.String ② 事件驱动 JS代码写好后,需要外界触 ...
视频教程-Ajax从入门到进阶视频课程（通俗易懂）-JavaScript
Ajax从入门到进阶视频课程(通俗易懂) 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从 ...
Ajax与JSON的一些总结(转)
1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax ...
laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）
laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高优势:减轻数据库压力缺 ...

Ajax基础,JSON,Ajax进阶

Ajax

一、Ajax基础

（一）Ajax简介

（二）原生JS实现Ajax请求：

（三）jQuery版Ajax

二、JSON

（一）JSON简介:

（二）JSON应用

Json第三方解析工具

三、Ajax进阶

（一）Ajax同步与异步

（二）表单序列化

Ajax基础,JSON,Ajax进阶相关推荐

最新文章

热门文章