0
点赞
收藏
分享

微信扫一扫

AJAX同步与异步机制深度解析与实际开发中的应用------AJAX

AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁

类似于多线程并发,不会出现页面清空然后展示新的页面的效果

实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)

它是异步的(类似于多线程)

在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象

XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态

这个ReadyState属性的对应值有

0请求未初始化

1服务器连接已建立

2请求已收到

3正在处理请求

4请求已完成且响应已就绪

因此我们说当XMLHttpRequest对象的readyState属性变成4的时候

表示这个AJAX请求和响应已经全部完成

对于低版本的IE浏览器来说,ajax的get请求可能会走缓存,但是现代浏览器都没有这个问题了

什么是ajax的get请求缓存问题呢?

post请求不会被浏览器缓存,没有缓存问题

get请求直接从浏览器缓存获取资源,不需要从服务器重新加载资源,速度较快,用户体验好

缺点是无法实时获取最新浏览器资源

什么时候会走缓存,1get请求,2请求路径已经被浏览器缓存过了,路径没变化的情况会走缓存

如何解决低版本的ajax缓存问题

对于低版本的IE浏览器才有这样的缓存问题,可以采用URL时间戳来解决

我们需要给请求加一个时间戳

也可以使用随机数,或者随机数加上时间戳拼接到我们的请求内

a和B两个请求之间彼此不同步,不需要等待请求结束才能发送

同步和异步如何在代码上实现

假设一个ajax请求open的第三个参数是false,就表示这个请求不支持异步

也就是发送这个请求,会让其他请求的发送被暂缓,只有当我这个请求结束之后,其他的ajax请求才能发送

比方说,用户注册时,用户名邮箱密码都需要发送ajax请求校验

显然这个注册的ajax请求不能和校验的ajax请求异步,只能同步,避免提交非法数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="#"/>
</head>
<body>
    <input type="button" id="doSome" value="GET测试乱码问题">
    <br>
    <input type="button" value="POST请求测试" id="POST">
    <br>
    <input type="button" value="AJAX请求1" id="AJAX1">
    <br>
    <input type="button" value="AJAX请求2" id="AJAX2">
    <br>
<input type="text" id="Text">
    <div id="MyDiv"></div>
    <div id="MyDiv1"></div>
    <div id="MyDiv2"></div>
    <script type="text/javascript">
        //页面加载完成后给ID是helloBtn绑定单机事件
        //这个function就是一个回调函数,在window.onload事件执行
        window.onload = function()
        {
            //给这个按钮绑定事件
            var elementById = document.getElementById("helloBtn");
            //给这个元素绑定事件
            elementById.onclick = function()
            {
                //这个回调函数的this就是事件源
                alert(this.value);
            }
        }
    </script>
    <script>
        window.onload = function()
        {
            document.getElementById("doSome").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("GET","/ajax/ajaxTest1?t="+new Date().getTime()+"&username="+username,true);
                xhr.send();
            }
            document.getElementById("POST").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("POST","/ajax/ajaxTest1",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send("username=" + username);
            }
            document.getElementById("AJAX1").onclick = function()
            {
                var ajax = new XMLHttpRequest();
                ajax.onreadystatechange = function ()
                {
                    if(ajax.readyState === 4)
                    {
                        if (ajax.status === 200)
                        {
                            document.getElementById("MyDiv1").innerText = ajax.responseText;
                        }
                        else
                        {
                            alert(ajax.status);
                        }
                    }
                }
                ajax.open("GET","/ajax/ajaxRT1?t="+new Date().getTime(),false);
                ajax.send();
            }
            document.getElementById("AJAX2").onclick = function()
            {
                var ajax = new XMLHttpRequest();
                ajax.onreadystatechange = function()
                {
                    if (ajax.readyState === 4) {
                        if (ajax.status === 200)
                        {
                            document.getElementById("MyDiv2").innerText = ajax.responseText;
                        }
                        else
                        {
                            alert(ajax.status);
                        }
                    }
                }
                ajax.open("GET","/ajax/ajaxRT2?t="+new Date().getTime(),true);
                ajax.send();
            }
        }
    </script>
</body>
</html>

package com.bjpowernode.AJAX.servlet;
 
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
 
import java.io.IOException;
import java.io.PrintWriter;
 
@WebServlet("/ajaxRT1")
public class ajaxRT1 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            Thread.sleep(10 * 1000);
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
        out.println("哈哈哈哈1");
    }
}

举报

相关推荐

0 条评论