XMLHttpRequest的五步使用方法

  1 <html>
  2     <head>
  3         <title>Demo</title>
  4         <style>
  5             body,input,button,select,h1{
  6                 font-size: 30px;
  7                 line-height: 1.8;
  8             }
  9         </style>
 10         <meta charset="UTF-8">
 11         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 12     </head>
 13     <body>
 14         <h1>员工查询</h1>
 15         <label>请输入员工编号：</label>
 16         <input type="text" id="keyword"/>
 17         <button id="search">查询</button>
 18         <p id="searchResult"></p>
 19         
 20         <h1>员工创建</h1>
 21         <label>请输入员工姓名:</label>
 22         <input type="text" id="staffName"/><br>
 23         
 24         <label>请输入员工编号:</label>
 25         <input type="text" id="staffNumber"/><br>
 26         
 27         <label>请输入员工性别:</label>
 28         <select id="staffSex">
 29             <option>男</option>
 30             <option>女</option>
 31         </select><br>
 32         
 33         <label>请输入员工职位:</label>
 34         <input type="text" id="staffJob"/> 
 35         
 36         <button id="save">保存</button>
 37         
 38         <p id="creatteResult"></p>
 39         
 40         <script>
 41             
 42             var request;
 43             //1.创建XMLHttpRequest对象
 44                 if(window.XMLHttpRequest){
 45                     //建立IE7,IE8,FireFox,Mozilla,Safari,Opera对象
 46                     request=new XMLHttpRequest();
 47                     if(request.overrideMimeType){
 48                         request.overrideMimeType("text/xml");
 49                     }
 50                 }else if(window.ActiveXObject){
 51                     //建立IE5,IE6对象
 52                     var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
 53                     for(var i=0;i<activexName.length;i++){
 54                         try{
 55                             request=new ActiveXObject(activexName[i]);
 56                             break;
 57                         }catch(e){}
 58                     }
 59                 }
 60             
 61             //GET请求
 62             document.getElementById("search").onclick=function(){
 63                 //2.获取文本框中用户输入的内容
 64                 var Number=document.getElementById("keyword").value;
 65                 //3.使用open方法设置和服务器端交互的基本信息
 66                 request.open("GET","Service?number="+Number);
 67                 //4.发送数据，开始与服务器端交互
 68                 request.send();
 69                 //5.判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据
 70                 request.onreadystatechange=function(){
 71                     if(request.readyState===4){
 72                         if(request.status===200){
 73                             //获得字符串形式的响应数据
 74                             var message=request.responseText;
 75                             //固定用法,向div标签中填充文本内容的方法
 76                             var div=document.getElementById("searchResult");
 77                             div.innerHTML=message;
 78                         }else{
 79                             alert("发生错误:"+ request.status);
 80                         }
 81                     }
 82                 };
 83             };
 84             
 85             //POST请求
 86             document.getElementById("save").onclick=function(){
 87                 request.open("POST","Service");
 88                 var data="name"+ document.getElementById("staffName").value
 89                          +"&number="+ document.getElementById("staffNumber").value
 90                          +"&sex="+ document.getElementById("staffSex").value
 91                          +"&job="+ document.getElementById("staffJob").value;
 92                 //POST方式交互所需要增加的代码,用于查询响应中的某个字段的值
 93                 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 94                 request.send(data);
 95                 request.onreadystatechange=function(){
 96                     if(request.readyState===4){
 97                         if(request.status===200){
 98                             var message=request.responseText;
 99                             var div=document.getElementById("searchResult");
100                             div.innerHTML=message;
101                         }else{
102                             alert("发生错误:"+ request.status);
103                         }
104                     }
105                 };
106             };
107         </script>
108     </body>
109 </html>
posted on 2016-02-27 08:16 陀螺ING 阅读(1268) 评论(0) 收藏举报
刷新页面返回顶部
郭贤达的博客

公告
