我的AJAX学习笔记(一)

最新推荐文章于 2023-05-23 15:22:15 发布

奚敛锋

最新推荐文章于 2023-05-23 15:22:15 发布

阅读量831

点赞数 1

本文链接：https://blog.csdn.net/weixin_43544843/article/details/107417597

版权

1、Ajax快速入门

1.1、AJAX介绍

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
一般的网页如果需要更新内容，必需重新加载个页面。
而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

在这里插入图片描述

1.2、原生JS实现AJAX

代码实现

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("/testServlet")
public class TestServlet 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");
        //判断是否收到信息
        if (username!=null){
   
            resp.getWriter().write("<b>已接收到</b>");
        }

    }

    @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</title>
</head>
<body>
<form>
    姓名: <input type="text" name="username" id="username"><span id="textshow"></span><br>
    密码: <input type="password"><br>
    <button>注册</button>
</form>
</body>
<script>
    //获取事件源，绑定失去焦点事件
    document.getElementById("username").onblur=function(){
    
        // //创建XMLHttpRequest核心对象
        let xmlHttpRequest = new XMLHttpRequest();

        //打开链接以及请求方式
        xmlHttpRequest.open("GET","testServlet?username="+this.value,true);
        //发送请求
        xmlHttpRequest.send();
        //处理响应
        xmlHttpRequest.onreadystatechange=function (ev) {
    
            //判断请求和响应是否成功
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    

                //将响应的数据显示到span标签
                document.getElementById("textshow").innerHTML=xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

1.3、原生JS实现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 形式的响应数据。

1.4、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>

1.5、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">

最低0.47元/天解锁文章

奚敛锋

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
我的AJAX学习笔记(一)

1、Ajax快速入门1.1、AJAX介绍AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。一般的网页如果需要更新内容，必需重新加载个页面。而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。 1.2、原生JS实现AJAX代码实现imp
复制链接

扫一扫