Ajax概述

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 ( ) 方 法 和 .get()方法和 .get().post()方法;另一类是用于获取不同格式数据的 . l o a d ( ) 方 法 、 .load()方法、 .load().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 ( ) 方 法 和 .get()方法和 .get().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>

在这里插入图片描述

<%--
  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 请 求 调 用 .get()方法,发送POST请求调用 .get()POST.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 方 法 , 前 面 讲 解 的 .ajax()方法是jQuery中最底层的Ajax方法,前面讲解的 .ajax()jQueryAjax.get()方法、 . p o s t ( ) 方 法 就 是 对 .post()方法就是对 .post().ajax()方法进一步的封装, . g e t ( ) 方 法 、 .get()方法、 .get().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();
    }
}

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铲屎官白茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值