js实现Microsoft.XMLHTTP页面无刷新更新数据
发布时间：2017年9月28日 作者：未知 查看次数：1313
javascript实现页面无刷新更新数据 参考https://www.west.cn/www/info/35032-1.htm 原文无法直接用，许多错误无法运行。 1.首先在服务器上建立一个checkuser.asp文件，用来检测用户是否存在，根据用户是否存在分别反馈0和1 <% u_name=request.querystring("u_name") if u_name="aaa" then response.write "0" else response.write "1" end if %> 2.客户端html设计: <!DOCTYPE html> <html> <head> </head> <BODY> https://www.west.cn/www/info/35032-1.htm <form name=form1 action="xxxx.asp" method="post"> <input type=text name=u_name><span id="checkinfo">ssss</span><input type=button name=checkuser value="检测用户是否存在" onclick="check_user_exists(this.form);"> </form> <script language=javascript> function check_user_exists(form){ u_name=form.u_name.value; if (u_name==null||u_name==""){ alert("请您输入用户名"); return false; } infoboard=document.getElementById("checkinfo"); infoboard.innerText="查询中..."; myurl=location.protocol+"//"+location.hostname+"/t/checkusr.asp?u_name="+u_name; infoboard.innerText=myurl; alert("请您"); retcode=openurl(myurl); switch(retcode){ case "-2": infoboard.innerHTML="<font color=red>抱歉</font>,查询失败"; break; case "1": infoboard.innerHTML="<font color=red>恭喜</font>,"+u_name+"可以使用"; break; case "0": infoboard.innerHTML="<font color=red>抱歉</font>，用户名"+u_name+"已经被使用"; break; default: infoboard.innerHTML=retcode; } return; } function openurl(url){ if(window.XMLHttpRequest){ objxml = new XMLHttpRequest(); }else if(window.ActiveXObject){ objxml= new ActiveXObject("Microsoft.XMLHTTP"); } objxml.open("get",url,false); objxml.send(); retinfo=objxml.responseText; if (objxml.status=="200"){ return retinfo; } else{ return "-2"; } } </script> </body> </html> ================================================== 用js内置对象XMLHttpRequest 来用ajaxhttp://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html /* 用XMLHTTPRequest来进行ajax异步数据交交互*/ 主要有几个步骤： //1.创建XMLHTTPRequest对象 //最复杂的一步 if (window.XMLHttpRequest) 2.注册回调函数 xmlhttp.onreadystatechange = callback; //3.设置连接信息。 //使用post方式发送数据 //post需要自己设置http的请求头 //4，发送数据，开始和服务器进行交互 } function callback(){ 代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>XHR</title> <link rel="stylesheet" href="../templates/css/verify.css"> </head> <body>
<input type="text" id="username"><input type="button" value="提交" onclick="dadaHttpRequest()"> <div id="box"></div> <script type="text/javascript" src="../templates/js/jquery.js"></script> <script>
/* 用XMLHTTPRequest来进行ajax异步数据交交互*/ //1.创建XMLHTTPRequest对象 var xmlhttp; //最复杂的一步 function dadaHttpRequest(){ var username = document.getElementById('username').value; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest; //针对某些特定版本的mozillar浏览器的bug进行修正。 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); }; } else if (window.ActiveXObject){ // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }; //2.注册回调函数 //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数。 xmlhttp.onreadystatechange = callback; //3.设置连接信息 //初始化HTTP请求参数，但是并不发送请求。 //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步 xmlhttp.open("GET","xhr.php?name="+username,true); /*******************************************/ /*如果是xmlhttp.open("GET","xhr.php",true);*/ /* xmlhttp.send('name=' +username); */ /* 不行的 */ /*******************************************/ //使用post方式发送数据 //xmlhttp.open("POST","xhr.php",true); //post需要自己设置http的请求头 //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4，发送数据，开始和服务器进行交互 //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。 //中如果true, send这句话会立即执行 //如果是false（同步），send会在服务器数据回来才执行 xmlhttp.send(null); //因为是get所以send中不需要内容 //xmlhttp.send('name=' +username); }
//5回调函数,不同相应状态进行处理 function callback(){ //alert(xmlhttp.readyState); //判断对象状态是交互完成，接收服务器返回的数据 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //["dada","xiaoyin","liujie"] //纯文本的数据 var responseText = xmlhttp.responseText; var divNode = document.getElementById('box'); //6.将服务器的数据显示在客户端 divNode.innerHTML = responseText; } } </script> </body>
|
||||||
|
||||||
