Ajax
为什么使用Ajsx:
无刷新:不刷新整个页面,只刷新局部
无刷新的好处:
1.值更新局部界面,有效利用带宽;
2.提高类型C/S的家伙作用,操作方便
Ajax(Asynchronous JavaScript And Xml):只刷新局部页面的技术
javaScript:更新局部的网页
XML:一般用于请求数据和响应数据的封装
XMLHttpRequest对象(Ajax技术的核心):发送请求到服务器并获得返回结果
CSS:美化页面样式
Asynchronous(异步):发生请求后不等返回结果,由回调函数处理结果
Jquery Ajax实现的三种方式
1.jQuery.ajax(options)
1.jQuery低层AJAX实现,返回其创建XMLHttpRequest对象
2.$.ajax()只有一个参数:参数key/value对象,包含个配置及回调函数信息,在作业面局部刷新,不做页面跳转的时候,推荐使用ajax
$(function(){
$("#login").click(function(){
$.ajax({
type:'post', //type:请求方式,get,post
url:'login.action', //要访问的后台地址
data:{
'uname':$("#uname").val(),
'pwd':$("#pwd").val()
},
success:function(result) {
if(result=='1') {
//1.welcome
location.href="welcome.jsp";
} else {
//2.login
$("#tip").show();
}
}
});
})
})
2.jQuery.post()
一个简单的post请求功能以取代复杂$.ajax。请求成功时可调用回调函数
$.post('login.action',//路径
{
'uname':$("#uname").val(),//参数
'pwd':$("#pwd").val()//参数
},
function(result){
//回调函数:当后台成功响应结果时,会自动调用
if(result=='1') {
//1.welcome
location.href="welcome.jsp";
} else {
//2.login
$("#tip").show();
}
});
3.jQuery.get()
一个简单的get请求功能以取代复杂$.ajax。请求成功时可调用回调函数
$.get('login.action?).val()+'&pwd='+$("#pwd").val(), //路径
function(result){
//回调函数:当后台成功响应结果时,会自动调用
if(result=='1') {
//1.welcome
location.href="welcome.jsp";
} else {
//2.login
$("#tip").show();
}
});