AJAX

AJAX

Asynchronous JavaScript And XML:异步的JavaScript和XML

AJAX 可以实现在不刷新页面的前提下,进行页面的局部刷新。在 web 开发领域非常流行,但是 AJAX 不是 w3c 的标准。

原生JS使用步骤

  1. 创建核心对象:XmlHttpRequest
  2. 发送Ajax请求
  3. 处理服务器响应

Servlet:

@WebServlet("/ajaxServlet")
public class AJAXServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().println("<h1>欢迎访问本站</h1>");
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
<!-- 要实现的效果是点击“加载”按钮,服务器传来的文本会显示在div中-->
<input type="button" id="btn" value="加载">
<div id="div1"></div>

<script>
    document.getElementById("btn").onclick = function (){
        // 1. 创建核心对象:XmlHttpRequest 下面的都是标准代码
        let xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else{
            //IE6以前的浏览器这样写
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    
        // 2. 发送Ajax请求
        //open方法可以设置请求方式、请求地址、异步还是同步
        xmlHttp.open("GET","/ajax/ajaxServlet",true);
        xmlHttp.send();
    
        // 3. 处理服务器响应
        xmlHttp.onreadystatechange = function (){
             //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                let text = xmlHttp.responseText;
                let div1 = document.getElementById("div1");
                div1.innerHTML = text;
            }
        }
    }
</script>

</body>
</html>

同步和异步

同步是按照顺序一个一个来,不会乱掉,更不会出现上面代码没有执行完就执行下面的代码。缺点是解析的速度没有异步的快。
异步是接取一个任务,直接给后台,再接下一个任务,一直一直这样,谁的先读取完先执行谁的。缺点:没有顺序,谁先读取完先执行谁的,会出现上面的代码还没出来下面的就已经出来了,会报错。

AJAX对象详解

  • 核心对象:XMLHttpRequest

    用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  • 打开链接:open(method,url,async)

    method:请求的类型 GET 或 POST。

    url:请求资源的路径。

    async:true(异步) 或 false(同步)。

  • 发送请求:send(String params)

    params:请求的参数(POST 专用)。

  • 处理响应:onreadystatechange

    readyState:0-请求未初始化,1-服务器连接已建立,2-请求已接收,3-请求处理中,4-请求已完成,且响应已就绪。

    status:200-响应已全部 OK。

  • 获得响应数据形式

    responseText:获得字符串形式的响应数据。

    responseXML:获得 XML 形式的响应数据。

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>
    

    servlet:

    package com.example.ajax; 
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    
    @WebServlet("/loginServlet")
    public class LoginServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
    
    
            String username = request.getParameter("username");
            if(username.equals("zhangsan")){
                response.getWriter().println("<font color=‘red‘>用户名已经被注册</font>");
            }else{
                response.getWriter().println("<font color=‘green‘>用户名可以使用</font>");
            }
        }
    }
    
    

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>
    

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>
    

小结

  • 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:请求失败时调用的回调函数。

AJAX

上一篇:微信分享 带图片的的链接


下一篇:android高仿微信UI点击头像显示大图片效果