原声的js使用ajax(这种方式比较的麻烦,后面会有jquery的封装比较简单)
在使用ajax时必须创建XMLHttpRequest
function createXMLHttpRequest() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
ajax代码(get请求)
function ajaxGet() {
// 1.创建异步XMLHttpRequest对象
var xhr = createXMLHttpRequest();
// 2.设置状态改变触发一个函数
xhr.onreadystatechange = function(){
//回调函数.
if(xhr.readyState == 4){// 请求发送完成,0对象建立,未调用open方法,1未调用send,2数据发送 3传送数据 4完成
if(xhr.status == 200){// 响应也正确
var data = xhr.responseText;
document.getElementById("d1").innerHTML=data;
}
}
}
// 3.打开一个连接:
xhr.open("GET","/WEB15/ServletDemo1",true);
// 4.发送请求
xhr.send(null);//get请求,这里不需要参数
}
function ajaxPost(){
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("d1").innerHTML=xhr.responseText;
}
}
}
xhr.open("POST","/***",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=张三");
}
jquery中的ajax
$.get("/***",{"name":"李四"},function(data){
$("#target").html(data);//这是回调方法,数据从后台返回
});
$.post("/***",{"name":"李四"},function(data){
$("#target").html(data);
});
使用ajax方法$.ajax({
type:"post",
url:"/***",
data:"name=aaa&password=123",
success:function(data){
$("#target").html(data);
}
});