<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. 支付宝客户端支付配置RSA公钥的问题错误，导致收不到回发通知

    没收到通知的原因是你们的商户公钥上传地址弄错了,应该上传到合作伙伴管理,您上传到无线wap哪里了,把您的公钥,从无线wap哪里复制贴到合作伙伴管理即可

  2. nova分析（6）—— nova service启动过程

    Nova project下面具有多个service,api,compute,sceduler等等,他们的启动过程都几乎类似,这一篇博客就详细记录nova-sceduler的启动过程.文章中贴出的源码都 ...

  3. (转)手机端html5触屏事件(touch事件)

    本文转载自:http://blog.sina.com.cn/s/blog_51048da70101f0ex.html touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时 ...

  4. Java-Thread

    1. 线程的创建和启动 1.1 继承Thread 在run方法里,通过this获取当前线程. 多个线程不能共享实例变量. 1.2 通过实现接口 1.2.1 实现Runable接口 在run方法里,只能 ...

  5. [系统开发] Postfix 邮件管理系统

    一.简介 开发时间:2012年 开发工具:Perl CGI 这是我开发的 Postfix 邮件管理系统,通过它可以安全.方便的对邮件域名.用户.权限.组.邮箱容量.安全等进行各种设置:界面样式借鉴了 ...

  6. POJ 1611 The Suspects（并查集，简单）

    为什么ACM的题意都这么难懂,就不能说的直白点吗?还能不能好好的一起刷题了? 题意:你需要建一个n的并查集,有m个集合,最后要输出包含0的那个集合的元素的个数. 这是简单并查集应用,所以直接看代码吧! ...

  7. nginx重写规则报nginx: [emerg] directive "rewrite" is not terminated by ";"

    对于下面的重写规则 rewrite ^/gongying/([\d]{8})_([\d]+).html$ /index.php?app=support&act=view&pts=$1& ...

  8. 转-Activity之间数据传递之Intent数据传递

    Intent意图 可用于Activity之间的数据传递,一般可分为下面两种情况,从当前Activity传递到目标Activity后有无返回值: 1.传递后无返回值的情况: 1 2 3 4 5 6 7 ...

  9. Python进阶05 循环设计

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在"循环"一节,我们已经讨论了Python基本的循环语法.这一 ...

  10. Singleton 单例模板

    // singleton.h #ifndef SINGLETON_H #define SINGLETON_H // 单例基类模板 template <class T> class Sing ...