2021-07-20学习笔记初识jQuery ajax

1.先新建maven项目配置pom.xml

 

maven作为一种XML标记语言，标签通常成对存在，目前packaging标签有3种配置：

1 2 3	<packaging>pom</packaging> <packaging>jar</packaging> <packaging>war</packaging>

<packaging>war</packaging>

war包与jar包非常相似，同样是编译后的.class文件按层级结构形成文件树后打包形成的压缩包。不同的是，它会将项目中依赖的所有jar包都放在WEB-INF/lib这个文件夹下可想而知，war包非常适合部署时使用，不再需要下载其他的依赖包，能够使用户拿到war包直接使用，因此它经常使用于微服务项目群中的入口项目的pom配置中。

---

<script type="text/javascript">

        var xmlHttp;
        //创建核心函数
        function createXmlHttpRequest() {
            // IE浏览器
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
            } else {
                xmlHttp = new XMLHttpRequest();
            }
        }

        //发送请求到服务器验证用户名是否存在
        function sendReq() {
            var userName = document.getElementById("userName").value;
            //和服务器交互需要一个核心对象
            createXmlHttpRequest();
            var url = "do.jsp?userName=" + userName;
            //和服务器链接，用异步的方式
            xmlHttp.open("get", url, true);
            //如果readystate发生变化，就会指定回调函数
            xmlHttp.onreadystatechange = readystatechange;
            xmlHttp.send();
        }

        //接收到响应
        function readystatechange() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var text = xmlHttp.responseText;
                    document.getElementById("info").innerText = text;
                }

            }
        }

    </script>

 <input type="text" id="userName" name="userName" onblur="sendReq();"/>
    <span id="info"></span>

鼠标离开text文本框立即调用sendReq（）；

函数再拿文本框里的名字userName 接着创建核心对象 createXmlHttpRequest();  

xmlHttp.open("get", url, true); 建立一个url地址，使用get方式处理，true代表异步

readyState的值1是准备发送 2是发送到了 3是正在发送 4是已经发送回来 0是准备发送，200的时候代表可以拿到数据了

---

<%
    String userName = request.getParameter("userName");

    String msg = "可以注册";
    if ("aa".equals(userName)) {
        msg = "已被占用，请换其他";
    }
    PrintWriter writer = response.getWriter();
    writer.write(msg);
    writer.flush();
    writer.close();

%>

这是服务器层，通过局部刷新，调用数据库里的内容，确定文本框是否是已有的用户

writer.flush()是清空通道

 

---

AJAX

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果

jQuery

jQuery 中所有选择器都以美元符号开头：$()。

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

---

我们现在使用jQuery来简化原本的工作流程

利用ajax发送请求

中间出现的问题 datatype一开始使用json无法接收，需要使用text

ajax的dataType有哪些类型？

格式为：dataType:"xxx",

•"xml": 返回 XML 文档，可用 jQuery 处理
•"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行
•"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。
注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
•"json": 返回 JSON 数据
•"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,
如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
•"text": 返回纯文本字符串