AJax

Posted 小菜一斤20块

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJax相关的知识,希望对你有一定的参考价值。

Ajax简介

  • AJAX(Asynchronous javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

Ajax特点

  • 异步提交,客户端发出一个请求之后,无需等待服务器相应结束就可以发送第二个请求。
  • 局部刷新
  • 具体案例请看github的注册页面,动态获取用户名实时跟后端确认并展示到前端(局部刷新)

Ajax初识 --- 小案例

页面输入两个整数,通过AJAX传输到后端计算出结果并返回。

页面上有三个input框
	在前两个框中输入数字 点击按钮 朝后端发送ajax请求
	后端计算出结果 再返回给前端动态展示的到第三个input框中
	(整个过程页面不准有刷新,也不能在前端计算)
$(‘#btn‘).click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:‘‘, // 不写就是朝当前地址提交
            // 2.请求方式
            type:‘post‘,  // 不指定默认就是get 都是小写
            // 3.数据
            {#data:{‘username‘:‘jason‘,‘password‘:123},#}
            data:{‘i1‘:$(‘#d1‘).val(),‘i2‘:$(‘#d2‘).val()},
            // 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
            success:function (args) {
                {#alert(args)  // 通过DOM操作动态渲染到第三个input里面#}
                {#$(‘#d3‘).val(args)#}
                console.log(typeof args)

            }
        })
    })
              
              

针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化

以上是关于AJax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段