Ajax

最新推荐文章于 2022-07-14 16:20:54 发布

qq_42317239

最新推荐文章于 2022-07-14 16:20:54 发布

阅读量246

点赞数

分类专栏：语法基础文章标签： ajax js

本文链接：https://blog.csdn.net/qq_42317239/article/details/108116294

版权

语法同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

基础

78 篇文章 0 订阅

订阅专栏

Ajax 原理

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步
化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎
自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。
Ajax 其核心只有 JavaScript、XMLHTTPRequest 和 DOM，在旧的交互方式中,由用户
触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每
当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只
需从服务器端得到很简单的一个数据,都要返回一个完整的 HTML 页,而用户每次都要浪费
时间和带宽去重新读取整个页面。而使用 Ajax 后用户从感觉上几乎所有的操作都会很快响
应没有页面重载（白屏）的等待。

特点:局部刷新,异步访问.

问题: Ajax如何做到异步的?? 答:因为有ajax引擎参与,使得请求由一个变为多个

实现Ajax数据访问

//实现ajax业务调用,返回页面列表数据.
    @RequestMapping("/findAjax")
    @ResponseBody
    public List<User> findAjax(){

        return userMapper.selectList(null);
    }

编辑页面JS

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入JS函数类库 -->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    //让页面加载完成之后执行
	$(function(){

		//1.$.get("url地址","添加参数","回调函数","返回值结果类型 text/html/json....一般ajax会自动匹配.");
        $.get("/findAjax",function(data){
            //data = [{user},{user},{user}]  es6~jsp中冲突
            //需求: 将userList集合信息动态的添加到table中.

            var trs = null;
            $(data).each(function(index){
                //index代表循环遍历的下标从0开始
                var user = data[index];
                var id = user.id;
                var name = user.name;
                var age = user.age;
                var sex = user.sex;
                //最终需要在table中展现
                trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
            });

            //将结果追加到table中即可.
            $("#tab1").append(trs);
        });

		//2.$.post();
		//3.$.getJSON();
		//4.$.getScript();
		//5.$.ajax();  说明
		$.ajax({
		    type: "get",
            url: "/findAjax2",
            //data: {"id":"1","name":"tomcat"},
            data: "id=1&name=tomcat",
            success: function(data){
                alert("ajax调用成功!!!");
                alert(data);
            },
            async :  true,
            error :  function(data){
                alert("服务器异常,请稍后重试!!!!");
            }
		});

	})
</script>


<title>您好Springboot</title>
</head>
<body>
	<table id="tab1"  border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>学生信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th></th>
		</tr>
	</table>
</body>
</html>

JSON介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成

Object对象格式

例子: {“id”:“1”,“name”:“tomcat猫”}

数组格式
JSON: “[‘1’,‘2’,‘4’]”

JSON嵌套格式
{“id”:“1”,“name”:“tomcat猫”,“hobby”:[“吃汉堡”,“喝果汁”,“玩游戏”,“游戏十连胜”,“看美女”,{“身高”:“172”,“腿长”:“110”,“肤色”:“白里透红”}]}

关于ajax嵌套问题

原因:由于ajax嵌套执行时,可能会导致内层ajax数据没有办法刷新.所以一般的解决的方案就是将异步改为同步调用.

qq_42317239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

Ajax 原理Ajax 的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。Ajax 其核心只有 JavaScript、XMLHTTPRequest 和 DOM，在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求
复制链接

扫一扫