java中ajax的用途_15-Java-Ajax知识整理

Ajax知识整理

一、Ajax概念和原理介绍

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

以HttpRequest为核心发送请求和接收响应

以JavaScript语言为基础使用XMLHttpRequest

以XML或JSON作为数据交互格式

以HTML和CSS作为数据展现(渲染)

AJAX交互(异步)和传统交互(同步)区别

1.请求的发送和接收

传统：浏览器直接发送HTTP请求，然后由浏览器直接接收服务器返回结果，直接呈现到浏览器页面上。

AJAX：浏览器利用js调用XMLHttpRequest对象发送HTTP请求，然后再利用XMLHttpRequest接收服务器返回结果，然后还需要利用js将结果显示到浏览器页面上。

2.如何区分Ajax请求和传统请求

请求的Header格式不同，Ajax请求会在请求Header部分多一组参数值

x-requested-with:XMLHttpRequest

如果存储该参数可以认为是ajax；不存在就可以认为是传统表单或超链接

3.服务器响应结果不同

传统：服务器一般都会去调用Servlet或JSP生成一个HTML界面给浏览器，然后浏览器显示

ajax：服务器一般都会去调用Servlet处理，然后生成一个JSON或者XML字符串结果给XMLHttpRequest

4.页面刷新不同

传统：整个页面刷新

Ajax：局部刷新

5.同步和异步不同

传统：同步交互模式：请求1--->响应1--->请求2--->响应2

Ajax：异步交互模式：请求1--->请求2--->响应1--->响应2

二、Ajax作用和优点介绍

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

页面可以局部刷新处理，页面不改变，异步请求和响应，使用户操作更连续，提升用户体验感，Ajax交互传输数据量较小，提升程序性能，异步处理，可以进行异步加载和请求处理，减少整个页面刷新的频率

三、Ajax的使用步骤

第一步：创建一个XMLHTTPRequest对象，发送请求，在客户端js中编程

第二步：创建Servlet重写service，接收请求并响应，在服务器端java中编程

四、Ajax案例-使用js配合Servlet单纯的实现ajax(有了JQuery就比这简单多了)

html和js代码：

1

2

3

4 ">

5

6

My JSP 'index.jsp' starting page

7

8

9

10

11

12

15

16 functionsendRequest(){17 //第一步：创建一个XMLHTTPRequest对象

18 varxhr= null;19 if(window.XMLHttpRequest){20 //支持chrom,IE7 8 9

21 xhr= newXMLHttpRequest();22 }23 else{//IE5 6支持

24 xhr= newActiveXObject("Microsoft.XMLHTTP");25 }26

27 //第二步：创建一个HTTP请求

28 xhr.open("get","hello.do",true);29

30 //第三步：设置回调处理函数

31 xhr.onreadystatechange= function(){//指定响应函数

32 //判断响应接收状态是否成功，如果成功才进行

33 if(xhr.readyState== 4 &&xhr.status== 200){34 //获取服务器返回的字符串信息

35 varmsg=xhr.responseText;36 document.getElementById("msg").innerHTML=msg;37 document.getElementById("msg").style.color= "blue";38 }39 };40

41 //第四步：发送ajax请求

42 xhr.send(null);43 }44

45 //第五步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示

46 functionshowMsg(){47 setInterval('sendRequest()',1000);48 }49

50

51

52

53

54