<html>

     <head>

         <title>Demo</title>

         <style>

             body,input,button,select,h1{

                 font-size: 30px;

                 line-height: 1.8;

             }

         </style>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

     </head>

     <body>

         <h1>员工查询</h1>

         <label>请输入员工编号：</label>

         <input type="text" id="keyword"/>

         <button id="search">查询</button>

         <p id="searchResult"></p>

         <h1>员工创建</h1>

         <label>请输入员工姓名:</label>

         <input type="text" id="staffName"/><br>

         <label>请输入员工编号:</label>

         <input type="text" id="staffNumber"/><br>

         <label>请输入员工性别:</label>

         <select id="staffSex">

             <option>男</option>

             <option>女</option>

         </select><br>

         <label>请输入员工职位:</label>

         <input type="text" id="staffJob"/> 

         <button id="save">保存</button>

         <p id="creatteResult"></p>

         <script>

             var request;

             //1.创建XMLHttpRequest对象

                 if(window.XMLHttpRequest){

                     //建立IE7,IE8,FireFox,Mozilla,Safari,Opera对象

                     request=new XMLHttpRequest();

                     if(request.overrideMimeType){

                         request.overrideMimeType("text/xml");

                     }

                 }else if(window.ActiveXObject){

                     //建立IE5,IE6对象

                     var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];

                     for(var i=0;i<activexName.length;i++){

                         try{

                             request=new ActiveXObject(activexName[i]);

                             break;

                         }catch(e){}

                     }

                 }

             //GET请求

             document.getElementById("search").onclick=function(){

                 //2.获取文本框中用户输入的内容

                 var Number=document.getElementById("keyword").value;

                 //3.使用open方法设置和服务器端交互的基本信息

                 request.open("GET","Service?number="+Number);

                 //4.发送数据，开始与服务器端交互

                 request.send();

                 //5.判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据

                 request.onreadystatechange=function(){

                     if(request.readyState===4){

                         if(request.status===200){

                             //获得字符串形式的响应数据

                             var message=request.responseText;

                             //固定用法,向div标签中填充文本内容的方法

                             var div=document.getElementById("searchResult");

                             div.innerHTML=message;

                         }else{

                             alert("发生错误:"+ request.status);

                         }

                     }

                 };

             };

             //POST请求

             document.getElementById("save").onclick=function(){

                 request.open("POST","Service");

                 var data="name"+ document.getElementById("staffName").value

                          +"&number="+ document.getElementById("staffNumber").value

                          +"&sex="+ document.getElementById("staffSex").value

                          +"&job="+ document.getElementById("staffJob").value;

                 //POST方式交互所需要增加的代码,用于查询响应中的某个字段的值

                 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                 request.send(data);

                 request.onreadystatechange=function(){

                     if(request.readyState===4){

                         if(request.status===200){

                             var message=request.responseText;

                             var div=document.getElementById("searchResult");

                             div.innerHTML=message;

                         }else{

                             alert("发生错误:"+ request.status);

                         }

                     }

                 };

             };

         </script>

     </body>

 </html>

XMLHttpRequest的五步使用方法的更多相关文章

  1. AJAX--XMLHttpRequest五步使使用方法

    传统浏览方式和AJAX方式的不同 多数Web应用程序都使用请求/响应模型从server上获得完整的HTML页面.经常是点击一个button,等待server对应,在点击还有一个button.然后在等待 ...

  2. Ajax学习（三）——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  3. 五步教你实现使用Nginx+uWSGI+Django方法部署Django程序

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...

  4. ASP.NET五步打包下载Zip文件

    本文版权归博客园和作者吴双共同所有,转载和爬虫请注明原文地址:www.cnblogs.com/tdws 首先分享几个振奋人心的新闻: 1.谷歌已经宣布加入.NET基金会 2.微软加入Linux基金会, ...

  5. C语言程序设计入门学习五步曲（转发）

    笔者在从事教学的过程中,听到同学抱怨最多的一句话是:老师,上课我也能听懂,书上的例题也能看明白,可是到自己动手做编程时,却不知道如何下手.发生这种现象的原因有三个: 一.所谓的看懂听明白,只是很肤浅的 ...

  6. 五步搞定Android开发环境部署

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入 Android浪潮的朋友们,为了确保大家能顺利完成开发 ...

  7. 五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

      在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭 ...

  8. java入门第五步之数据库项目实战【转】

    在真正进入代码编写前些进行一些工具的准备: 1.保证有一个可用的数据库,这里我用sql server 2000为例,2.拥有一个ide,如ecelise或myeclipse等,这里我使用的是myecl ...

  9. iOS 之美：iOS Delegate 使用五步曲

    在iOS 开发中, 搞清楚Delegate 是需要花些时间的. Delegate 本来是软件架构设计的一种理念.对于像手机这样一个有限的设备,我们需要充分考虑到:内存要尽量省着用: 视图之间的关系要清 ...

随机推荐

  1. (zt)Lua的多任务机制——协程(coroutine)

    原帖:http://blog.csdn.net/soloist/article/details/329381 并发是现实世界的本质特征,而聪明的计算机科学家用来模拟并发的技术手段便是多任务机制.大致上 ...

  2. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...

  3. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 关于windows下c/c++的rand()的一个测试

    ,,,}; ,-,,}; ,y=; ;t<<<;t++){ ; x+=xs[d];y+=ys[d]; 在(x,y)绘制一个点; } 根据rand()%4的值决定点的移动方向,生成图像 ...

  5. form 转json，将form表单中的数据序列化数组后转换为Json

    页面中引用了jquery,第一想到的就是序列化,但是序列化后的表单字段为a=1&b=2这种. 这里写一个jquery的扩展方法 $.fn.serializeObject = function( ...

  6. 使用eclipse和maven创建activiti项目基础配置

    项目组最近的项目使用到了activiti工作流,到处查找了一些资料后,初步完成任务.但是我所做的事只是在搭好的环境中调用接口和方法操作,因此自己尝试着也从搭建环境入手,以下是成功实现以后的记录. 实现 ...

  7. 【转】SQL SERVER DateTime类型的精度

    先看下边的SQL 语句 CREATE TABLE #DateTest( Id INT, SampleDate DATETIME ) INSERT INTO #DateTest VALUES(1,'1 ...

  8. 黄聪：查看mysql数据库真正的data目录

    终于找到了mysql数据库data目录在哪里! 用show variables like 'datadir',可查看真正的data目录 原文:http://blog.csdn.net/dmz1981/ ...

  9. 队列(Queue)--环形队列、优先队列和双向队列

    1. 队列概述 队列和堆栈都是有序列表,属于抽象型数据类型(ADT),所有加入和删除的动作都发生在不同的两端,并符合First In, First Out(先进先出)的特性. 特性: ·FIFO ·拥 ...

  10. CF 501C Misha and Forest 好题

    C. Misha and Forest   Let's define a forest as a non-directed acyclic graph (also without loops and ...