前提
之前小编整理过关于AJAX的一些理论内容,其实在这些理论之后也做一些实战工作,可惜那时候的小编没有整理出来,随着项目结束,直到最近项目的使用,发现小编自己忘记怎么做了!!!惭愧啊,归根结底,理解不深,为了杜绝类似的情况,整理下,便于更加深入的理解,如有不对之处,恳请大家一定要不惜赐教啊!
应用过程
1、创建xmlHttpRequest对象
为什么要创建?
XMLHttpRequest用于在后台于服务器交换数据。这意味着可以在不重新加载整个网页的前提下,对网页的部分内容刷新。而且现代浏览器都支持XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)。
function createXmlHttp(){
var xmlHttp;
if(window.ActiveXObject)//针对IE浏览器
{
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//针对IE高版本
}
catch(e){
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对IE低版本
}
}else if(window.XMLHttpRequest){ //针对非IE浏览器
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
2、配置XMLHttpRequest对象,向服务器发送请求
在配置过程中可以设置提交方式,提交地址,以及同异步提交
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
默认是是同步提交,异步提交的话,设置为false;
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
I、无法使用缓存文件(更新服务器上的文件或数据库)
II、向服务器发送大量数据(POST 没有数据量限制)
III、发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
3、XMLHttpRequest服务器响应
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当readyState改变时,就会触发onreadystatechange事件。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 ){
if(xhr.status == 200 ){
document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}
4、发送请求
xhr.send(null);
完整Demo
function checkUsername(){
var username = document.getElementById("username").value;
var xhr = createXmlHttp();//创建XMLHTTPRequest对象
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 ){
if(xhr.status == 200 ){
document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}xhr.onreadystatechange = function(){
if(xhr.readyState == 4 ){
if(xhr.status == 200 ){
document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}
xhr.send(null);
}
function createXmlHttp(){
var xmlHttp;
if(window.ActiveXObject)//针对IE浏览器
{
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");//针对IE高版本
}
catch(e){
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//针对IE低版本
}
}else if(window.XMLHttpRequest){ //针对非IE浏览器
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
总结
千万不要相信记忆力,一方面不熟悉,一方面真的会忘记。其实关于ajax的时候还会存在很多问题,例如乱码,跨域等问题,还是在后续的实战中不断总结!下次在遇到异步的问题,我估计就不会害怕了,还是注重熟练,技能吧!