`
gonglil
  • 浏览: 31996 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

AJAX五步使用法

阅读更多
<script type="text/javascript">
function submit(){
//1创建XmlHttpRequest对象
if(window.XMLHttpRequest){
// IE7,IE8,FireFox,Mozilla,Safari,Opera 
xmlhttp = new XMLHttpRequest();
// 如果来自服务器的响应没有 XML mime-type 头部,则一些版本的 Mozilla 浏览器不能正常运行。
//对于这种情况,httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部,强制 text/xml 作为 mime-type。
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
// IE6,IE5.5,IE5  
var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];  
for(int i= 0; i < activexName.length;i++){
try{
   xmlhttp = new ActiveXObject(activexName[i]);  
   break;
}catch(E){
}
}
}
if(xmlhttp == undefined || xmlhttp == null){
alert('当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器');  
break;
}
//2注册回调方法      
xmlhttp.onreadystatechange = callback; 
//错误写法
xmlhttp.onreadystatechange = callback(); 
// 获取文本框中输入的内容,经过两次编码防止中文乱码
var userName = document.getElementById("UserName").value;  
                userName = encodeURI(encodeURI(userName));  
                //Get方式交互
                //3设置和服务器端交互的相应参数
                xmlhttp.open("GET","URL?name="+userName,true);
                //4设置向服务器端发送的数据,启动和服务器端的交互
                xmlhttp.send(null);
                /**
                //以POST方式交互
                xmlhttp.open("POST","URL",true);
                // POST方式交互所需要增加的代码
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //设置像服务端发送的数据,启动和服务器端的交互
                xmlhttp.send("name="+userName);
                *
                **/
}
function callback(){
//5.判断和服务器端交互是否完成,以及服务器端是否返回正确结果
//xmlhttp.readyState=4表示和服务器端交互已经完成
if(xmlhttp.readyState==4){
//xmlhttp.status==200表示服务器端响应的代码是200,正确的返回了数据
if(xmlhttp.status==200){
//纯文本的接受方法
var message = xmlhttp.responseText;
// XML数据对应的DOM对象的接受方法  
                   // 使用的前提是,服务器端需要设置content-type为text/xml  
//var domXml = xmlhttp.responseXML;
var div = document.getElementById("divId");
div.innerHTML = message;
}
}
}
</script>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics