欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

Ajax异步处理数据的简介与使用-知了汇智

Ajax异步处理数据的简介与使用

  一、Ajax概念

  1、Ajax: Asynchronous JavaScript and XML,异步JavaScript和XML

  2、用途:用于前后端通信,通过在后台与服务器进行少量数据交换,使网页实现异步更新[1]。

  3、优势:无需刷新页面而与服务器端进行通信。比如说,你评论了别人一条动态,评论了之后你的评论很快就能出现,而不需要把整个页面刷新之后才能看到。

  4、应用场景

  。数据验证:用户的注册,登录功能,通过与后台交互数据,进行数据验证

  。按需取数据:按照需求,展示所需要的部分数据,而不是一股脑的将整个网页全都展示出来。

  。自动更新页面:百度搜索的提示,出现联想提示语,展示用户最有可能搜索的词汇。

  。自动更新页面:在线聊天室,设置一个定时器,每隔几秒向请求数据,实时更新页面信息。

Ajax异步处理数据的简介与使用

 

  二、Ajax怎么用

  1、Ajax的原生操作

  格式:

    $.ajax({
        url:"/", //对应的url
        data:"", //要post到后台的数据
        type:"", //是post还是get
        contentType:"", //要传送的是什么样的数据,一般都是"application/json",可不写
        dataType:"",    //返回的数据是什么类型,text/xml/json,可不写
        success:function(){}, //如果交互成功,要做什么操作
        error:function(){}}//如果交互失败,怎么做
        );

  以用户登录为例:

 $(function(){
        $("#loginButton").on("click",function(){
            var userID=$("#userId").val();
            var password=$("#psd").val();
            $.ajax({
                url:"/login",
                data:{"userID":userID,"password":password},
                type:"post",
                contentType:"application/json",
                success:function(response){
                    alert(response);
                },
                error:function(){
                    alert("出错啦");
                }
 
            });
        });
    });

  2、使用$.post()和$.get()简化异步操作

  格式:

$.post(地址,{参数},回调函数,返回值类型) //返回值类型可写可不写
$.get(地址,{参数},回调函数,返回值类型) //返回值类型可写可不写

  以用户登录为例:

        $("#login").on("click",function(){
            var userID=$("#userId").val();
            var password=$("#psd").val();
            $.post({url:"/login",data:{userId:userID,psd:password},function(response){
                    alert(response);
                }});
        });

  开发中这种情况的ajax用得比较多,对于传值为xml的情况用得比较少,先不介绍,等有时间再补上。

  三、json数据格式

  说了这么多,json到底是啥呢

  1、定义:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成[3]。

  2、基础结构:json主要基于两种结构

  。“名称/值”对的集合:同的语言中,它被理解为对象、记录、结构、字典、哈希表、有键列表、或者关联数组 。

  。值的有序列表:在大部分语言中,它被理解为数组(array)。

  3、但是在前后端交互时,一般指第一种,名称-值,就像字典key-value一样。

  例如:

data: {userID:"123", psd:"123123"}

  4、后台根据这个名称从request中取得参数:

  例如:

String userId=request.getParameter("userID");


  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端开发时使用


132 2811 3191
预约免费试学
点击咨询
预约试学