AJAX如何使用？

最新推荐文章于 2024-04-25 16:49:50 发布

c方不败

最新推荐文章于 2024-04-25 16:49:50 发布

阅读量92

点赞数

文章标签： ajax js javascript java jquery

本文链接：https://blog.csdn.net/cyymqq/article/details/116096055

版权

AJAX

1.什么是AJAX?

AJAX：Asynchronous JavaScriptAnd XML
异步的JavaScript和XML

2.有什么用？

一般的网页如果需要更新内容，必需重新加载整个页面。
而AJAX通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

3.实现方式

原生js实现

<html>
  <head>
    <title>$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>
  <script>
      document.getElementById("username").onblur=function () {
      let xmlHttp = new XMLHttpRequest();
      let username = document.getElementById("username").value;
      xmlHttp.open("get","Ajax_servlet1?username="+username,true);
      xmlHttp.send();
      xmlHttp.onreadystatechange=function () {
      if(xmlHttp.readyState==4&&xmlHttp.status==200){
          document.getElementById("uSpan").innerText=xmlHttp.responseText;
        }
      }
    }
  </script>
  </body>
</html>

核心对象：XMLHttpRequest用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
打开链接：open（methodurl，async）
method：请求的类型GET或POST。
url：请求资源的路径。
async:true（异步）或false（同步）。
发送请求：send（Stringparams）
params：请求的参数（POST专用）。
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，目响应已就绪。
status：200-响应已全部OK。
获得响应数据形式
responseText：获得字符串形式的响应数据。
responseXML：获得XML形式的响应数据。

JQeury实现(get)

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

<html>
<head>
    <title>Title</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan2"></span>
    <br>
    密码：<input type="password" id="password">
    <input type="submit" value="提交">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#username").blur(function () {
        let username = $("#username").val();
        $.get("Ajax_servlet1",
            "username="+username,
            function (data) {
                $("#uSpan2").html(data);
            },
            "text"
        );
    });
</script>
</html>

JQeury实现(post)

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

<html>
<head>
    <title>Title</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan2"></span>
    <br>
    密码：<input type="password" id="password">
    <input type="submit" value="提交">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#username").blur(function () {
        let username = $("#username").val();
        $.post("Ajax_servlet1",
            "username="+username,
            function (data) {
                $("#uSpan2").html(data);
            },
            "text"
        );
    });
</script>
</html>

JQeury实现(通用方式)

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

<html>
<head>
    <title>Title</title>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan2"></span>
    <br>
    密码：<input type="password" id="password">
    <input type="submit" value="提交">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("#username").blur(function () {
        let username = $("#username").val();
        $.ajax({
            url:"Ajax_servlet1",
            async:true,
            data:"username=" + username,
            type:"POST",
            dataType:"text",
            success:function (data) {
                $("#uSpan2").html(data);
            },
            error:function () {
                alert("失败");
            }
        });
    });
</script>
</html>

以上方式统一使用下面的servlet进行测试

package servlet;

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("/Ajax_servlet1")
public class Ajax_servlet1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        String username = req.getParameter("username");
        System.out.println(username);
        if(username.equals("ccc")){
           resp.getWriter().write("已注册");
        }
        else {
            resp.getWriter().write("未注册");
        }
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

效果

AJAX效果

c方不败

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX如何使用？

AJAX1.什么是AJAX?AJAX：Asynchronous JavaScriptAnd XML异步的JavaScript和XML2.有什么用？一般的网页如果需要更新内容，必需重新加载整个页面。而AJAX通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。3.实现方式原生js实现<html> <head> <title>$Title$</title&g
复制链接

扫一扫