首页 > 编程语言> > JavaWeb复习巩固

JavaWeb复习巩固

2021-12-19 23:33:19 作者：互联网

第八天： ajax json ajax：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。同步请求：表单超链接特点：只要发送请求，整个页面内容都会重新加载，请求发送出去之后必须等待服务器响应回来之后才能继续操作。异步请求：特点：在请求响应的过程中浏览器能继续操作，不需要等待服务器响应请求响应回来之后不需要重新加载整个网页，实现网页的局部更新

Ajax实现

原始js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function createxmlhttp(){
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;

        }
        window.onload=function () {
            //点击事件
            document.getElementById("btn").onclick=function () {
                //请求参数如何被传递？    服务器响应内容如果被接收？
                //发送ajax（异步请求）请求步骤：
                //1.创建XMLHttpRequest对象
                var xmlhttp=createxmlhttp();
                //2.建立连接  里面参数：1.请求方式 2.请求的路径 3.判断是否是异步 true表是异步是真  false表示不是
                xmlhttp.open("GET","/tomcat/servletAJAXDemo1",true);
                //3.发送请求
                xmlhttp.send();

            }
        }
    </script>
</head>
<body>
<!--点击这个按钮无需加载整个网页就可以对局部或者部分进行刷新，将内容展现在下面的div中-->
<button id="btn">发送异步请求</button><br/>
<div></div>
</body>
</html>

package com.swlz.ajax;

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("/servletAJAXDemo1")
public class ServletAJAXDemo1 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        System.out.println("hi"+username);
        System.out.println("servletAJAXDemo1......被访问了哦。。。。。。。。。。。");
    }

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

jquery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        /**
         * 1.请求方式
         * 2.请求路径
         * 3.请求参数
         * 4.响应数据
         */
            $(function () {
               $("#btn").click(function () {
                  // $.get("/ajaxServlet","username=bianyiit")
                  $.get("/ajaxServlet",{username:"tom",password:"123"},function (data) {
                      $("#div1").html(data)
                  })
               });
                $("#btn1").click(function () {
                    $.post("/ajaxServlet",{username:"tom",password:"123"},function (data) {
                        $("#div1").html(data)
                    })

                });
            })
    </script>
</head>
<body>
    <button id="btn"> 发送get异步请求</button><br>
    <button id="btn1"> 发送post异步请求</button><br>
    <input type="text"> <br>
    <div id="div1">

    </div>
</body>
</html>

三种方式： $.ajax(); $.get(); $.post();

Jquery对象发送异步请求常用的三种方式 $.ajax $.post $.get

1.$.ajax是jquery发送异步请求的基本方式

$.ajax能够设置http请求的各种请求信息

2.$.get和$.post是基于$.ajax封装的更加简单的异步请求方式

$.get和$.post只能发送普通的表单类型请求

Json Json：JavaScript

1. Json基本介绍

javaScript对象表示法

JavaScript ：

ECMAScript(核心语法) + DOM(文档对象模型) + BOM（浏览器对象模型）

标签：function,异步,巩固,请求,get,发送,复习,ajax,JavaWeb
来源： https://www.cnblogs.com/lz-km/p/15709147.html