Ajax概述

最新推荐文章于 2023-10-24 12:10:49 发布

铲屎官白茶

最新推荐文章于 2023-10-24 12:10:49 发布

阅读量2.3k

点赞数 3

分类专栏： javaweb 文章标签： java

本文链接：https://blog.csdn.net/Lvruoyu/article/details/123900688

版权

javaweb 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

Ajax

在Web开发中，Ajax技术可以实现页面的局部更新，数据异步交互的方式给用户带来了更好的使用体验。使用JavaScript可以实现Ajax操作，但使用JavaScript实现Ajax操作不仅代码复杂，还需要考虑浏览器的兼容问题，给开发人员带来了不便。jQuery对JavaScript进行了二次封装同时也对Ajax的操作重新进行了整理与封装，简化了Ajax的使用。

01. Ajax概述

Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技术，该技术是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步请求。

传统请求方式每次发出请求都会请求一个新的页面，即使刷新页面也要重新请求加载本页面。

在这里插入图片描述

Ajax异步请求方式不向服务器发出请求，会得到数据后再更新页面（通过DOM操作修改页面内容），整个过程不会发生页面跳转或刷新操作。

在这里插入图片描述

传统请求方式和Ajax异步请求方式区别

比较方式	遵循的协议	请求发出方式	数据展示方式
传统方式	HTTP	页面链接跳转发出	重新载入新页面
Ajax异步方式	HTTP	由XMLHttpRequest实例发出请求	JavaScript和DOM技术把数据更新到本页面

相较于传统请求方式，Ajax异步请求的优势
	请求数据量少 >> Ajax请求只需要得到必要数据，对不需要更新的数据不作请求，所以数据量少，传输时间较短。
	请求分散  >> Ajax是按需请求，请求是异步形式，可在任意时刻发出，所以请求不会集中爆发，一定程度上减轻了服务器的压力，响应速
度也比较快。
	用户体验优化  >> Ajax数据请求响应时间短、数据传送速度快已经很大程度提升了用户的使用体验。又由于Ajax是异步请求，不会刷新页
面，使得页面上用户行为得到了有效保留。

02. jQuery框架

要实现Ajax异步刷新就需要使用到JavaScript和DOM技术，但使用JavaScript实现Ajax异步刷新比较复杂，而且需要考虑到跨域等问题，因此，人们在Web项目开发过程中提供了很多框架，对Ajax做了一系列封装简化，使操作更方便快捷。其中，最常用的框架为jQuery

jQuery是一款跨浏览器的开源JavaScript库，它的核心理念是write less，do more（写的更少，做的更多）。通过对JavaScript代码的封装，jQuery使得DOM、事件处理、Ajax等功能的实现代码更加简洁，有效提高了程序开发效率。下面介绍jQuery的具体使用方法，包括下载和引入jQuery文件。

jQuery

在这里插入图片描述

01. 引入jQuery

在项目中引入jQuery时，只需要把下载好的jQuery文件保存到项目的web目录中，在项目的HTML或jsp文件中使用

<!-- 引入本地下载的jQuery -->
<script src="jquery-1.6.1.js"></script>

02. jQuery的常用操作

jQuery的常用操作包括选择器的使用、元素对象的操作、事件的绑定、链式编程等。

选择器的使用
jQuery选择器用于获取网页元素对象。jQuery选择器以“$”符号开头，示例代码如下。
<div id="myId"></div>
<script>
    $('#myId'); 	// 获取id值为myId的元素对象
</script>
元素对象的操作
jQuery中对获取的元素对象可以进行一系列的操作，如元素的取值、赋值、属性的设置等，示例代码如下。
<div id="myId">content</div>
<script>
    // ① 获取元素的内容
    var html = $('#myId').html();
    alert(html);			// 输出结果：content
    // ② 设置元素的内容
    $('#myId').html('Hello');	// 执行后，网页中元素的内容变为Hello
</script>
事件的绑定

