• Ajax


    Ajax

    Ajax(Asynchronous javaScript and Xml)并不是一种全新的技术,而整合了JavaScript XML CSS等几种现有技术。Ajax的执行流程是。通过

    Ajax引擎————XMLHttpRequst对象异步发送请求服务器,服务器返回XML.JSON或HTML等格式的数据,然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

     

    Web开发技术和Ajax技术有什么区别?

    1.发送请求方式不同。

    传统Web应用通过提交表单方式发送请求,而Ajax技术通过JavaScript的XMLHttpRequest对象发送请求。

    2.服务器响应不同

    传统web应用服务器的响应是一个完整的页面,而采用Ajax技术后,服务器的响应只是需要的数据。

    3.客户端处理的响应方式不同

    传统的web应用发送请求后,浏览器将等待服务器响应完后重新加载整个页面,而采用Ajax技术后,浏览器不在等待请求的响应,而只是动态更新页面中需要更新的部分。

    老版本:

    <script type="text/javascript">
            function  checkUser() {
                var value=document.getElementById("username").value;
                var url="firstServlet?name="+value;
                //需要一把枪,就是Ajax
                //核心对象
                var xhr; //分情况讨论::能力检查
                if(window.XMLHttpRequest){
                    //非IE浏览器 Chrome 等
                    xhr=new XMLHttpRequest();
                }else{
                    //IE
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //1.建立一个请求  请求方式  url   是否异步
                xhr.open('get',url,true);
                xhr.onreadystatechange=function () {
                    if(xhr.readyState==4&&xhr.status==200){
                        //客户端已经成功接收到了Data
                        //获取到使用到responseText
                        var content=xhr.responseText;
                        document.getElementById("msg").innerText=content;
    
                    }
                }
    
                xhr.send(null);
            }
        </script>
    </head>
    <body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span>
    <input name="userpwd"/>
    </body>
    </html>

     Ajax

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtName").blur(function () {
                ajax();
            })
        });
        function ajax() {
            var uname=$("#txtName").val();
            $.ajax({
                url:"/firstServlet",
                type:'post',
                 data:'name='+uname,
                success:function (data) {
                    if(data=="true"){
                        $("#msg").html("不能");
                    }else {
                        $("#msg").html("可以");
                    }
                }
            })
        }
    </script>
    <head>
        <title>Title</title>
    </head>
    <body>
    <input id="txtName" name="username" onblur="checkUser()"/><span id="msg"></span>
    <input name="txtpwd"/>
    </body>
    </html>

    JSON 中的那些:

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String uname=request.getParameter("name");
    List<User> list=new ArrayList<User>();
    User user=new User();
    user.setAge("12");
    user.setName("肖总");
    user.setAihao("呵呵");
    list.add(user);
    String strJSON=JSON.toJSONString(list, SerializerFeature.WriteMapNullValue,
    SerializerFeature.WriteNullNumberAsZero,SerializerFeature.WriteNullStringAsEmpty);
    List<User> lists=new ArrayList<User>();
    //把JSON转为list
    lists=JSON.parseArray(strJSON,User.class);
    System.out.println("集合"+lists);
    List<User> listss=new ArrayList<User>();
    //
    TypeReference<List<User>> typeReference = new TypeReference<List<User>>() {

    };
    System.out.println(typeReference.getClass()+"类型");
    listss=JSON.parseObject(strJSON,typeReference);
    System.out.println("集合1"+listss);
    System.out.println(strJSON+"JSON");
    for (User user1:listss){
    System.out.println(user1);
    System.out.println(user1.getName());
    }
    /* String msg=null;
    if(uname!=null){
    if("admin".equals(uname)){

    msg="true";

    }else {
    msg="false";
    }
    }else {
    msg="false";
    }
    response.getWriter().print(msg);*/
    if("admin".equals(uname)){
    response.setCharacterEncoding("utf-8");
    response.getWriter().write("不成功");
    }else {
    response.setCharacterEncoding("utf-8");
    response.getWriter().write("成功");
    }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    doPost(request,response);
    }
  • 相关阅读:
    1009 说反话 (20 分)
    1007 素数对猜想 (20 分)
    Visual Studio2017下载方法
    百词斩和扇贝打卡测试与评估
    创建者模式->工厂模式
    STM32F427|----------IO讲解与应用
    MySQL的索引
    STM32F103RCt6 与 MG996R
    2020物联网实验室的考核题目
    初学数据库-MySQL&IDEA&Navicat
  • 原文地址:https://www.cnblogs.com/xiaoyu1997/p/6565484.html
Copyright © 2020-2023  润新知