Ajax基础

最新推荐文章于 2023-11-20 21:35:13 发布

昫灬

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量106

点赞数

分类专栏：前端基础文章标签： Ajax

本文链接：https://blog.csdn.net/qq_42701294/article/details/99641417

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax基础

概念：（ASynchronous（异步的） JavaScript And XML）

异步与同步：客户端和服务器端相互通信的基础上
同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJax工作原理：

优点：

改善的用户体验
减少带宽的使用并增加速度
支持异步处理 等等

缺点：

浏览器不兼容-AJAX高度依赖JavaScript，而不同的浏览器对JavaScript支持性不同。这成了一个问题，尤其是当AJAX必须跨许多浏览器工作的时候。那些不支持JavaScript或者不支持JavaScript某些选项的浏览器将不能够正常使用ajax。
不安全性-ajax源代码是可读的，攻击者可以插入脚本
增加Web服务器的负载-如果你增加一个自动更新的功能，它每隔几秒向服务发起请求，那么就会增加服务器的负载。

实现Ajax的方式

原生JS实现
Jq方式实现

1. $.ajax({})

		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"//设置接受到的响应数据的格式
	            });

$.get():发送get请求

	* 语法：$.get(url, [data], [callback], [type])
		* 参数：
			* url：请求路径
			* data：请求参数
			* callback：发送成功时的回调函数
			* type：响应结果的类型：xml, html, script, json, text, _default

$.post():发送post请求

* 语法：$.post(url, [data], [callback], [type])
		* 参数：
			* url：请求路径
			* data：请求参数
			* callback：发送成功时的回调函数
			* type：响应结果的类型：xml, html, script, json, text, _default

注：如果要使用回调函数error，只能使用第一种$.ajax()

案例：Ajax提交Form表单

AJAX提交表单分为两种

无返回结果的，就是把表单数据直接提交给后台，让后台直接处理；最简单的就是$(“#formid”).submit();直接将form表单提交到后台。

返回有结果的，这种情况下，后台不管是执行成功还是失败，最终的信息都需要返回到前台。

第二种是使用最多的一种，因为程序的执行成功与否都需要给用户提示，程序一般也都是多步完成的，执行完插入操作，需要发起流程，这就需要在界面上判断成功与否。ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。

AJAX提交表单有返回结果的有两种实现方式

将form表单数据序列化 请求参数：data:$("#formid").serialize()
通过窗口查找form提交

注意：form表单都必须要有name属性，不然后台获取不到

提交表单演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax提交表单</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            //发送ajax请求
            //返回的数据：{"username":["小白"],"userage":["11"],"gender":["男"]}
           $.ajax({
               url: "userRegServlet",
               type: "POST",
               data: $("#formId").serialize(),  //序列化表单作为请求参数
               async: false,     //false:同步请求
               success: function (data) {
                   $("#tip").html("注册成功！欢迎您----"+data.username[0]);
               },
               error: function () {
                   alert("注册失败！");
               },
               dataType: "json"
           });
        });
    })
</script>

<style>
    #formDiv{
        margin-top:200px;
        text-align: center;
    }
</style>
<body>
<div id="formDiv">
    
    <form id="formId">
        姓名:<input type="text" name="username"><br>
        年龄:<input type="text" name="userage"><br>
        性别:<input type="text" name="gender"><br>
        <input type="button" value="注册" id="btn"><br>
    </form>
    <span id="tip"></span><br>
</div>
</body>
</html>

 后台：只是返回一下前台获取的数据
 
package com.servlet.test;

import com.fasterxml.jackson.databind.ObjectMapper;

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;
import java.util.Map;

/**
 * @author a_apple
 * @create 2019-08-15 9:46
 */
@WebServlet("/userRegServlet")
public class UserRegServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1，设置响应内容格式
        response.setContentType("application/json;charset=utf-8");
        //2,获取请求参数
        Map<String, String[]> map = request.getParameterMap();
        //3,转化为json
        ObjectMapper mapper = new ObjectMapper();
        String userJson = mapper.writeValueAsString(map);

        System.out.println(userJson);

        //4.把json写到响应流去
        mapper.writeValue(response.getWriter(),map);
    }

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