AJAX note



Web2.0 概述
    Web1.0    vs.    Web2.0
    天天谈门户        谈个性化
    关注的是内容      关注的是应用
    谈挂牌推销        谈服务
    谈密闭、大而全     谈大家开放、谈联合
    网站中心化        个人中心化
Web1.0 vs. Web2.0结论:
    是网络传媒的一种发展趋势是一种理念,而不是技术。
       Creativity-users as creators 创新
       Collective intelligence 集体智慧
       Client-side, rich capabilities 用户至上
       Copyright/Copyleft 版权
    没有真正1.0、2.0的定义
    它们只是对网络信息发展过程所出现的特点的归纳
Web2.0的参考描述:
    是以 以Blog、TAG、SNS、RSS、wiki等社会软件的应用为核心
    依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式




Ajax概述:
    Ajax是由Jesse James Garrett创造的,是"Asynchronous JavaScript+XML"的缩写
    Adaptive Path公司的Jesse James Garrett如是说:
      Ajax不是一种新技术,它把几种成熟的技术以新的方式组合而成,形成强大的功能,包含:
      基于XHTML和CSS标准的表示;
      使用document Object Model进行动态显示和交互;
      使用XMLHttpRequest与服务器进行异步通信;
      使用JavaScript绑定一切。
    传统的Web应用是一个同步的交互过程。Ajax是异步的。
    AJAX是一个客户端动态网页思想;综合整合使用HTML,CSS,JavaScript,XML等页面技术完成客户端显示功能,同时以XMLHttpRequest为核心的异步对象与服务端后台通信。


Ajax的优势:
    减轻服务器的负担
      AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
    带来更好的用户体验
      无刷新更新页面,减少用户心理和实际的等待时间。
    利用客户端的处理能力
      可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担
基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
进一步促进页面呈现和数据的分离。 


常见的Ajax使用场景:
表单驱动的交互
深层次的树的导航
快速的用户与用户间的交流响应
类似投票、yes/no等无关痛痒的场景
对数据进行过滤和操纵相关数据的场景
普通的文本输入提示和自动完成的场景
Ajax不适用场景:
部分简单的表单
基本的导航
页面大部分需要更新
……








XMLHttpRequest对象(AJAX引擎的核心) 
1)作用:实现AJAX的体验
       象桌面应用与server进行数据交换
       异步
       局部刷新
2)目的:减轻server的压力,提高交互的速度
  局部刷新页面某个部份,不影响整个页面

3)对象创建(XMLHttpRequest):
  根据不同的浏览器,对XMLHttpRequest对象的初始化有所不同:
  <script language="javascript">
     var xmlreq = false;
     //IE浏览器
     xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
     //旧版本的IE
     xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
     //Mozilla浏览器
     xmlreq = new XMLHttpRequest();
  </script>




4)XMLHttpRequest对象是运行在browser的(Ajax引擎的核心)
状态:
0=未初始化
1=读取中
2=已读取
3=交互中
4=完成

























  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Thymeleaf is a server-side Java template engine used for web development. It allows developers to create dynamic web pages by blending HTML with server-side code. Thymeleaf supports AJAX (Asynchronous JavaScript and XML) requests, which allows you to update parts of a web page without reloading the entire page. To use Thymeleaf with AJAX, you can follow these steps: 1. Include Thymeleaf dependencies in your project. 2. Create a Thymeleaf template that contains the HTML structure you want to update dynamically. 3. Use Thymeleaf attributes to bind data from the server-side to your HTML elements. 4. Create an AJAX request to send data to the server and retrieve the updated content. 5. Handle the AJAX response and update the specific HTML elements with the new content using JavaScript. Here's an example of how you can use Thymeleaf with AJAX: 1. Thymeleaf template (example.html): ```html <div id="messageContainer"> <p th:text="${message}"></p> </div> <button onclick="sendMessage()">Send Message</button> <script> function sendMessage() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { document.getElementById("messageContainer").innerHTML = this.responseText; } }; xhttp.open("GET", "/sendMessage", true); xhttp.send(); } </script> ``` 2. Controller class: ```java @Controller public class MessageController { @GetMapping("/sendMessage") public String sendMessage(Model model) { // Perform some logic or retrieve data String message = "Hello, world!"; model.addAttribute("message", message); return "messageFragment :: message"; } } ``` In the above example, when the "Send Message" button is clicked, an AJAX request is sent to the server's "/sendMessage" endpoint. The server-side logic performs some operations or retrieves data and returns the updated message. The Thymeleaf template then updates the "messageContainer" div with the new content without reloading the entire page. Note that the Thymeleaf fragment "messageFragment :: message" is returned from the "/sendMessage" endpoint. This allows only the "message" fragment of the template to be updated instead of the entire page.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值