Ajax(Asynchronous javascript and xml) 实现异步刷新,通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
一. 基于JavaScript的Ajax
分布解析Ajax
创建XHR(XML Http Request)
XHR对象是一个JavaScript对象,Ajax就是通过它实现局部刷新的
var xmlhttp = new XMLHttpRequest();设置响应函数
XHR对象的作用是和服务器进行交互,可以指定checkResult函数进行处理
xmlhttp.onreadystatechange = checkResult;设置并发出请求
xmlhttp.open(“GET”,url,true);
通过send函数进行实际访问
xmlhttp.send(null);
null表示没有参数,因为参数已经通过get方式放在url中了,只有用post,并且需要发送参数的时候,才会使用send
xmlhttp.send(“user=”+username+”&password=”+password);处理响应信息
在checkResult函数中处理响应
function checkResult(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById(“checkResult”).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById(‘checkResult’).innerHTML 设置span的内容为服务端传递回来的文本
Ajax实例
|
|
二. 基于JQuery的Ajax
提交Ajax的方式
提交ajax请求
常见的调用方式$.ajax
$.ajax({
url:page, //表示访问的页面路径
data:{“name”:value}, //表示提交的参数
success:function(result){ //表示提交成功后返回对应的响应函数$("#checkResult").html(result);
}
})使用get方式提交ajax
$.get{
page,
{“name”:value},
function(result){ //表示提交成功后返回对应的响应函数$("#checkResult").html(result);
}
}
注:只有第一个参数是必须的使用post方式提交ajax
$.post{
page,
{“name”:value},
function(result){ //表示提交成功后返回对应的响应函数$("#checkResult").html(result);
}
}
注:只有第一个参数是必须的使用load方式调用ajax
$(“#id”).load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据,可选。
例:
$(function(){
$(“#name”).keyup(function(){
var value = $(this).val();
var page = “/study/checkName.jsp?name=”+value;
$(“#checkResult”).load(page);
});
});
Ajax实例
|
|
最后更新: 2020年07月27日 03:35