一、JS Ajax
1.创建xhr对象
var xhr = new XMLHttpRequest(); 此方式不支持IE5和IE6
2.open方法,设置请求信息
open(method,url,async)
method:请求类型;GET或POST
url:请求路径
async:true(异步)或 false(同步)
3.send方法,发送请求
send(string)
如果是GET请求,则xhr.send();如果是POST请求,string为请求参数,xhr.send("key1=value1&key2=value2");
4.onreadystatechange、readyState、status
每当readyState改变时,就会触发onreadystatechange事件
onreadystatechange:每当 readyState 属性改变时,就会调用该函数
readyState:0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪;
status:200: "OK";404: 未找到页面
function ajaxRequest() {
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.设置请求信息 method请求类型GET、POST,url请求地址,async是否异步,默认true(异步)
xhr.open('GET', 'AJAXServlet', true);
//3.发送请求
xhr.send();
//onreadystatechange每当请求状态改变就会执行
xhr.onreadystatechange = function() {
//当请求已完成并成功响应的时候
if (xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
};
二、JQuery Ajax
1. $.get
jQuery.get(url, [data], [callback], [type])
url:请求的地址;
data:要发送的key/value参数;
callback:回调函数;
type:返回内容的格式,xml,html,text,script,json
对于get请求,[data]会拼接到请求路径中
servlet代码:
public class AJAXServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//{"name":"zhangsan","age","18"}
String str = "{\"name\":\"zhangsan\",\"age\":\"18\"}";
System.out.println(str);
resp.getWriter().write(str);
}
}
JQuery代码:
function ajaxRequest() {
$.get('AJAXServlet?para1=p1', {para2:'p2', para3:'p3'}, function(res) {
var obj = res;
alert(obj.name);
alert(obj.age);
}, 'json');
}
2. $.post
jQuery.post(url, [data], [callback], [type])
与$.get类型,不同的是$.post的[data]会放到请求体中
3. $.ajax
jQuery.ajax(url,[settings])
type:请求方式get或post,默认get;
dataType:返回内容的格式,xml,html,text,script,json;
data:data的值可以是一个对象{"para1":"p1", "para2":"p2"},也可以是字符串"para1=p1¶2=p2"
表单序列化,$("#form").serialize(),返回的就是字符串,类似"para1=p1¶2=p2"
function ajaxRequest() {
$.ajax({
url:'AJAXServlet',
data:{"para1":"p1", "para2":"p2"},
type:'POST',
async:true,
dataType:'json',
success:function (res) {
alert(res);
alert(res.name);
},
error:function () {
alert("发送错误");
}
});
}