<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
// load方法：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
$('#btn1').click(function() {
// load方法如果没有请求参数，会发送get请求，如果有请求参数，则会发送post请求。当不需要传参的时候，发送get请求就方便了。
// 也可以这样的参数形式：name=llj&age=55
$('#tips').load('/ace/ajax.servlet', {
username : $('#username').val()
});
});
// $.get()方法
$('#btn2').click(function() {
$.get('/ace/ajax.servlet', {
username : $('#username').val()
}, function(data, statusText) {
$('#tips').html(data);
}, 'text');
// 最后一个参数：服务器返回的数据类型，可以是:
// text : 普通的文本
// html : html文档
// json : json字符串
// xml : xml文档
// script: javascript脚本
});
// $.post()方法
$('#btn3').click(function() {
$.post('/ace/ajax.servlet', {
username : $('#username').val()
}, function(data, statusText) {
$('#tips').html(data);
}, 'text');
});
// $.ajax()方法
$('#btn4').click(function() {
$.ajax({
url : '/ace/ajax.servlet', // js中，属性可以不用 ' ' JSON里面必须要 ' '
type : 'get', // 默认是get方式
data : 'username=' + $('#username').val(),
dataType : 'text',
success : function(data) {
$('#tips').html(data);
},
error : function() {
alert('ERROR!');
},
async : true // async: 当值为true(缺省值)，表示发送异步请求。当值为false,表示发送同步请求。
});
});
// $.getJSON
$('#btn5').click(function() {
$.getJSON('/ace/ajax.servlet?act=1', {}, function(data) {
alert(data);
});
});
// $.ajax()方法对keyup事件的应用
$('#username').keyup(function() {
$.ajax({
url : '/ace/ajax.servlet',
type : 'get',
data : 'username=' + $('#username').val(),
dataType : 'text',
success : function(data) {
$('#tips').html(data);
},
error : function() {
alert('ERROR!');
},
async : true
});
});
// $.ajax()方法对input(propertychange)事件的应用
var event = 'input'; // 非IE浏览器 - input事件
if (window.navigator.userAgent.indexOf('MSIE') != -1) {
event = 'propertychange'; // IE浏览器 - propertychange事件
}
$('#username2').bind(event, fn);
function fn() {
$.ajax({
url : '/ace/ajax.servlet',
data : 'username=' + $('#username2').val(),
success : function(data) {
$('#tips').html(data);
}
});
}
});
</script>
<script type="text/javascript">
/**
* 获取AJAX对象 <br>
* AJAX：asynchronous javascript and xml <br>
* ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest对象，<br>
* 一般称之为ajax对象)异步地(当ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发请求，<br>
* 服务器送回部分数据( 并不是一个完整的页面)，利用这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。<br>
*/
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // 非IE浏览器
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp"); // IE浏览器
}
return xhr;
}
function xhrExample() {
function post() {
var xhr = getXhr();
xhr.open('post', 'test.servlet', 'true');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 消息头
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var txt = xhr.responseText;
}
};
xhr.send("time=" + mf("timer").innerHTML);
}
function get() {
var xhr = getXhr();
xhr.open('GET', 'test.servlet?actionMethod=GET', 'true');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var txt = xhr.responseText;
}
};
xhr.send(null);
}
}
/**
* ajax提交表单的两种方法
*/
function func1() {
$.ajax({
url : 'test.servlet',
type : 'post',
data : $('#form').serialize(),
dataType : 'text',
success : function(data) {
},
error : function() {
}
});
}
// 需要jquery.form.js
function func2() {
var options = {
url : 'test.servlet',
type : 'post',
data : null,
success : function(data) {
}
};
var form = $("#form");// form1:表单ID 在表单界面只用这一个表单ID
form.ajaxSubmit(options);
}
</script>
</head>
<body>
<h3>jQuery对AJAX的支持演示 -- load、$.get()、$.post()、$.ajax()</h3>
<form>
用户名1： <input id="username" /> keyup事件 <span id="tips" style="font-size: 32pt; color: cyan;"></span>
<br>
<br>
用户名2： <input id="username2" /> input(propertychange)事件
<br>
<br>
<input type="button" value="click me(load)" id="btn1" />
<input type="button" value="click me($get)" id="btn2" />
<input type="button" value="click me($post)" id="btn3" />
<input type="button" value="click me($.ajax)" id="btn4" />
<input type="button" value="click me($.getJSON)" id="btn5" />
<br>
</form>
</body>
</html>