在jQuery中，事件一般直接绑定在元素上。例如，为指定元素对象绑定单击事件，示例代码如下。
<button>say hello</button>
<script>
    //为button元素绑定单击（click）事件，参数是事件的处理程序
    $('button').click(function() {
        alert('Hello');
    });
</script>
链式编程

jQuery中支持多个链式编程方法，在完成相同功能的情况下，开发者可以编写最少的代码。多个方法链式调用的示例代码如下。
<ul>
    <li>0</li> <li>1</li>
    <li>2</li> <li>3</li>
</ul>
<script>
    //多个方法链式调用，将ul中索引为2的li元素的内容设置为Hello
    $('ul').find('li').eq(2).html('Hello');
</script>

03. jQuery中的load()方法

由于使用XMLHttpRequest对象发送Ajax请求操作较为繁琐，因此jQuery对这些操作做了一系列的封装简化，提供了一系列向服务器请求数据的方法。jQuery提供的方法大致可分为两类，一类是用于发送请求的 $. g e t () 方法和$ .post()方法；另一类是用于获取不同格式数据的 $. l o a d () 方法、$ .getJSON()方法和$.getScript()方法。

在jQuery的Ajax请求方法中，load()方法是最基本、最常用的方法之一，该方法可以请求HTML内容，并使用获得的数据替换指定元素的内容。load()方法基本语法格式如下所示: load(url,data,callback)

参数	描述
url	必需，指定加载资源的路径
data	可选，发送至服务器的数据
callback	可选，请求完成时执行的函数

load()方法的用法很多，下面介绍几种常见用法。

请求HTML文件

load()方法最基本的用法是远程请求某个页面文件内容（如JSP、HTML），并将获取到的内容插入到本页面某部分。

<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script type="text/javascript">
    $('#btn').click(function() {
        $('#box').load('http://localhost:8080/chapter12/target.jsp');
    });
</script>
</body>

<body>
<h3>静夜思</h3>
<h6>唐 李白</h6>
<pre>
  床前明月光，
  疑似地上霜。
  举头望明月，
  低头思故乡。
</pre>
</body>

在这里插入图片描述

<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        $('#box').load('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',
            {username: 'itcast', password: 123});
    });
</script>

</body>
</html>

package com.miao;

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(name = "Load2Servlet", value = "/Load2Servlet")
public class Load2Servlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //获取load2.jsp页面的username与password值
        String username=req.getParameter("username");
        String password=req.getParameter("password");
        resp.getWriter().println("注册成功！<br/>用户名： "+username+"<br/>密码："+password);

    }
}

在这里插入图片描述

回调函数

load()方法的第3个参数是回调函数，该函数在请求数据加载完成后执行。回调函数用于获取本次请求的相关信息，它有3个默认参数，分别表示响应数据、请求状态和XMLHttpRequest对象。
其中，请求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（解析错误）。
<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#box').load('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',
        {username: 'itcast', password: 123},
        function(responseData, status, xhr){
            console.log(responseData);	// 输出请求的数据
            console.log(status);		// 输出请求状态
            console.log(xhr);		// 输出XMLHttpRequest对象
        })

</script>

</body>
</html>

04. 发送GET和POST请求

浏览器向服务器发送的请求包括GET请求和POST请求，为此，jQuery提供了 $. g e t () 方法和$ .post()方法，分别用于发送GET请求和POST请求。

$.get()方法
jQuery中的$.get()方法，用于向服务器发送GET请求，语法格式如下。
$.get(url,data,function(data, status, xhr),dataType)
由上述语法可知，get()方法是jQuery的静态方法，由“ $” 对象直接调用。$ .get()方法的参数含义如下表所示。

