Ajax基础

这篇具有很好参考价值的文章主要介绍了Ajax基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax介绍

Ajax是异步的JavaScript和XML
多个技术综合,用于快速创建动态网页
可实现局部更新

原生JS实现Ajax

  • 核心对象:XMLHttpRequest

用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下,对网页的某部分进行更新

let xmlHttp = new XMLHttpRequest();
  • 打开链接:open(method,url,async)

method:请求的类型 GET 或 POST
url:请求资源的路径。
async:true(异步) 或 false(同步)。

let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);
  • 发送请求:send(String params)

params:请求的参数(POST 专用)。

xmlHttp.send();
  • 处理响应:onreadystatechange

​ readyState:0-请求未初始化,1-服务器连接已建立,2-请求已接收,3-请求处理中,4-请求已完成响应已就绪
​ status:200-响应已全部 OK。

xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
  • 获得响应数据形式

​ responseText:获得字符串形式的响应数据。
​ responseXML:获得 XML 形式的响应数据。

JQuery实现Ajax

get方式

  • 核心语法:$.get(url,[data],[callback],[type]);
    • url:请求的资源路径
    • data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
    • callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
    • type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
 $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );

post方式

  • 核心语法:$.post(url,[data],[callback],[type]);
    • url:请求的资源路径
    • data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。
    • callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。
    • type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
$.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );

通用方式

  • 核心语法:$.ajax({name:value,name:value,…});
    • url:请求的资源路径
    • async:是否异步请求,true-是,false-否 (默认是 true)。
    • data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。
    • type:请求方式,POST 或 GET (默认是 GET)。
    • dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。
    • success:请求成功时调用的回调函数。
    • error:请求失败时调用的回调函数。
$.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        });

JSON的处理

JSON介绍

JSON是一种轻量级的数据交换格式,拥有简洁和清晰的层次结构,易于人阅读和编写,易于计算机解析和生成
轻量:组件对其环境的依赖较小

JSON转换

常用类
Ajax基础

ObjectMapper常用方法
Ajax基础
实例:文章来源地址https://www.toymoban.com/news/detail-420789.html

对象转 JSON
String json = mapper.writeValueAsString(user);

JSON 转对象
User user2 = mapper.readValue(json, User.class);

Map转 JSON
String json = mapper.writeValueAsString(map);

JSON 转 Map
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});

List转 JSON
String json = mapper.writeValueAsString(list);

JSON 转 List
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});

到了这里,关于Ajax基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包