Java之AJAX概念和实现方式

开发工具与关键技术：MyEclipse 10,java

作者：刘东标

撰写时间：2019-06-12

1．概念：

Asynchronous JavaScript And XML 异步的JavaScript和XML

1.异步和同步：客户端和服务端相互通信的基础上

同步: *客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。

异步: *客户端不需要等待服务端的响应。在服务器处理请求的过程中，客户端可以做其他操作。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，

对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容，必须需重新整个网页页面。

提升用户的体验

2、实现方式：

1.原生的js实现方式

//定义方法

function fun() {

//发送异步请求

//1.创建核心对象

var xmlhttp;

//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。

//如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//2.建立连接

/*

参数： 1.请求方法：GET、POST

* get方式，请求参数在URL后边拼接。send方式为空参

* post方式，请求参数在send方法中定义

2.请求的URL:

3.同步或异步请求:true(异步)或false(同步)

*/

xmlhttp.open("GET","/BorrowAndInvest/servlet/LoginServlet?username=tom", true);

//3.发送请求

xmlhttp.send();

//4.接受并处理来自服务器的响应结果

//获取方式：xmlhttp.responseText;

//什么时候获取？当服务器响应成功后再获取

//当xmlhttp对象就绪状态改变时,触发事件onreadystatechange.

xmlhttp.onreadystatechange = function() {

//判断readyState就绪状态是否为4，判断status响应状态码是否为200

if (xmlhttp.readyState == 4 && xmlhttp.status==200) {

//获取服务器的响应结果

var responseText= xmlhttp.responseText;

alert(responseText);

}

}

}

2.Jquery实现方式

1.$.ajax()

*语法:$.ajax({键值对})；

//定义方法

function fun() {

//使用$.ajax()发送异步请求

$.ajax({

url:"/BorrowAndInvest/servlet/LoginServlet",//请求路径

type:"POST",//请求方式

//data:"username=hello&age=25",//请求参数

data:{"username":"hello","age":25},

success:function(data){

alert(data);

},//响应成功后的回调函数

error:function(){

alert("出错啦");

},//表示如果请求响应出现错误，会执行的回调函数

dataType:"text"//设置接收到的响应数据的格式

});

}

2.$.get()：发送get请求

*语法:$.get(url,[data],[callback],[type])

*参数：1.url:请求路径2.data:请求参数3.callback回调函数4.type:响应结果的类型

function fun() {

$.get("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){

alert(data);

},"text");

}

3.$.post()发送post请求*

function fun() {

$.post("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){

alert(data);

},"text");

}