参数描述
url 必须，规定加载资源的路径
data 可选，发送至服务器的数据
function(data, status, xhr) 可选，请求成功时执行的函数data表示从服务器返回的数据status表示请求的状态值xhr表示当前请求相关的XMLHttpRequest对象
dataType 可选，预期的服务器响应的数据类型（ xml、html、text、script、json、jsonp）
<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        $.get('http://localhost:8080/ServletDemo01_war_exploded/jsp/target.jsp', function(data) {
            $('#box').html(data);
        }, 'html');
    });
</script>

</body>
</html>

参数	描述
url	必须，规定加载资源的路径
data	可选，发送至服务器的数据
function(data, status, xhr)	可选，请求成功时执行的函数data表示从服务器返回的数据status表示请求的状态值xhr表示当前请求相关的XMLHttpRequest对象
dataType	可选，预期的服务器响应的数据类型（ xml、html、text、script、json、jsonp）

<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        var userData = {username: 'itcast', password: 123};
        $.get('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData,
            function(data) {$('#box').html(data);}, 'html');
    });
</script>

</body>
</html>

在这里插入图片描述

$.post()方法
在jQuery中，发送GET请求调用 $. g e t () 方法，发送 P O S T 请求调用$ .post()方法，两个方法使用方式完全相同，替换两者的方法名就可以在GET请求和POST请求方式之间切换。
<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        var userData = {username: 'itcast', password: 123};
        $.post('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData,
            function(data) { $('#box').html(data); }, 'html');
    });
</script>


</body>
</html>
<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
    $('#btn').click(function() {
        var userData = {username: 'itcast', password: 123};
        $.post('http://localhost:8080/ServletDemo01_war_exploded/Load2Servlet',userData,
            function(data) { $('#box').html(data); }, 'html');
    });
</script>


</body>
</html>

03. JSON数据格式

JSON是一种存储key/value（键值对）数据的格式，类似于JavaScript的对象格式。它的优势在于数据能被处理成对象，方便获取信息字段。JSON的数据格式如下所示。

[
    {
		"name": "Java基础",
		"author": "猫猫",
		"price": "¥78.20"
	}, {
		"name": "Java进阶",
		"author": "猫猫",
		"price": "¥39.50"
	}
]

JSON数组数据都存储在一对[]中，在[]中，每一组数据用一对{}括起来，多个组之间用“,”分隔。需要注意的是，如果value是String类型的话必须用双引号引起来，如果是value是number、object、boolean和数组的话可以不使用双引号。

package com.miao.pojo;

public class Book {
    private String name;
    private double price;
    private String auther;

    public Book() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getAuther() {
        return auther;
    }

    public void setAuther(String auther) {
        this.auther = auther;
    }
}

<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>

<button id="btn">加载数据</button>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>作者</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
</table>
<script type="text/javascript">
    $('#btn').click(function() {
        $.getJSON('http://localhost:8080/ServletDemo01_war_exploded/JSONServlet',
            function(data) {
                var html = '';
                for (var Book in data) {
                    html += '<tr>';
                    for (var key in data[Book]) {
                        html += '<td>' + data[Book][key] + '</td>';
                    }
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            });
    });
</script>
</body>
</html>

package com.miao;
import com.miao.pojo.Book;
import net.sf.json.JSONArray;
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.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "JSONServlet",urlPatterns = "/JSONServlet")
public class JSONServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
        //创建list集合
        List<Book> Books= new ArrayList<Book>();
        Book  b =new Book();
        b.setName("Java基础");
        b.setAuther("maomao");
        b.setPrice(78.20);
        Books.add(b);
        Book  b1 =new Book();
        b1.setName("Java进阶");
        b1.setAuther("maomao");
        b1.setPrice(68.20);
        Books.add(b1);
        //创建JSONArray对象
        JSONArray jsonArray=JSONArray.fromObject(Books);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonArray);
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse
            response) throws ServletException, IOException {
        doGet(request,response);
    }
}

在这里插入图片描述

04. Ajax的基础操作

在jQuery中，向服务器请求数据的方法有很多。其中，最基本的方法是$.ajax()， $.ajax()方法可以精确地控制Ajax请求。例如，在请求出错时执行某些操作，设置请求字符集和超时时间等。

