java Ajax入门
文章目录
- java Ajax入门
- 前言
- 一、同步和异步
- 二、Ajax的使用
- JavaScript方法
- JQuery方法
- 总结
前言
接下来整理一下Ajax相关的内容,AJAX(asynchronous js and xml),即异步的JavaScript和xml,它的主要作用就是让页面不必等待服务器返回整个页面信息,而可以通过异步的方式给服务器发送数据和获取数据,对页面进行局部刷新,是一种提高用户体验的技术。
一、同步和异步
同步和异步的主要区别如下;
(1)同步:一个响应结束后才能发送下一个请求,页面在请求期间不能做其他事情。
(2)异步:不必等待一个响应结束,可以异步的给服务器发送请求,页面在异步请求期间可以继续操作,可以对页面进行局部刷新。
异步是一种提高用户体验的技术,它可以减轻服务器的压力,减少网络传输,但是另外一方面可能会无端增加无效请求,反倒给服务器造成压力,因此异步技术也是一个双刃剑。
二、Ajax的使用
Ajax的使用,本质是使用XmlHttpRequest对象给服务器发送请求和获取数据,通过JavaScript和JQuery都可以使用它,下面简单的介绍下如何使用Ajax。
JavaScript方法
(1)获取Ajax对象
JavaScript获取Ajax对象,需考虑到不同版本的浏览器获取的方式,现在主流浏览器是内置了XmlHttpRequest对象的,可以直接获取到,下图就是在chrome浏览器console控制台直接获取的方式,可以看到可以正常获取。IE浏览器比较麻烦一点,具体参考如下代码。
获取XmlHttpRequest的js脚本。
/*获取XmlHttpRequest*/
function getAjax(){
var xmlHttpRequest;
/*如果是chrome,火狐,safari,IE7以上等主流浏览器*/
try{
xmlHttpRequest=new XMLHttpRequest();
}catch (e) {
try{
/*是否是IE6*/
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
/*IE5或者更早版本*/
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
/*抛出异常提示*/
alert("不存在XmlHttpRequest的浏览器");
throw e;
}
}
}
//将对象返回
return xmlHttpRequest;
}
测试html页面,用来测试获取ajax对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JavaScript测试AJAX</title>
<!--引入ajax脚本-->
<script type="text/javascript" src="js/ajaxjs.js"></script>
<script>
function getAjaxObject(){
/*直接调用脚本*/
var ajaxObject=getAjax();
alert(ajaxObject);
}
</script>
</head>
<body>
<h3>获取XmlHttpRequest</h3>
<input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象"></input>
</body>
</html>
IE浏览器结果
火狐浏览器结果
chrome浏览器器结果
2)使用Ajax对象给服务器发送请求,在上面页面基础上,发送一个请求给服务器,服务器接收到异步请求后,返回给页面一个信息。需要完成以下步骤:
step1 打开与服务端的连接,使用XmlHttpRequest.open(method,url,async)方法
step2 发送请求,使用XmlHttpRequest.setRequestHeader(“Content-Type”,“appliction/x-www-form-urlencoded”),并XmlHttpRequest.send()发送数据
step3 注册监听,使用onreadystatechange状态的变化,会调用函数里的方法,并在函数里对状态进行判断,当readyState4并且status200时,才对页面做出处理。
其中readyState有5个状态,主要用的就是状态4,status就是状态行的状态码,如果200代码返回OK。
0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求
2状态: 调用完了send()方法了, 请求已经开始
3状态: 服务器已经开始响应, 但是不代表响应结束
4状态: 服务器响应结束!(通常我们只关心这个状态)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JavaScript测试AJAX</title>
<style type="text/css">
div{
border: 1px solid dimgrey;
width: 350px;
height: 50px;
margin-top: 10px;
text-align: center
}
</style>
<!--引入ajax脚本-->
<script type="text/javascript" src="js/ajaxjs.js"></script>
<script>
/*获取一个ajax对象*/
function getAjaxObject(){
/*直接调用脚本*/
var ajaxObject=getAjax();
alert(ajaxObject);
}
/*发送请求给服务器*/
function sendRequest(){
/*1 打开与服务器的连接*/
var jsRequest=getAjax();
/**
* open(method,url,async) method即提交方式,一般为GET和POST,url为提交的地址,async代表是否异步(true)还是同步(false)
*/
jsRequest.open("GET","/day11-servletConfigContext/GetAjaxResponse?username=clyang&password=123",true);
/*2 发送请求*/
//通知服务器发送的数据是请求参数
jsRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
jsRequest.send();
/*3 注册监听*/
jsRequest.onreadystatechange=function () {
//确认readyState和status
if(jsRequest.readyState==4){
if(jsRequest.status==200){
//得到响应参数,将参数显示在div中
var result=jsRequest.responseText;
var mydiv= document.getElementById("mydiv");
mydiv.innerText=result;
}
}
}
}
</script>
</head>
<body>
<h3>获取XmlHttpRequest</h3>
<input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象"></input>
<input type="button" onclick="sendRequest()" value="发送请求给服务器获取返回数据">
<div id="mydiv"></div>
</body>
</html>
发送GET请求后服务器端,多次异步请求,服务端都处理了。
可以看出通过JavaScript和ajax可以正常发送异步请求。
JQuery方法
使用JavaScript方法来发送异步请求比较繁琐,如果是JQuery的话代码会相对简单,下面使用JQuery实现上面同样的需求,依然在上面的html代码中进行扩展。
(1)$.ajax,执行异步AJAX请求,语法格式如下:
$.ajax(url,[data],[async],[callback]),具体参数如下:
url:发送请求地址
data:发送的数据,较为常用的就是Json
async:true异步,false同步
type:提交方式,一般选择POST或GET
success:请求成功后要执行的函数,函数参数就是服务器返回的数据,可以对数据进行处理添加到元素上去。
error:请求失败后要执行的函数
使用JavaScript方法来发送异步请求比较繁琐,如果是JQuery的话代码会相对简单,下面使用JQuery实现上面同样的需求,依然在上面的html代码中进行扩展。
(1)$.ajax,执行异步AJAX请求,语法格式如下:
$.ajax(url,[data],[async],[callback]),具体参数如下:
url:发送请求地址
data:发送的数据,较为常用的就是Json
async:true异步,false同步
type:提交方式,一般选择POST或GET
success:请求成功后要执行的函数,函数参数就是服务器返回的数据,可以对数据进行处理添加到元素上去。
error:请求失败后要执行的函数
2).get或.post,使用AJAX的HTTP GET/POST请求从服务器加载数据,语法格式如下:
.get(url,[data],[callback]),具体参数解释参考上面.ajax。
2).get或.post,使用AJAX的HTTP GET/POST请求从服务器加载数据,语法格式如下:
.get(url,[data],[callback]),具体参数解释参考上面.ajax。
(3)$(selector).load,从服务器加载数据,并把返回的数据放置到指定的元素中,语法格式如下:
$(selector).load(url,data,callback),这个可以用在注册提示用户已登录,将结果直接回显到当前元素上面。
/*$(selector).load*/
function jqueryAjax3(){
var url="/day11-servletConfigContext/GetAjaxResponse";
var data={"username":"clyang","password":"123"};
$("#mydiv2").load(url,data,function(result){
/*默认会自动将服务器返回的结果加载到元素上*/
alert(result);
});
}
整体测试代码
总结
以上是对Ajax的部分总结,它有两种方式可以使用,实际开发中一般使用JQuery来使用。
更多推荐
java Ajax入门
发布评论