Java web 之 AJAX

最新推荐文章于 2024-04-05 21:18:06 发布

内涵神仙

最新推荐文章于 2024-04-05 21:18:06 发布

阅读量115

点赞数

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/javaProgrammerr/article/details/123343811

版权

Ajax是一种在不完全刷新页面的情况下与服务器交换数据并更新部分网页的技术。它通过JavaScript实现异步交互，使得用户可以在等待服务器响应的同时执行其他操作。Ajax的核心包括XMLHttpRequest对象，用于打开连接、发送请求及接收响应。当readyState为4且status为200时，表示响应就绪。示例代码展示了如何创建和使用XMLHttpRequest对象进行GET请求。

摘要由CSDN通过智能技术生成

AJAX

概念:AJAX 异步的JavaScript和xml

作用:

与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
使用了Ajax和服务器进行通信,就可以使用HTML+Ajax来替换jsp页面了

异步交互

可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想.用户名是否可用校验,等等

同步

客户端访问-->请求服务器-->服务器处理中-->响应客户端-->继续访问

异步

客户端访问–>客户端可以执行其他的操作–>服务器自动请求和处理–>响应客户端–>继续访问

发送请求:

      方法:open(method,url,async)
       描述:
       1.method: 请求的类型:GET还是POST
       2.url:服务器(文件)位置
       3.asunc:true(异步),false(同步)

获取响应

         readyState   保存了XMLHttpRequest的状态
         0:请求未初始化
         1:服务器连接已建立
         2:请求已接受
         3:正在处理请求
         4:请求已完成且响应已就绪
          每当readyState发生变化时就会调用onreadystatechange函数
         
         status:
         200:"ok"
         403:"Forbidden"
         404:"Page not found"
         
          当readystate为4,status为200时,响应就绪

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //创建核心对象
        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else{
            //code for IE6,IE5
            xhttp=new ActiveXObject("Microsoft.XMLHTTP")
        }
        //发送请求
        xhttp.open("GET","http://localhost:8888/jsp_03/ajaxServlet");
        xhttp.send();

        //获取响应
        function  loadDoc(){
            var xhttp=new XMLHttpRequest();
            xhttp.onreadystatechange = function (){
                if (this.readyState==4&&this.status==200){
                   alert(this.responseText);
                }
            };
            xhttp.open("GET","http://localhost:8888/jsp_03/ajaxServlet",true);
            xhttp.send();
        }
    </script>
</body>
</html>