原生AJAX
1)创建XMLHttpRequest对象
var xmlhttprequest = new XMLHttpRequest();
2)调用open方法设置请求参数
xmlhttprequest.open("GET","servlet地址?action=要调用的servlet中的函数",true(同步或者异步));
3)绑定onreadystatechange事件,处理请求后操作
xmlhttprequest.onreadystatechange= function(){
//其中readyState == 4 表示请求已,且响应已就绪
//status == 200 表示“OK” 404表示未找到页面
//只有当请求完成,并且响应码为200时才能接受返回数据
if(xmlhttprequest.readyState == 4 && xmlhttprequest.readyState == 200){
document.getElementById().innerHTML = xmlhttprequest.responseTest;
}
}
4)调用send方法发送请求
xmlhtmlrequest.send();
JQuery下的AJAX
$.ajax
$.ajax参数
url: 请求地址
error: 请求失败回调函数
type: 请求方式(get或post)
data: 请求参数(string或json)
success: 成功的回调函数
dataType: 返回的数据类型(常用json或text)
$.ajax({
url:"servlet地址",
error:function(){
alter("请求失败");
},
data:"action=访问的servlet函数",
type:"GET或POST",
success:function(data){
回调函数要执行的代码
},
dataType:返回的数据类型})
$.get和 $.post请求
$.get和$.post参数
url: 请求地址
data: 请求参数(string或json)
callback: 成功的回调函数
type: 返回内容的格式,xml,html,script,text.
与$.ajax区别为不需要指定请求方式
$.get(
"servlet地址", //地址
"action==????", //请求参数
function(data){
回调函数要执行的代码 //成功回调函数
},
"json" //返回数据类型
);
$.post(
"servlet地址", //地址
"action==????", //请求参数
function(data){
回调函数要执行的代码 //成功回调函数
},
"json" //返回数据类型
);
$.getJSON请求
参数
url: 请求的地址
data: 请求参数
callback: 成功回调函数
这个方法默认为get请求,并且默认返回类型为json
$.getJSON(
"Servlet路径", // 请求路径
// 请求参数
action:"servlet中函数",
function(data){ alert( data ) } // 成功的回调函数
);
serialize方法
该方法可以将表单中内容变成key=value&key=value形式并且提交
<form id="form01" >
用户名:<input name="username" type="text" /><br/>
密码:<input name="password" type="password" /><br/>
下拉单选:<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选:
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选:
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
单选:
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
//如上述表单,可使用serialize对表单进行序列化提交
$("submit").click(function(){
$("#form01").serialize();
})