JSP基础知识(AJax)

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();

}

});