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

客官°小女子只卖身不卖艺 2021-09-28 00:28 345阅读 0赞

### 一、概念 ###

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][http_www.runoob.com_ajax_ajax-xmlhttprequest-onreadystatechange.html]

[https://blog.csdn.net/OBKoro1/article/details/72832865][https_blog.csdn.net_OBKoro1_article_details_72832865]

[https://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html][https_www.cnblogs.com_SkySoot_archive_2012_04_17_2453010.html]

[http_www.runoob.com_ajax_ajax-xmlhttprequest-onreadystatechange.html]: http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
[https_blog.csdn.net_OBKoro1_article_details_72832865]: https://blog.csdn.net/OBKoro1/article/details/72832865
[https_www.cnblogs.com_SkySoot_archive_2012_04_17_2453010.html]: https://www.cnblogs.com/SkySoot/archive/2012/04/17/2453010.html