Ajax讲解-2021年1月1日讲课内容

Ajax

概述

Asynchronous JavaScript And XML 异步的 JavaScript 和 XML

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

可以明显地提升用户的体验而不需要去刷新整个页面。

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

原生 js 实现 Ajax【了解】

步骤

1.创建XMLHttpRequest对象
2.将状态触发器绑定到一个函数
3.使用open方法建立与服务器的连接
4.向服务器端发送数据
5.在回调函数中对返回数据进行处理

方法： open()，send() 

属性： 
onreadystatechange： 状态回调函数
responseText/responseXML： 服务器的响应字符串
status： 服务器返回的HTTP状态码
statusText： 服务器返回的HTTP状态信息  
readyState： 对象状态

客户端向服务器提交数据

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生Ajax测试</title>
</head>
<body>
    <input type="button" value="我是按钮" onclick="ajax()">
</body>
    <script>
        function ajax() {
            // 1.创建核心对象
            var xmlHttp;

            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlHttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 2.建立连接
            xmlHttp.open("GET", "ajax?username=易烊千玺&password=123456");

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

            // 4.接收并处理服务器发送的响应
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 5.获取响应结果
                    var response = xmlHttp.responseText;

                    // 弹窗
                    alert("访问成功" + response);
                }
            }
        }
    </script>
</html>

后端业务逻辑

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置编码集
        req.setCharacterEncoding("UTF8");

        // 获取参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        // 展示
        System.out.println(username + ":" + password);

        // 响应结果
        resp.getWriter().write("Hello");
    }

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

jQuery 实现 Ajax【重点】

通过 HTTP 请求加载远程数据

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

jQuery.ajax(url,[settings])

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。

函数名	描述
beforeSend	在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error	在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter	在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success【重点】	当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete	当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

请求参数

参数名	描述
url【重点】	一个用来包含发送请求的URL字符串。
type【重点】	(默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
dataType【重点】	预期服务器返回的数据类型。常见的有：xml、html、script、json、jsonp、text
data【重点】	发送到服务器的数据。将自动转换为请求字符串格式。
accepts	内容类型发送请求头，告诉服务器什么样的响应会接受返回。
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
timeout	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
statusCode	一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。
headers	一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用;因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。

加载并执行一个 JS 文件【了解】

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

保存数据到服务器，成功时显示信息。【重点】

$.ajax({
   type: "POST",
   url: "url",
   data: "name=John&location=Boston",
   success: function(data){
     alert( "Data Saved: " + data );
   }
});

【注意】这个代码粘过来改改直接用就行！！！

装入一个 HTML 网页最新版本【了解】

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

同步加载数据，发送请求时锁住浏览器

需要锁定用户交互操作时使用同步方式。

var html = $.ajax({
    url: "some.php",
    async: false
}).responseText;

案例代码

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置编码集
        req.setCharacterEncoding("UTF8");

        // 获取参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        // 展示
        System.out.println(username + ":" + password);

        // 响应结果
        resp.getWriter().write("Hello");
    }

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

通过远程 HTTP GET 请求载入信息

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax

参数

参数名	描述
url	待载入页面的URL地址
data	待发送 Key/value 参数
callback	载入成功时回调函数
type	返回内容格式，xml, html, script, json, text, _default

请求 url，忽略返回值

$.get("url");

请求 url，并传送参数，忽略返回值

$.get("url", { username: "易烊千玺", password: "123456" } );

显示 url 以及返回值(HTML 或 XML，取决于返回值)

$.get("url", function(data){
    alert("Data Loaded: " + data);
});

显示 url 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数【重点】

$.get("url", { name: "易烊千玺", time: "123456" },
    function(data){
    alert("Data Loaded: " + data);
});

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQueryGetAjax</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="text" id="input">
<input type="button" value="获取参数" onclick="ajax2()">
</body>
<script>
    function ajax2() {
        $.get("ajax", {'username':'易烊千玺', 'password':'123456'}, function (data) {
            alert(data);
            $("#input").val(data);
        })
    }
