AJAX快速入门

时间 2021-08-12

标签 html java jquery ajax json 浏览器服务器异步 async ide 栏目 Ajax 繁體版

原文原文链接

01-AJAX快速入门-AJAX的介绍

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。html
自己不是一种新技术，而是多个技术综合。用于快速建立动态网页的技术。java
通常的网页若是须要更新内容，必需从新加载个页面。jquery
而 AJAX 经过浏览器与服务器进行少许数据交换，就可使网页实现异步更新。也就是在不从新加载整个页面的状况下，对网页的部份内容进行局部更新。ajax

02-AJAX快速入门-原生JS方式实现AJAX

代码实现json

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("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //模拟服务器处理请求须要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

html代码浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function() {
        //2.建立XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开连接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>

03-AJAX快速入门-原生JS实现AJAX的步骤详解

核心对象：XMLHttpRequest服务器

用于在后台与服务器交换数据。能够在不从新加载整个网页的状况下，对网页的某部分进行更新。异步
打开连接：open(method,url,async)async

method：请求的类型 GET 或 POST。ide

url：请求资源的路径。

async：true(异步) 或 false(同步)。
发送请求：send(String params)

params：请求的参数(POST 专用)。
处理响应：onreadystatechange

readyState：0-请求未初始化，1-服务器链接已创建，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。

status：200-响应已所有 OK。
得到响应数据形式

responseText：得到字符串形式的响应数据。

responseXML：得到 XML 形式的响应数据。

04-AJAX快速入门-jQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式能够是key=value，也能够是 js 对象。
- callback：当请求成功后的回调函数，能够在函数中编写咱们的逻辑代码。
- type：预期的返回数据的类型，取值能够是 xml, html, js, json, text等。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的GET方式实现AJAX
        $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

05-AJAX快速入门-jQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式能够是key=value，也能够是 js 对象。
- callback：当请求成功后的回调函数，能够在函数中编写咱们的逻辑代码。
- type：预期的返回数据的类型，取值能够是 xml, html, js, json, text等。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

06-AJAX快速入门-jQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，能够是键值对形式，也能够是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值能够是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操做失败...");
            }
        });
    });
</script>
</html>

07-AJAX快速入门-AJAX快速入门的小结

**AJAX(Asynchronous JavaScript And XML)：**异步的 JavaScript 和 XML。
经过浏览器与服务器进行少许数据交换，就可使网页实现异步更新。也就是在不从新加载整个页面的状况下，对网页的部份内容进行局部更新。
同步和异步
- 同步：服务器端在处理过程当中，没法进行其余操做。
- 异步：服务器端在处理过程当中，能够进行其余操做。
GET 方式实现：$.get();
POST 方式实现：$.post();
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式能够是key=value，也能够是 js 对象。
- callback：当请求成功后的回调函数，能够在函数中编写咱们的逻辑代码。
- type：预期的返回数据的类型，取值能够是 xml, html, js, json, text等。
通用方式实现：$.ajax();
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，能够是键值对形式，也能够是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值能够是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。

1. Ajax快速入门
2. AJAX快速入门
3. ajax 快速入门
4. JQuery快速入门-Ajax
5. Ajax原理与快速入门案例
6. javascript快速入门22--Ajax简介
7. ES6快速入门 ES6 快速入门
8. 快速入门
9. Hadoop快速入门
10. Sqoop 快速入门
更多相关文章...
• SQL 快速参考 - SQL 教程
• Eclipse 快速修复 - Eclipse 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用