Ajax使用的五步法
<script type=
"text/javascript"
>
//用于保存XMLHttpRequest对象的变量，由于整个过程中必须使用同一个XMLHttpRequest对象，所以要定义成全局的
var
xmlhttp;
function
submit()
{
//第一步：创建XMLHttpRequest对象
if
(window.XMLHttpRequest){
//对于IE7，IE8，firefox，Mozilla，Safari浏览器都能满足这个条件
xmlhttp=
new
XMLHttpRequest();
//加的，目前来说属于一个小众事件，所以只需要知道这是个修复小众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
;
}
//readyState==4（与服务器交互结束）这一种情况。
xmlhttp.onreadystatechange=callback;
//获得文本框输入内容
userName=document.getElementById(
"UserName"
).value;
/*这个是使用GET方式的设置方式
----------------------------------------------------------------------------------------------------------------------
//第三步：设置和服务器交互的相应参数
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){
//服务器端响应代码是200，正确返回了数据
//纯文本数据的接受方法
message = xmlhttp.responseText;
//xml对应的DOM对象接受方法，
//[url=http://www.yuputuan.org]玉蒲团[/url]接受这个需要服务器端设置content-type为text/xml
//var docXml = xmlhttp.responseXML;
//把从服务器端返回的数据动态填充到div标签中
//记忆向div中填充文本的方法
div = document.getElementById(
"message"
);
div.innerHTML = message;
}
}
}
</script>