• Ajax和Json


    1、什么是Ajax? 

      Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,

      Ajax  可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

      简单来说:Ajax就是异步加载,局部刷新

    2、JQuery的ajax:底层封装了JS的ajax代码,做了浏览器的兼容性。

      程序员仅需要调用简单的JQ的AJAX方法,就可以实现复杂的AJAX功能。

    1. 少量代码,实现复杂功能
    2. 浏览器兼容性好,一处编写,处处执行

    3、应用场景

      注册重名验证

      自动补全等

    4、同步和异步的区别

      同步方式发送请求

        发送一个请求,需要等待响应返回,然后才能够发送下一个请求。

        如果该请求没有响应,不能发送下一个请求,客户端会处于一直等待过程中。

      异步方式发送请求

        发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待。

    5、第一种方式

    $(function(){
        $("#username").blur(function(){
            //发送请求,进行验证,验证用户名是否存在
            //1.创建xmlhttpRequest对象
            var request = new XMLHttpRequest();
            //2.获取连接
            
            //参数:1.请求方式2.请求的路径是否以异步方式提交
             
            request.open("post","login1",true);
            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            //3.发送请求
            request.send("username="+this.value);
            //4.获取响应的文本
            //监听readystate值的改变你事件
            request.onreadystatechange = function(){
                //当readyState为4时,表示请求结束
                if(request.readyState == 4){
                    //获取响应的文本
                    var msg = request.responseText;
                    if(msg == "恭喜你,该用户名可以使用"){
                        $("#span1").css("color","green").html(msg);
                    }else{
                        $("#span1").css("color","red").html(msg);
                    }
                }
            }
        });
    });

      第二种方式  .ajax()

    $(function(){
        //ajax中各个参数之间用,隔开
        $("#username").blur(function(){
            $.ajax({
                type:"get",            //请求类型
                url:"login1",        //请求路径
                data:"username="+this.value,    //请求参数
                dataType:"text",        //预期返回的数据类型
                success:function(res){            //请求成功时的回调函数,参数为返回的文本内容
                    if(res == "恭喜你,该用户名可以使用"){
                        $("#span1").css("color","green").html(res);
                    }else{
                        $("#span1").css("color","red").html(res);
                    }
                }
            
            });
            
        });
    });

      第三种方式

    $(function(){
        $("#username").blur(function(){
    
            $.post("login1?mark=check",
                {username:this.value},
                function(res){
                    if(res == "恭喜你,该用户名可以使用"){
                        $("#span1").css("color","green").html(res);
                        $("#sub").prop("disabled",false);
                    }else{
                        $("#span1").css("color","red").html(res);
                        $("#sub").prop("disabled",true);
                    }
                },
                "text"
            );
            
        });
    }) 

      发请求时使用:post的四个参数详解

      url   :     请求路径。 向某个路径发送请求。   字符串【必填字段】

      data  :    发送请求时的参数列表。      【可以忽略】

        格式1:{k1: "v1",k2: "v2",k3: "v3"…….. }

        例如:{username: "张三",password: "123",sex: "man" }

        最终拼接成:username=张三&password=123&sex=man

        格式2:{"k1": "v1","k2": "v2","k3": "v3"…….. }

        例如:{"username": "张三","password": "123","sex": "man" }

        最终拼接成:username=张三&password=123&sex=man

        目前,使用ajax提交数据时,后台仍然可用getParameter(),getParameterValues(),getParameterMap()

        但是获取的参数名一定要和 data中key名对应,和表单输入项name属性无关

      callback :    响应成功的回调函数。【可以忽略】

        ajax局部刷新发生在回调函数中。

        该回调函数仅在响应成功并且响应状态码200时,才会调用

        格式:

          function(data){

            //data 响应体文本

          }

      type  :     设置响应体的类型。(要求,服务器不设置响应体类型)【可以忽略】

          xml, html, script, json, text, _default

        type默认值:html代码

        type常用值:html,json

    JSON的简介

      JSON是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,就是说不同的编程语言JSON数据是一致的。 

    JSON的语法格式

    JSON要求一个特殊的格式:

    1. 以”{”开始,以”}”结束.
    2. 对象中的属性名和属性值使用”:”分割,
    3. 多个属性之间,使用”,”风格
    4. 使用[]表示一个对象的数组.

    JSON的工具包

      Jackson   fastjson(阿里)   gson(谷歌)

      都可以将对象和json格式的字符串进行相互的转化.

     这里使用的是fastjson

      对象转为字符串:

        JSON.toJSONString(Object obj);

      字符串转为对象:

        JSON.parseObject(String,Class);

  • 相关阅读:
    阿蒂亚谈数学——我对《数学的统一性》的笔记
    陶哲轩实分析习题8.5.6
    陶哲轩实分析习题8.5.2
    陶哲轩实分析习题8.5.9
    陶哲轩实分析习题8.5.5
    陶哲轩实分析习题8.5.6
    陶哲轩实分析习题8.5.2
    陶哲轩实分析习题8.5.1
    陶哲轩实分析习题8.5.9
    陶哲轩实分析习题8.5.5
  • 原文地址:https://www.cnblogs.com/xfdhh/p/11409373.html
Copyright © 2020-2023  润新知