<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. ##DAY12 UITableViewCell自定义

    ##DAY12 UITableViewCell自定义 #pragma mark -------自定义视图步骤--------- 自定义视图步骤: 1)在自定义cell类中,将所有cell要显示的子视图 ...

  2. Spark开发指南

    原文链接http://www.sxt.cn/info-2730-u-756.html 目录 Spark开发指南 简介 接入Spark Java 初始化Spark Java 弹性分布式数据集 并行集合 ...

  3. IDL 遍历 XML文档示例

    IDL解析XML文档同样也有2种方法:DOM和SAX方式:两种方法在IDL自带的帮助里面有详细介绍,可以去查看. IDL 源码PRO sample_recurse, oNode, indent COM ...

  4. AddBinary

    二进制加法 输入2个字符串,字符串内由0和1组成:计算二者之和,返回字符串 Given two binary strings, return their sum (also a binary stri ...

  5. i春秋----Misc

    好久没有写 博客今天更新多了一些 解题思路:题目做多了,自然能够想到是凯撒解密: 查看得到答案; flag{4c850c5b3b2756e67a91bad8e046dda} 2: 解题思路:是我想太多 ...

  6. 微信小程序onLaunch、onLoad执行生命周期

    原文转载自:微信小程序onLaunch.onLoad执行生命周期 1.需求:先执行App的onLaunch添加验证权限等,再执行Page里的onLoad. 2.问题:还没有等onLaunch执行完成, ...

  7. live Templates 活动模板. 配置完之后,就可以快速编码-代码块

    配置:live Templates 活动模板. 配置完之后,就可以快速编码-代码块. 输入startflask敲回车:   就会生成代码:   怎么做到的呢? 如下:   注意第七步: 原本不是cha ...

  8. Android Studio中解决jar包重复依赖导致的代码编译错误

    在原本的代码中已经使用了OKHTTP和rxjava,然后今天依赖retrofit的时候一直报错 Program type already present: okhttp3.internal.ws.Re ...

  9. Go语言规格说明书 之 内建函数(Built-in functions)

    go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...

  10. 转入Python3.5

    Future 我决定从python2.7转到python3.5,毕竟python3才是未来,业余程序员也是有追求的 嵌入发布 版本3.5中的新特性.可以将python嵌入用户程序,变成程序的一部分,随 ...