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"
        );
        
    });
})

JSON的简介

JSON是一个中特殊的格式,该格式可以表示一个JS的对象

JSON要求一个特殊的格式:

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

JSON的工具包

  Jackson   fastjson(阿里)   gson(谷歌)

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

  对象转为字符串:

    JSON.toJSONString(Object obj);

  字符串转为对象:

    JSON.parseObject(String,Class);

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...