</script>
</html>

通过远程 HTTP POST 请求载入信息

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数

参数名	描述
url	发送请求地址
data	待发送 Key/value 参数
callback	发送成功时回调函数
type	返回内容格式，xml, html, script, json, text, _default

请求 url，忽略返回值

$.post("test.php");

请求 url，并传送参数，忽略返回值

$.post("url", { username: "易烊千玺", password: "123456" } );

向服务器传递数据数组（同时仍然忽略返回值）

$.post("url", { 'choices[]': ["Jon", "Susan"] });

使用 ajax 请求发送表单数据【重点】

$.post("url", $("#testform").serialize());

显示 url 以及返回值(HTML 或 XML，取决于返回值)

$.post("url", function(data){
    alert("Data Loaded: " + data);
});

显示 url 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数【重点】

$.post("url", { name: "易烊千玺", time: "123456" },
    function(data){
        alert("Data Loaded: " + data);
});

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQueryPostAjax</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form id="form">
    <table>
        <tr>
            <td>账号&nbsp;&nbsp;&nbsp;<input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码&nbsp;&nbsp;&nbsp;<input type="password" name="password"></td>
        </tr>
        <tr>
            <td>显示&nbsp;&nbsp;&nbsp;<input type="text" id="input"></td>
        </tr>
        <tr>
            <td><input type="button" value="获取参数" onclick="ajax3()"></td>
        </tr>
    </table>


</form>

</body>
<script>
    function ajax3() {
        $.post("ajax", $("#form").serialize(), function (data) {
            alert(data);
            $("#input").val(data);
        })
    }
</script>
</html>

使用 Ajax 和 Json 进行数据交互【重点】

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Json进行Ajax交互</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <form>
        <table align="center">
            <caption>添加</caption>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="name" id="name"></td>
                <td><input type="text" id="name2"></td>
            </tr>

            <tr>
                <td>年龄</td>
                <td><input type="text" name="age" id="age"></td>
                <td><input type="text" id="age2"></td>
            </tr>

            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="男">男
                    <input type="radio" name="gender" value="女">女
                </td>
                <td><input type="text" id="gender2"></td>
            </tr>

            <tr>
                <td>信息</td>
                <td><input type="text" name="info" id="info"></td>
                <td><input type="text" id="info2"></td>
            </tr>

            <tr>
                <td align="center" colspan="3">
                    <input type="reset" value="重置">
                    <input type="button" value="提交" id="submit">
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    // 提交按钮点击时触发
    $("#submit").click(function () {
        // 获取对应元素的值
        var name = $("#name").val();
        var age = $("#age").val();
        var gender = $('input:radio:checked').val();
        var info = $("#info").val();

        // 存入JSON对象中
        var data = {"name" : name, "age" : age, "gender" : gender, "info" : info};

        // 发送ajax请求
        $.ajax({
            // 请求URL
            url: "sendParam",

            // 将JSON对象转为JSON字符串并存入JSON的键值对中
            data : {'data' : JSON.stringify(data)},

            // 响应成功
            success: function(data){
                // 获取JSON字符串
                alert(data);

                // 将JSON字符串转为JSON对象
                var json = JSON.parse(data);

                // 获取JSON对象的键对应的值并填充
                $("#name2").val(json.name);
                $("#age2").val(json.age);
                $("#gender2").val(json.gender);
                $("#info2").val(json.info);
            }
        })
    })
</script>
</html>

后端代码

@WebServlet("/sendParam")
public class SendParamsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置编码集
        req.setCharacterEncoding("UTF8");
        resp.setContentType("text/html; charset=UTF-8");

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

        // 声明JackSon核心mapper对象
        ObjectMapper mapper = new ObjectMapper();

        // 将获取到的JSON字符串转为实体类对象
        Student student = mapper.readValue(data, Student.class);

        System.out.println(student);

        // 将实体类对象转为JSON字符串
        String string = mapper.writeValueAsString(student);

        // 发送给前端
        resp.getWriter().print(string);
    }

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

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »