个人博客地址:http://wenzhuang.me
传统网页与服务器通信往往需要通过提交整个表单来实现,这样用户不得不每次在提交表单时重刷整个页面,带来很不好的用户体验,在这个背景下Ajax应运而生。
AJAX 即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax不是新的编程语言,而是一种使用现有标准的新方法。Ajax能在不重新加载整个页面的情况下,与服务器进行数据交换,实现网页局部刷新。AJAX是与服务器交换数据并更新部分网页的艺术。更多Ajax的基本概念和语法可以参考 w3cschool的Ajax教程。
使用JavaScript发送Ajax请求需要使用XMLHttpRequest对象,但是这种方式比较繁琐,需要较大的代码量。更多关于JavaScript可以访问w3cschool的JavaScript教程。jQuery是JavaScript的一个库,极大简化了JS的编程,其中就包含了对Ajax请求的封装。更多详细的jQuery语法可以访问w3cschool的jQuery教程。
只要了解了基本的JS语法和Ajax的基本概念、jQuery选择器的使用,jQuery很快就能上手,使用起来非常方便。使用jQuery需要先到jQuery官网下载你所需的jQuery库,jQuery类和函数的可以查询jQuery官方API文档。
为此,笔者新建了一个Java web工程WebDemo,已上传至Github的
WebDemo仓库。在WebRoot目录下有一个AjaxDemo.html包含了此次前端页面的代码AjaxDemo.html。src目录下包含了响应网页的服务器端代码AjaxDemoServlet。
AjaxDemo.html的源代码如下。jQuery代码包含在script标签中,先引用了jQuery库的地址。