$. a j a x () 方法是 j Q u e r y 中最底层的 A j a x 方法，前面讲解的$ .get()方法、 $. p o s t () 方法就是对$ .ajax()方法进一步的封装， $. g e t () 方法、$ .post()方法的实际封装代码如下。

jQuery.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }
        return jQuery.ajax({
            url: url, type: method, dataType: type, data: data, success: callback
        });
    };
});

$.ajax()方法可以实现所有关于Ajax的操作，其语法格式如下。

$.ajax(options)		    // 语法格式1
$.ajax(url,options)		    // 语法格式2

$.ajax()方法可设置的参数

参数	描述
url	请求地址，默认是当前页面
data	发送至服务器的数据
xhr	用于创建XMLHttpRequest对象的函数
beforeSend(xhr)	发送请求前执行的函数
success(result,status,xhr)	请求成功时执行的函数
error(xhr,status,error)	请求失败时执行的函数
complete(xhr,status)	请求完成时执行的函数（请求成功或失败时都会调用，顺序在success和error函数之后）
callback	请求完成时执行的函数

参数	描述
dataType	预期的服务器响应的数据类型
type	请求方式（GET或POST）
cache	是否允许浏览器缓存被请求页面，默认为true
cache	设置本地的请求超时时间（以毫秒计）
async	是否使用异步请求。默认为true
username	在HTTP访问认证请求中使用的用户名
password	在HTTP访问认证请求中使用的密码
contentType	发送数据到服务器时所使用的内容类型。默认为“application/x-www-form-urlencoded”

参数	描述
processData	是否将请求发送的数据转换为查询字符串。默认为true
context	为所有Ajax相关的回调函数指定this值
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据
global	是否为请求触发全局Ajax事件处理程序，默认为true
ifModified	是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false
traditional	是否仅在最后一次请求后，响应发生改变时才请求成功，默认为false
scriptCharset	请求的字符集

<%--
  Created by IntelliJ IDEA.
  User: maomao
  Date: 2022/4/1
  Time: 15:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                type:"post",				//提交方式
                url:'http://localhost:8080/ServletDemo01_war_exploded/AJAXServle',
                data:{
                    userName:  $("#userName").val(),
                    password:  $("#password").val()
                },              			//data中的内容会自动的添加到url后面
                dataType: "text",    		//返回数据的格式
                success:function(a){      	//请求成功后执行的函数
                    if(a=="true"){
                        $('#suss').html("登录成功!")
                    }else{
                        $('#suss').html("登录失败!")
                    }
                },
                error :function () {      	//请求失败后执行的函数
                    alert("请求失败");
                },
            });
        });
    });
</script>
</head>
<body>
<div>
    <div>
        <ul>
            <li>用户名：</li>
            <li><input id="userName" name="userName" type="text" /></li>
        </ul>
    </div>
    <div>
        <ul>
            <li>密码：</li>
            <li><input id="password" name="password" type="password"/></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><button>登录</button></li>
        </ul>
    </div>
    <div id="suss"></div>
</div>
</body>
</html>

package com.miao.pojo;

public class Book {
    private String name;
    private double price;
    private String auther;

    public Book() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getAuther() {
        return auther;
    }

    public void setAuther(String auther) {
        this.auther = auther;
    }
}

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

@WebServlet(name = "AJAXServle",value = "/AJAXServle")
public class AJAXServle extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        boolean flag = false;
        Map<String, String[]> parameterMap = req.getParameterMap();
        if ((req.getParameter("userName")).equals("maomao")
                && req.getParameter("password").equals("123")) {
            flag = true;            //登录成功标志
        } else {
            flag = false;
        }
        resp.setContentType("text/html;charset=utf-8");
        //使用PrintWriter方法打印登录结果
        PrintWriter out = resp.getWriter();
        out.print(flag);
        out.flush();
        out.close();
    }
}