<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. final,static

    如果输入参数在方法体执行过程中,强制不能被修改,那么参数类型前加final比较安全. final修饰的函数会被编译器优化,优化意味着编译器可能将该方法用内联(inline)方式载入.final修饰变量 ...

  2. C语言常用的小代码

    圆周率Pi tan(Pi/4)=1 => Pi=4*arctan(1) 反正切函数arctan()在C语言里表示为atan(),为保证精度取圆周率的代码如下: const double Pi = ...

  3. mysql四种事务隔离级的说明

    ·未提交读(Read Uncommitted):允许脏读,也就是可能读取到其他会话中未提交事务修改的数据 ·提交读(Read Committed):只能读取到已经提交的数据.Oracle等多数数据库默 ...

  4. libreoffice转office文档为pdf文档

    libreoffice5.0 --invisible --convert-to pdf:writer_pdf_Export --outdir  "/root/" "bb. ...

  5. 在Ext JS 5应用程序中如何使用路由

    简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...

  6. C++ Socket编程步骤 【转】

    sockets(套接字)编程有三种,流式套接字(SOCK_STREAM),数据报套接字(SOCK_DGRAM),原始套接字(SOCK_RAW):基于TCP的socket编程是采用的流式套接字. 服务器 ...

  7. 理解Javascript参数中的arguments对象

    ECMAScript中函数没有标签名的特性,所以ECMAScript函数中没有重载. Javascript中arguments的存在可以弥补javascript中函数没有重载的不足. Javascri ...

  8. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  9. SqlServer统计最近一周的数据

    select * from 表名 where  DATEDIFF( day, 日期字段列名,getdate())<7 and DATEPART(w,  日期字段列名) <DATEPART( ...

  10. 在mac上安装svn客户端

    mac 10.8上面,默认是没有svn客户端的,可以通过以下两种方式来安装:    1.单独安装xcode命令行工具,安装完成后,在终端中就可以使用svn命令了,目前版本是1.6.18:    2.去 ...