ajax小结

最新推荐文章于 2024-09-22 21:46:54 发布

奇怪的玩家aaa

最新推荐文章于 2024-09-22 21:46:54 发布

阅读量312

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_53310322/article/details/122950471

版权

本文详细介绍了Ajax的核心概念及其工作流程。Ajax允许在不刷新整个页面的情况下更新内容，实现异步数据交互。通过创建XmlHttpRequest对象，向服务器发送GET请求，并监听状态变化，当接收到响应时，前端可以获取并更新页面元素。这一技术显著提升了网页的用户体验。

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

1.什么是ajax

ajax： Asynchroized Javascript And Xml

功能

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

2.ajax原理（工作流程）

ajax是异步操作，假设·发起一个请求，向后台请求一个数据“apple”

点击按钮
js：在浏览器中创建一个对象XmlHttpRequest（浏览器内置），用来存储数据

let xmlHttp = new XMLHttpRequest();

向后台发起请求
服务器：接收前端请求，把"apple"放入响应，写给前端，写入前端创建的XmlHttpRequest

HttpServletResonse—>getWriter–>out.print(“apple”)

 xmlHttp.open("GET", "http://localhost:8090/ajax-demo/ajax.action", true);
 xmlHttp.send();

前端也一直在监听此对象，看看对象状态是否有变化200，4

 xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };

前端从对象中获取数据，在其页面上重绘（更新）

document.getElementById("btnId").onclick=function(){

    let xmlHttp = new XMLHttpRequest();


    xmlHttp.onreadystatechange = function() { 
        if (this.readyState == 4 && this.status == 200) {
           let resVal =  this.responseText;
           document.getElementById("divId").innerText = resVal;
        }
      };

      xmlHttp.open("GET", "http://localhost:8090/ajax-demo/ajax.action", true);
      xmlHttp.send();

}