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

一、概念

1、Ajax： Asynchronous JavaScript and XML，异步JavaScript和XML

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

3、优势：无需刷新页面而与服务器端进行通信。

• 比如说，你评论了别人一条动态，评论了之后你的评论很快就能出现，而不需要把整个页面刷新之后才能看到。

4、应用场景[2]

• 数据验证：用户的注册，登录功能，通过与后台交互数据，进行数据验证
• 按需取数据：按照需求，展示所需要的部分数据，而不是一股脑的将整个网页全都展示出来。
• 自动更新页面：百度搜索的提示,出现联想提示语，展示用户最有可能搜索的词汇。
• 自动更新页面：在线聊天室，设置一个定时器，每隔几秒向请求数据，实时更新页面信息。
   

二、怎么用

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

 

发现了一个CSDN支持的快捷键：ctrl+shift+v：粘贴并符合当前格式，和印象笔记一样~~

鸣谢：

http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

https://blog.csdn.net/OBKoro1/article/details/72832865

https://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html