<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. CentOS快速搭建subversion服务器

    环境:centos x86_64说明:使用daemon的方式来跑svn,不使用apache首先到:http://subversion.tigris.org/ 下载最新的subversion源码 我下的 ...

  2. HDP2.4安装(二)：Centos7配置

    Centos7 Minimal Install 安装完成后是不支持上网的,并且大部分常用的软件也未安装,首先要解决的问题就是网络配置.当网络配通后,即可通过Xshell或其它工具来远程进行操作与管理, ...

  3. 剑指offer系列43---判断平衡二叉树

    [题目]判断一颗二叉树是不是平衡二叉树. * 平衡二叉树定义:任意子节点深度相差不超过1.[思路]由上题,利用递归得到二叉树每个结点的深度同时比较. package com.exe9.offer; i ...

  4. 【多线程】Future和FutureTask以及CompletionService

    Future接口 此接口主要用于: 代表异步计算的执行结果: 用于可取消的task:(比使用interrupt实现取消要方便 ) FutureTask类 FutureTask是Future的一个实现类 ...

  5. 使用express搭建第一个Web应用【Node.js初学】

    来源:http://jingyan.baidu.com/article/bad08e1ee501e009c8512106.html express是一个开源的node.js项目框架,初学者使用expr ...

  6. 黄聪：Wordpress、PHP使用POST数据过大导致MySQL server has gone away报错原因分析

    错误原因: 当POST的数据超过 max_allowed_packet 就会报 MySQL server has gone away 的错误. 1.查看当前Mysql的 max_allowed_pac ...

  7. Maven exclusion

    <dependency><exclusions> <exclusion> <groupId>xx</group> <artifactI ...

  8. Ant -- Another Neat Tool

      最早用来构建著名的Tomcat,可以看成是一个Java版本的Make.也正因为使用了Java,Ant是跨平台的.   Ant有一个构建脚本build.xml <?xml version = ...

  9. JavaScript: bind apply call

    var foo = function(age,sex){ console.log(this.name,age,sex); }; //call将改变函数运行的context foo.call({name ...

  10. studio_ 优化Android Studio 启动、编译和运行速度？

    http://www.admin10000.com/document/6842.html: 作为一名 Android 程序员,选择一个好的 IDE 工具可以使开发变得非常高效,很多程序员喜欢使用 Go ...