关于AJAX的那些事儿

最新推荐文章于 2024-08-30 12:59:36 发布

刘大哥就是6

最新推荐文章于 2024-08-30 12:59:36 发布

阅读量126

点赞数 1

文章标签： ajax servlet

本文链接：https://blog.csdn.net/tony_yang6/article/details/106667573

版权

1.概念

Asynchronous JavaScript And XML:异步的JavaScript和XML

客户端与服务器端在通信上的同步和异步：

同步：客户端必须等待服务器的响应，在等待过程中客户端不能做其他操作

异步：客户端在等待服务器响应的过程中可以进行其他的操作

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

核心思想：异步加载，局部刷新

作用：提升用户体验

2.实现方式

2.1 原生的js

步骤:

1.创建核心对象

根据不同版本的浏览器获取方式不同

高版本：new XMLHttpRequest();

低版本：new ActiveObject("Microsoft.XMLHttp");

2.建立连接

调用open()方法

            参数1：请求方式
               GET:请求参数需要拼接在url之后，send()方法参数为空
               POST：请求参数写在send()方法中
            参数2：请求的地址
            参数3：同步还是异步，异步（true） ，同步（false）

3.发送请求

调用send()方法

核心对象.setRequestHeader("Content-type","application/x-www-form-urlencoded")

核心对象.send(提交的内容)

4.接收并处理响应的结果

用核心对象监听onreadystatechange事件

当事件触发后，并且就绪状态为已就绪（4）响应状态为200时，可以通过responseText获取服务器的响应内容

jsp页面展示

<%--
  Created by IntelliJ IDEA.
  User: 刘朝阳
  Date: 2020/6/10
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>

    <script>
        function func() {

            var user = document.getElementById("user").value;
            //1.创建核心对象
            var xmlhttp;
                //高版本的浏览器：IE7+ 、Chrome、firefox
            if (window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();

            }
            //低版本的浏览器
            else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
            }


            //2.建立连接
                /*
                    参数1：请求方式
                        GET:请求参数需要拼接在url之后，send()方法参数为空
                        POST：请求参数写在send()方法中
                    参数2：请求的地址
                    参数3：同步还是异步，异步（true） ，同步（false）
                 */
            xmlhttp.open("GET","ajaxServlet?user="+user,true);

            //xmlhttp.open("POST","ajaxServlet",true);


            //3.发送请求

            xmlhttp.send();

            // xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //
            // xmlhttp.send("user=tianqi")
            //4.接收并处理服务器响应结果

            xmlhttp.onreadystatechange = function () {
                //判断readystate的状态是否为已就绪4，判断status响应是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status ==200){
                    var msg = xmlhttp.responseText;

                    alert(msg);
                }
            }


        }
    </script>
</head>
<body>
<input type="text" id="user">

<input type="button" onclick="func()" value="发送异步请求">

</body>
</html>

java代码展示

package com.a.Servlet;

import javax.jws.WebService;
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(urlPatterns = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String user = req.getParameter("user");



        System.out.println(user);
        resp.setCharacterEncoding("utf-8");

        resp.getWriter().write("hello"+user);
    }

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

2.2 jQuery实现

方式一：

$.ajax({

url:请求的地址

type:提交的方式

data:提交的参数

success:成功响应后执行的函数

error:发生错误时执行的函数

dataType:相应的数据类型

})

<%--
  Created by IntelliJ IDEA.
  User: 刘朝阳
  Date: 2020/6/10
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>

    <script src="js/jquery-2.2.4.min.js"></script>

    <script>
        function func1() {
            var user = document.getElementById("inp1").value;
            var pwd = document.getElementById("inp2").value;

            $.ajax({
                //请求方式
                type:"GET",
                //请求的参数
                data:"user="+user+"&pwd"+pwd,
                //请求的地址
                url:"ajaxServlet",
                //服务器响应后触发，该函数用于处理接收到的结果，参数就是响应结果
                success:function (d) {
                    alert(d);

                },
                //发生错误时触发
                error:function () {
                    alert("出错了");
                },
                //相应的数据类型：text文本，json对象，该值决定了success后方法的参数类型
                dataType:"text"
            });

        }


    </script>
</head>
<body>

    <input type="text" name="user" id="inp1">

    <input type="text" name="pwd" id="inp2">
    <button onclick="func1()">ajax()发送异步请求</button>

    <!--
    方式1：
        $.ajax()
    方式二：
        $.get()
    方式三：
        $.post()
    -->
</body>
</html>

方式二：

        function func2() {
            var user = document.getElementById("inp1").value;
            var pwd = document.getElementById("inp2").value;

            /*
                参数1：请求地址
                参数2：请求的参数
                参数3：服务器响应后触发，用于接收处理相应内容
                参数4：响应结果的数据类型
             */
           $.get("ajaxServlet","user="+user+"&pwd"+pwd,function (data) {
               alert(data);

           },"text")
        }

方式三：

 function func3() {
            var user = document.getElementById("inp1").value;
            var pwd = document.getElementById("inp2").value;

            /*
                参数1：请求地址
                参数2：请求的参数
                参数3：服务器响应后触发，用于接收处理相应内容
                参数4：响应结果的数据类型
             */
            $.post("ajaxServlet","user="+user+"&pwd"+pwd,function (data) {
                alert(data);

            },"text")
        }

刘大哥就是6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于AJAX的那些事儿

1.概念Asynchronous JavaScript And XML:异步的JavaScript和XML客户端与服务器端在通信上的同步和异步：同步：客户端必须等待服务器的响应，在等待过程中客户端不能做其他操作异步：客户端在等待服务器响应的过程中可以进行其他的操作AJAX是一种无需重新加载整个页面，就能能够更新部分网页的技术。核心思想：异步加载，局部刷新作用：提升用户体验2.实现方式2.1 原生的js 步骤: 1....
复制链接

扫一扫