一直以来,每次需要使用ajax就又去学习一下,但是每次都是这次学会,下次使用的时候又忘了,所以我这些想要做一个总结,以下的内容都是来自W3C中的内容
这是一个完整的ajax
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//如果POST需要发送数据,就把这一行加上,否则其他情况不需要
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
-
第一步:
- 创建XMLHTTPRequest对象(老版的IE5和IE6使用ActiveX对象)
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
-
第二步:
- 向服务器发送请求
//true代表异步,get请求中请求的参数直接放到URL中,如:(URL = "ssm-student/register?name="+name+"&password="+password)
xmlhttp.open("GET",url,true);
//如果是POST请求,并且POST请求需要发送数据,就把数据放到send()方法中,如:(xml.send("name="+name+"&password="+password))
//并且,需要使用setRequestHeader()来添加HTTP头
//如:xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send();
GET请求和POST请求的区别:
与POST相比,GET更简单也更快,并且大部分情况下都能使用,但是,在以下情况中,使用POST:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST没有数据量限制)
- 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
缓存问题:在使用jquery的Ajax或是jsp/servlet时,会出现一种情况就是,第一次访问页面发送请求,获取的数据是从数据库中获取的,但是再次点击按钮,发送请求时就不去数据库搜索数据了,而是读取缓存中的数据,这样就会造成数据脏读,所以要清理缓存。
cache : false/true ,表示不清理/清理缓存,使之每次都起数据库中取得最新数据。
为了避免这种请求,可以在URL中添加一个唯一的ID
xmlhttp.open("GET","ssm-student/register?t="+Math.random(),true);
xmlhttp.send();
-
第三步:
- 响应数据
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据 |
responseXML | 获得XML形式的响应数据 |
使用:
//responseText文本响应
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
//responseXML xml对响应
var xmlDoc = xmlhttp.responseXML;
-
第四步:
-
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务,每当readyStatus改变时,就会触发onreadystatechange事件,readyStatus属性存有XMLHTTPRequest的状态信息,
属性 | 描述 |
---|---|
onreadystatechange | 存储函数,每当readyState属性改变时,就会调用该函数 |
readyState | 存有XMLhttpRequest的状态,从0到4发生变化: 0(请求未初始化),1(请求服务器已建立),2(请求已接收),3(请求处理中),4(请求已完成,且响应已就绪) |
status | 200:(OK), 400:(未找到页面) |