<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. mysql row number的实现

    CREATE TABLE `test_id` (`id` int(11) NOT NULL DEFAULT 0 ,`name` varchar(255) CHARACTER SET utf8 COLL ...

  2. c#(winform)中ComboBox添加Key/Value项、获取选中项、根据Key

    WinForm下的ComboBox默认是以多行文本来设定显示列表的, 这通常不符合大家日常的应用, 因为大家日常应用通常是键/值对的形式去绑定它的. 参考了一些网上的例子,最终写了一个辅助类用于方便对 ...

  3. php 安装shpinx扩展

    cd /home/packages wget http://sphinxsearch.com/files/sphinx-0.9.9.tar.gz tar xzvf sphinx-0.9.9.tar.g ...

  4. php 添加redis扩展(二)

    php代码操作redis 1.连接 <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 63 ...

  5. 访问本机的WEB API 报400错误

    当时用的IP是127.0.0.1 报400错误,换成 localhost 后正常.

  6. erlang的escript脚本

    参考霸爷的博客 测试例子 #!/usr/bin/env escript %%! -smp enable -sname mmcshadow -mnesia debug verbose[/color] m ...

  7. Eclipse:启动时提示"Failed to load the JNI shared library"的解决方案

    今天打开Eclipse,弹出提示框"Failed to load the JNI shared library" 原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jr ...

  8. 【WP之一】]独立存储

    介绍: 提供一个磁盘存储空间,他是一种虚拟的文件系统,能存储小量的数据:在默认的情况下,它只能存储1MB的文件.根据使用方式及功能的不同,独立存储空间又包含两部分:独立设置存储和独立文件存储.除非卸载 ...

  9. java数组初始化的三种方式

      //第一种 int[] is= new int[3]; is[0]=1; is[1]=2; is[2]=3; //第二种 int[] is2= {1,2,3}; //第三种 int[] is3= ...

  10. RAC_Oracle集群服务安装RAC（案例）

    2015-01-23 Created By BaoXinjian Thanks and Regards