Ajax入门

最新推荐文章于 2023-05-27 16:06:06 发布

永远鲜红の幼月

最新推荐文章于 2023-05-27 16:06:06 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/qq_40482358/article/details/105490317

版权

1.Ajax入门

1.1 Ajax简介

Ajax,全称Asynchronous JavaScript and XML.即异步的JavaScript和XML.
Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术.
Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术.

1.2 Ajax包含的技术.

Ajax是一个通过多个我们现有的技术的使用来完成的技术.

通过使用CSS,HTML,JSP来显示.
通过使用javascript,DOM模型来交互和动态显示.
使用XMLHttpRequest和服务器进行异步通信.
通过XML或者JSON作为转换数据格式来实现数据传输.

1.3 Ajax工作原理.

看了一个网图,写的感觉挺不错的.就粘过来了:https://www.runoob.com/ajax/ajax-intro.html

1.4 使用HTML的iframe来体验一下假的页面无刷新.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe体验页面无刷新</title>
    <script>
        function go() {
            var url = document.getElementById("url").value;
            document.getElementById("i1").src=url;
        }
    </script>
</head>
<body>

<div>
    <p>输入url来获取页面:</p>
    <p>
        <input type="text" id="url">
        <input type="submit" value="提交" οnclick="go()">
    </p>
</div>

<div>
    <iframe id="i1" style="width: 100%;height:50%"></iframe>
</div>

</body>
</html>

但这个页面还是刷新了,只不过刷新的是小的页面.

大概可以实现一个局部页面刷新.然而我们想要的是发出请求,收到响应,动态显示.

2. Ajax简单样例.

2.1 原生Ajax实现.

网上有原生的Ajax实现,但是感觉没必要,我们可以通过jQuery来直接调用Ajax即可.

粘一个原生Ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
            function loadXMLDoc()
            {
                var xmlhttp;
                if (window.XMLHttpRequest)
                {
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    // IE6, IE5 浏览器执行代码
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","https://www.runoob.com/try/ajax/ajax_info.txt",true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>

        <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
        <button type="button" onclick="loadXMLDoc()">修改内容</button>

    </body>
</html>

点一下出现一个https://www.runoob.com/try/ajax/ajax_info.txt的返回文本.

2.2 通过jQuery实现

感觉还是通过jQuery来直接调用Ajax更舒服一点.

2.2.1 失去焦点事件

在jsp中我们写一个失去焦点的事件.通过post传参.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>AjaxBasejQuery</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>

    <script>
      function t1() {
          $.post({
              url:"${pageContext.request.contextPath}/t1",
              data:{"name":$("#t1").val()},
              success:function (data) {
                  alert(data);
              }
          })
      }
    </script>
  </head>
  <body>

  <%--失去焦点,发送一个请求到后台--%>
  <input type="text" id="t1" οnblur="t1()">

  </body>
</html>

然后在后端接受.

package com.admin.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public void test1(String name, HttpServletResponse response) throws IOException {
        System.out.println("t2:name:"+name);
        if(name.equals("admin")){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

效果:文本框失去焦点的时候,触发js事件,会根据文本框的内容弹出true或false.

2.2.2 获取后端数据,表单返回.

动态向表单传入数据

对应的前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $("#btu").click(function () {
                /**
                 * 调用post方法.
                 * post(url,[param],success)
                 * 在回调函数中写方法
                 */
                $.post("${pageContext.request.contextPath}/t2",function (data) {
                    // console.log(data);
                    var html = "";
                    for(let i=0;i<data.length;++i){
                        html+="<tr>"+
                                "<td>"+data[i].name+"</td>"+
                            "<td>"+data[i].age+"</td>"+
                            "<td>"+data[i].phone+"</td>"+
                                "</tr>"
                    }
                    $("#content").html(html);
                })

            })
        })

    </script>
</head>
<body>
<input type="button" value="加载数据" id="btu">
<table>
    <tr>
        <td>name:</td>
        <td>age:</td>
        <td>phone:</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>
</body>
</html>

在后端新加对应的/t2访问即可.

@RequestMapping("/t2")
public List<User> t2(){
    List<User> userList = new ArrayList<User>();
    userList.add(new User("cm",22,"666"));
    userList.add(new User("zhj",22,"666"));
    return userList;
}

这里补充一个User,用了lombok插件节约文本资源.不了解的可以自行百度.

package com.admin.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String phone;
}

效果:点击加载数据后,会加载一个表单,表单内容为后台准备好的.传入一个数组.

2.2.3 简单样例:判断用户名是否存在.

先写一个jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        function nameChick() {
            // var username = $("#name").val();
            // console.log(username);
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{"username":$("#name").val()},
                success:function (data) {
                    //console.log(data);
                    document.getElementById("nameOk").innerText=data;
                }
            })


        }
        function pwdChick() {
            // var pwd = $("#pwd").val();
            // console.log(pwd);
            $.post({
                url:"${pageContext.request.contextPath}/t3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    // console.log(data);
                    document.getElementById("pwdOk").innerText=data;
                }
            })
        }
    </script>
</head>
<body>

<p>
    用户名:<input type="text" id="name" οnblur="nameChick()">
    <span id="nameOk"></span>
</p>
<p>
    密码:<input type="text" id="pwd" οnblur="pwdChick()">
    <span id="pwdOk"></span>
</p>


</body>
</html>

然后在后端通过传入的参数来判断是否匹配,并返回结果.

@RequestMapping("/t3")
public String t3(String username,String pwd){
    System.out.println(username+":"+pwd);
    String msg = "";
    if(username!=null){
        if(username.equals("admin")){
            msg="ok";
        }else{
            msg="error";
        }
    }
    if (pwd!=null){
        if (pwd.equals("123456")){
            msg = "ok";
        } else {
            msg="error";
        }
    }
    return msg;
}

上面就是根据结构判断是否匹配成功.成功输出yes,否则输出error.

永远鲜红の幼月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门

1.Ajax入门1.1 Ajax简介Ajax,全称Asynchronous JavaScript and XML.即异步的JavaScript和XML.Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术.Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术.1.2 Ajax包含的技术.Ajax是一个通过多个我们现有的技术的使用来...
复制链接

扫一扫