Ajax使用的五步法
前端之家收集整理的这篇文章主要介绍了
Ajax使用的五步法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<script type=
"text/javascript"
>
var
xmlhttp;
function
submit()
{
//第一步：创建XMLHttpRequest对象
if
(window.XMLHttpRequest){
//对于IE7，IE8，firefox，Mozilla，Safari浏览器都能满足这个条件
xmlhttp=
new
XMLHttpRequest();
//这段
代码是为了
解决某些版本的mozilla浏览器在XMLHttpRequest对象接收服务器返回的xml数据会出问题的一个bug而添
//加的，目前来说属于一个小众事件，所以只需要知道这是个修复小众bug的
代码段
(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType(
"text/xml"
);
}
}
else
(window.ActiveXObject){
//上面的浏览器也能满足这个条件，但是上面的
自带了XMLHttpRequest对象，所以没有必要再利用这个来创建。
//IE6和IE5的判断条件
//由于不同浏览器所
支持的Activex版本不同，为了对不同版本的浏览器都能定义出XMLHttpRequest对象，创建的时候遍历
所有版本的Activex控件版本，总有一个当前浏览器
支持
activexName=[
'MSXML2.XMLHTTP.6.0'
,
'MSXML2.XMLHTTP.5.0'
'MSXML2.XMLHTTP.4.0'
'MSXML2.XMLHTTP.3.0'
'MSXML2.XMLHTTP'
'Microsoft.XMLHTTP'
];
for
(
i=0;i<activexName.length;i++){
try
{
ActiveXObject();
break
;
}
catch
(e){
}
}
}
//alert(xmlhttp);
(xmlhttp==undefined||xmlhttp==
null
){
alert(
"您的浏览器太老，请更换版本。"
);
return
;
}
//第二部：
注册回调
方法，当服务器处理结束返回数据以后利用回调
方法实现局部的
页面刷新数据
//这个回调
方法实际上在每次XMLHttpRequest对象的readyState
属性的值发生变化的时候都会被
调用，但是我们实际上只关心
//readyState==4（与服务器交互结束）这一种情况。
xmlhttp.onreadystatechange=callback;
userName=document.getElementById(
"UserName"
).value;
/*这个是使用GET方式的设置方式
//第三步：设置和服务器交互的相应参数
//制定servlet
页面是AJAX，由于使用的是GET
方法，所以参数要自己拼出来，ture表示是“异步”
xmlhttp.open("GET","AJAX?name="+userName,true);
//第四步：设置向服务器发送的数据，启动和服务器端交互
xmlhttp.send(null);
//由于我们使用的是“GET”，所有数据斗拼在url中，这里的参数是null，如果使用“Post”就必须有参数了
----------------------------------------------------------------------------------------------------------------------
*/
//使用post方式
//第三步：设置和服务器交互的相应参数
xmlhttp.open(
"POST"
"AJAX"
true
);
xmlhttp.setRequestHeader(
"Content-Type"
"application/x-www-form-urlencoded"
);
//第四步：设置向服务器发送的数据，启动和服务器端交互
xmlhttp.send(
"name="
+ userName);
}
callback(){
//alert('------------');
//第五步：判断和服务器交互是否完成，还要判断服务器端是否正确返回数据
(xmlhttp.readyState==4){
//表示和服务器的交互已经完成
(xmlhttp.status==200){
message = xmlhttp.responseText;
//var docXml = xmlhttp.responseXML;
div = document.getElementById(
"message"
);
div.innerHTML = message;
}
}
}
</script>
原文链接：https://www.f2er.com/ajax/163119.html
