Ajax 简洁高效一发入魂

最新推荐文章于 2024-06-18 06:07:48 发布

develop_young

最新推荐文章于 2024-06-18 06:07:48 发布

阅读量229

点赞数

文章标签： ajax javascript servlet

本文链接：https://blog.csdn.net/m0_69792317/article/details/126387461

版权

文章摘要

一、认识Ajax
二、使用案例
三、Ajax与JSON的前后台交互案例
四、Ajax与JSON的前后台交互 Pro+
- axios
- **案例代码：**

一、认识Ajax

前端技术，Ajax（异步的 JavaScript 和 XML）。在不刷新页面的前提下，进行页面的局部更新。Ajax的核心对象是 XMLHttpRequest 。

二、使用案例

案例运行图：

这是一个加载按钮

在这里插入图片描述
如果点击，会在不跳转页面的情况下加载出数据。如下：

在这里插入图片描述

案例代码：

							服务器类
@WebServlet("/content")
public class ContentServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().println("<b style='color:red'>i'm  server~~</b>");
    }
}

							客户端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	//按钮
    <input id="btnLoad" type="button" value="加载">
    //服务器返回数据，显示的区域
    <div id="divContent"></div>

    <script>
        // 绑定单击事件
        document.getElementById("btnLoad").onclick = function (){
            1、创建XMLHttpRequest对象
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else {
                //老版浏览器
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            console.log("XMLHttpRequest:",xmlhttp)

            2、发送Ajax请求
            //创建请求
            xmlhttp.open("GET","/Content")
            //发送到服务器
            xmlhttp.send();// 上面两个方法 是相辅相成的


             3、处理服务器响应
            //onreadystatechange（）用于监听Ajax的执行过程
            xmlhttp.onreadystatechange = function (){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                    //获取响应体的文本
                    var t = xmlhttp.responseText
                    console.log(t)
                    //对服务器结果进行处理
                    document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML+"<br/>"+ t;
                }
            }
        }
    </script>
</body>
</html>

案例总结： Ajax 使用流程分为三步:
1、创建XMLHttpRequest对象
2、发送Ajax请求
3、处理服务器响应

三、Ajax与JSON的前后台交互案例

原理图：
在这里插入图片描述
案例代码：

										服务器代码
@WebServlet("/content")								
public class NewsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<News> list = new ArrayList();
            list.add(new News("标题", "发布的时间", "来源", "正文"));
            list.add(new News("标题1", "发布的时间", "来源", "正文"));
            list.add(new News("标题2", "发布的时间", "来源", "正文"));
            list.add(new News("标题3", "发布的时间", "来源", "正文"));
==============================================================================
        	上面模仿的是 从数据库提取出来的记录

        	想把当前的list 转换成JSON字符串然后返回
        	ObjectMapper 由jackson提供的核心类
==============================================================================        
        ObjectMapper objectMapper = new ObjectMapper();
//                    将传入对象，转换JSON字符串
        String json = objectMapper.writeValueAsString(list);
        resp.setContentType("text/json;charset=utf-8");
        //响应JSON字符串
        resp.getWriter().println(json);
    }

}					此处用到了Jackson组件，需要Pom文件加入该依赖

								 		客户端代码01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="rongQi"></div>
<script>
    var xmlhttp;
    // 创建XmlHttpRequst对象
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    xmlhttp.open("GET","/news");
    xmlhttp.send();
    
    xmlhttp.onreadystatechange = function (){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var str = xmlhttp.responseText;
            console.log(str);
            
            // 获取字符串后，转换成JSON对象
            var json = JSON.parse(str);
            console.log(json);
            //对数据进行渲染.........
            for (var i =0; i < json.length; i++){
                var n = json[i];
                var x = document.getElementById("rongQi");
                x.innerHTML = x.innerHTML + n.title;
            }
        }
    }
</script>
</body>
</html>

四、Ajax与JSON的前后台交互 Pro+

axios

它是前端的，要使用该组件需要添加axios文件。就像添加Jquery一样。
为什么要使用它？
在这里插入图片描述
客户端发个请求，还需要创建XmlHttpRequst对象，还要处理服务器响应，很麻烦。

案例代码：

							服务器端不用变，因为axios是前端的东西

								客户端的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    引入axios的文件
    <script src="/js/axios.js"></script>
</head>
<body>
<div id="rongQi"></div>
<script>
     1、发送请求到 /news {} 是可代的参数 JSON形式书写
//axios.post('/news', "x=xxxx",{headers:{"content-type":"application/x-www-form-urlencoded"}})
  axios.get('/news', {})
        2、接收响应并处理
        //当服务器成功返回响应后会执行 （）里的方法。response代表从服务器返回的对象
          .then(function (response) {
              //通过response对象，可以拿到服务器返回的数据
            console.log(response);
            //获取的数据进行渲染........
            var json = response.data;
              for (var i =0; i < json.length; i++){
                  var n = json[i];
                  var x = document.getElementById("rongQi");
                  x.innerHTML = x.innerHTML + n.title;
              }
          })
        //当服务器响应出现异常时，走这下面的代码块
          .catch(function (error) {
            console.log(error);
          })
         
</script>
</body>
</html>