JavaWeb学习总结_ajaxJson

最新推荐文章于 2023-05-25 14:56:48 发布

零零猪

最新推荐文章于 2023-05-25 14:56:48 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/weixin_42062397/article/details/83617309

版权

1.Ajax概述

什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

Ajax的运行原理:

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能

2.Json数据格式

json是一种与语言无关的数据交换的格式，作用：

使用ajax进行前后台数据交换

移动端与服务端的数据交换

两种格式：

对象格式：{"key1":obj,"key2":obj,"key3":obj...}

例如：user对象用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京","account":{"money":32000,"name":"zs"}}

数组/集合格式：[obj,obj,obj...]

例：List<Product> 用json数据格式表示

[{"pid":"10","pname":"小米4C"},{},{}]

注意：对象格式和数组格式可以互相嵌套，json的key是字符串 json的value是Object

demo:

3.Jquery的Ajax技术

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种

（1）$.get(url, [data], [callback], [type])

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）

常用的返回类型：text、json、html等

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js">
	
</script>
<script type="text/javascript">
	//get方式的异步请求
	function fn1() {
		$.get(
			"/day22/ajaxServlet", //url地址
			{
				"name" : "张三",
				"age" : 21
			},//请求的参数
		function(data) { //执行成功后的回调函数
			alert(data)
		}, 
		"text" //返回内容格式

		);
	}
</script>

</head>
<body>
	<input type="button" value="get方式的异步" onclick="fn1()">
	<br>
	<input type="button" value="post方式的异步" onclick="fn2()">

</body>
</html>

package com.shenhesoft;

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


public class AjaxServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		System.out.println(name+age);
		response.getWriter().write(name+"---"+age);
	}

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

}

（2）$.post(url, [data], [callback], [type])

（3）$.ajax( { option1:value1,option2:value2... } );

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

demo

零零猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习总结___ajax__Json

1.Ajax概述什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死Ajax的运行原理:页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到...
复制链接

扫一扫