使用JavaScript的XMLHttpRequest发送请求

使用XMLHttpRequest对象分为4部完成:

1.创建XMLHttpRequest组建

2.设置回调函数

3.初始化XMLHttpRequest组建

4.发送请求

实例代码:

var userName;  
    var passWord;  
    var xmlHttpRequest;  
      
      
    //XmlHttpRequest对象  
    function createXmlHttpRequest(){  
        if(window.ActiveXObject){ //如果是IE浏览器  
            return new ActiveXObject("Microsoft.XMLHTTP");  
        }else if(window.XMLHttpRequest){ //非IE浏览器  
            return new XMLHttpRequest();  
        }  
    }  
      
    function onLogin(){  
        userName = document.f1.username.value;  
        passWord = document.f1.password.value;    
          
        var url = "LoginServlet?username="+userName+"&password="+passWord+"";     
              
        //1.创建XMLHttpRequest组建  
        xmlHttpRequest = createXmlHttpRequest();  
          
        //2.设置回调函数  
        xmlHttpRequest.onreadystatechange = zswFun;  
          
        //3.初始化XMLHttpRequest组建  
        xmlHttpRequest.open("POST",url,true);  
          
        //4.发送请求  
        xmlHttpRequest.send(null);    
    }     
      
      
    //回调函数  
    function zswFun(){  
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){  
            var b = xmlHttpRequest.responseText;  
            if(b == "true"){  
                alert("登录成功!");  
            }else{  
                alert("登录失败!");  
            }         
        }  
    }  


11

复制代码
var  xmlhttp;
function  verify1() {
    
var  username  =  document.getElementById( " username " ).value;
    
// 确定浏览器
     if (window.XMLHttpRequest) {
        
// 针对FireFox、Mozillar、Opera、Safari、IE7、IE8
         // 创建XMLHttpRequest对象
        xmlhttp  =   new  XMLHttpRequest();
        
// 修正某些浏览器的BUG
         if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType(
" text/html " );
        }
    }
else   if (window.ActiveXObject){
        
// 针对IE5、IE5.5、IE6
         // 这两个为插件名称作为参数传递,为了创建ActiveXObject
         var  activeName  =  [ " MSXML2.XMLHTTP " , " Microsoft.XMLHTTP " ];
        
for ( var  i = 0 ;i > activeName.length();i ++ ) {
              
try {
                  
// 非别取出,如果创建成功则终止循环,如果失败则会抛出异常继续循环
                  xmlhttp  =   new  ActiveXObject(activeName[i]);
                  
break ;
              }
catch (e){
              }
        }
    }
    
// 确定XMLHttpRequest是否创建成功
     /* if(!xmlhttp) {
        alert("XMLHttpRequest创建失败!");
        return;
    }else {
        alert("XMLHttpRequest创建成功!"+xmlhttp);
    }
*/
    
// 注册回调函数
    xmlhttp.onreadystatechange = callback;
    url 
=   " classisservlet?name= " + username;
    
// 设置连接信息
     // 1.是http请求的方式
     // 2.是服务器的地址
     // 3.是采用同步还是异步,true为异步
     // xmlhttp.open("GET",url,true);
     // post请求与get请求的区别
     // 第一个参数设置成post第二个只写url地址,第三个不变
    xmlhttp.open( " POST " , " classisservlet " , true );
    
// post请求要自己设置请求头
   xmlhttp.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
    
// 发送数据,开始与服务器进行交互
     // post发送请求
    xmlhttp.send( " name= " + username);
}
function  callback() {
    
// 接收响应数据
     // 判断对象状态是否交互完成,如果为4则交互完成
     if (xmlhttp.readyState  ==   4 ) {
         
// 判断对象状态是否交互成功,如果成功则为200
         if (xmlhttp.status  ==   200 ) {
            
// 接收数据,得到服务器输出的纯文本数据
             var  response  =  xmlhttp.responseText;
            
// 得到div的节点将数据显示在div上
             var  divresult  =  document.getElementById( " result " );
            divresult.innerHTML 
=  response;
        }
    }

复制代码


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值