zoukankan      html  css  js  c++  java
  • ajax的理解

    文字表述什么是ajax

      AJAX = 异步 JavaScript 和 XML,一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    具体实践讲述ajax的运行机制

    工具

    IntelliJ IDEA,以及firefox浏览器、firebug插件

    新建一个项目,点击web选项

    命名

    工程项目结构

    首先编写一个servlet类,servlet类这里相当于服务器

    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet(name = "AjaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            doGet(request, response);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //        1.获取参数
    //        2.检查参数是否有问题
    //        3.校验操作
    //        4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回到页面段,而不是将一个新的页面发送给用户
    
            try {
                request.setCharacterEncoding("UTF-8");
                response.setContentType("text/html;charset=UTF-8");
                PrintWriter out=response.getWriter();
                //        1.获取参数
                String old=request.getParameter("name");
                //        2.检查参数是否有问题
                if(old==null||old.length()==0) {
                    out.println("用户名不能为空");
                }else {
                    //        3.校验操作
                    String name=old;
                    if(name.equals("lxc")){
                        //4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回到页面段,而不是将一个新的页面发送给用户
    //                    写法没有发生变化,本质发生了变化
                        out.println("用户名["+name+"]已存在,请更换");
                    }else {
                        out.println("用户名["+name+"]未被注册,可以使用");
                    }
                }
            }catch(Exception e){
                e.printStackTrace();
            }
    
    
        }
    }
    View Code

    然后进行web.xml编写

    然后创建一个ajax.html文件,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>李贤春</title>
        <script type="text/javascript" src="jslib/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="jslib/verify.js"></script>
    
    
    </head>
    <body>
    ajax下进行用户校验的实例,请输入用户名:</br>
    <!--ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签
    ajax方式下不需要name属性,加个id属性就行了-->
    <input type="text" id="userName"/>
    <input type="button" value="校验" onclick="verify()"/>
    
    <!--这个div用于存放服务器端返回的信息,开始为空
    id属性定义是为了利用dom的方式找到某一个节点,进行操作-->
    <div id="result"></div>
    <!--<div>456</div>
    <span>123</span><span>456</span>-->
    <!--div和span的直观差异,div中的内容独占一行,span中的内容不独占-->
    </body>
    </html>
    View Code

    在页面显示

    在点击校验按钮前,先把js文件给引入进来,要不然点击事件不会生效

    目录如下

    当点击校验按钮后,会跳转到一个js文件,现命名为vertify.js。在这个文件里主要干四件事,比较重要。当然会涉及到js的一些内容。

     1、获取文本框中的内容,专业地说就是获取节点,var jqueryObj=$("#userName").其中,Jquery的查找节点的方式是参数中#加上id属性值可以找到一个节点,userName就是ajax.html中的id值,也就是在浏览器页面中输入的用户名的数据。

    2、获取节点的数据,var dataName=jqueryObj.val();其中,jquery的方法返回节点的都是jquery的对象,可以继续在上面执行其他的jquery的方法,val()方法就是返回节点数据。

    3、将获取到的数据发送到服务器端的servlet,$.get("AjaxServlet?name="+dataName,null,callback);其中,"AjaxServlet?name="+dataName 是把获取到的数据与服务器端的数据连接起来,让其相等,进行相关的业务判断(不需要我们操作),null一栏其实是待发送的Key/Value的参数,callback是载入成功时的回调函数。

    4、接收服务器端返回的数据,后面几步需要在回调函数里进行,因为通过回调函数可以将服务器端与页面端有效联通起来。function callback(){   };

      这里先进行测试一下 ,我用的是firefox浏览器,firebug插件

      测试显示界面

      进一步测试

    说明我们写的都是正确的

    4是接收服务器段返回的数据,function callback( data){ alert(data)},进行测试

     

    测试可用

    5、将服务器端返回的数据动态的显示在页面上,

    var resultObj=$("#result");
    resultObj.html(data);
    alert(data);
    其中result出现在ajax.html中,为的是在页面中开辟一条空间存储数据。
    测试一下


    通过




    ajax思维导图


    总结:

    核心步骤:

    1.获取文本框中的内容

    2.获取节点中的数据
    3.将节点中的数据发送给服务器端的servlet

    //节点中的数据在服务器里进行业务判断(自动进行的)

    4.接收服务器端返回的数据

    5.将服务器端返回的数据动态的显示在页面上


    注:因为firefox最新的版本已经不支持firebug插件,所以用的是低版本的,而且网上不好找,这是百度云链接:https://pan.baidu.com/s/1mvf5MJ_FOXnuTb_elXk_gw
     
     

      

      

  • 相关阅读:
    HashMap 链表插入方式 → 头插为何改成尾插 ?
    MySQL 日志之 binlog 格式 → 关于 MySQL 默认隔离级别的探讨
    Eclipse
    Delphi
    Delphi
    Delphi
    Delphi
    Delphi
    Delphi
    Delphi
  • 原文地址:https://www.cnblogs.com/lxc116317/p/9376649.html
Copyright © 2011-2022 走看看