JS实现Ajax---例：获取服务器时间
Ajax在本质上是一个浏览器端的技术 XMLHttpRequest
XMLHttpRequest对象
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。 简而言之：它可以异步从服务器端获取txt或者xml数据
老版本IE: new ActiveXObject("Microsoft.XMLHTTP");
新版本浏览器： new XMLHttpRequest();
为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数 xhr.open("GET", "GetAreasByAjax.ashx", true);
1.2GET方式请求可以设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式：
1.1设置参数：xhr.open("POST", "GetAreasByAjax.ashx", true);
1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
回调函数
判断时注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4
readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开(已经初始化了)。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕
XMLHttpRequest常用属性
onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载
responseText 使用字符串返回HTTP响应
responseXML（xml对象，不是xml字符串） 使用XML DOM对象返回HTTP响应,返回的是一个对象，不是xml字符串。
通过ajax发起post请求时，需要注意的3点：
1.初始化的时候必须设置为post
xhr.open('post','url',true);
2.必须设置请求报文头Content-Type的值为：application/x-www-form-urlencoded
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
3.如果有请求报文体，则在调用send()方法的时候，设置。
xhr.send('txtName=steve&gender=male&age=18');
案例
服务器段代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Clear();//清除之前的请求
context.Response.Write(DateTime.Now.ToString("hh:mm:ss")); context.Response.End();//结束请求，防止相应其它内容
}
页面代码：
<body>
<input id="btnPost" type="button" value="POST获取服务器时间" />
<input id="btn" type="button" value="GET获取服务器时间" />
<div id="div1" style="font-size:18px; color:red; font-weight:bolder;"> </div>
</body>
GET方式：
//确定事件
document.getElementById('btn').onclick = function () {
//JS实现Ajax步骤
//1.创建XMLHttpRequest对象
//1.1首先创建一个空对象
var xhr = null;
//1.2新浏览器支持XMLHttpRequest 旧浏览器（IE6）支持ActiveXObject
//为了兼容，判断
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (ActiveXObject) {
//1.3别忘了重要的参数Microsoft.XMLHttp
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2.设置回调函数
xhr.onreadystatechange = function () {
//回调函数中有XMLHttpRequest的三个重要属性
//xhr.readyState 有五种状态0未初始化，1已打开，2已发送，3正在接收，4已加载
//xhr.status 返回http状态码200表示成功
//xhr.responseText 这里使用字符串返回http响应 （相应方式多种）
if (xhr.readyState == && xhr.status == ) {
document.getElementById('div1').innerHTML = xhr.responseText;
};
}
//3.初始化对象，三个参数，①请求方式get，post②请求的一般处理程序③bool(是否是异步请求)
//解决缓存问题的两种方法
//方法一//随机数解决
//xhr.open('get', 'Handler1.ashx?m='+Math.random(), true);
//方法二，设置请求报文头，，，在初始化完毕后，发起请求之前设置请求报文头
xhr.open('get', 'dd/Handler1.ashx', true);
xhr.setRequestHeader('if-modified-since', '');
//4.发起请求 参数是请求报文体，，，get请求没有请求报文体用null
xhr.send(null);
}//onclick
}//onload
POST方式：
//确认事件
document.getElementById('btnPost').onclick = function () {
var xhr = null;
//POST请求
//1.创建对象
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//2.设置回调函数
xhr.onreadystatechange = function () {
//三个重要属性
if (xhr.readyState== && xhr.status==) {
document.getElementById('div1').innerHTML = xhr.responseText;
}
}
//3.初始化 三个参数
xhr.open('post', 'dd/Handler1.ashx', true);
//3.1post提交必须设置请求报文头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送请求,没有请求报文体就写null，
//如果有请求报文体，则在调用send()方法的时候，设置。
//xhr.send('txtName=steve&gender=male&age=18');
xhr.send(null);
}//onclick
JS实现Ajax---例：获取服务器时间的更多相关文章
- JS获取服务器时间并且计算距离当前指定时间差的函数
项目中遇到了从服务器获取时间,现在记录一下方便以后查询: 1.后台代码:(创建一个date对象并以JSON的形式返回去) // 获取服务器时间 public String getNowServerTi ...
- JS 中获取服务器时间的注意点
在通过js获取服务器时间时,遇到了小小的问题,但造成的影响挺大的,所以写出来提醒大家,在获取服务器时间时一定要细心要多测试多验证. js 中使用以下方法获取服务器时间时要注意两点: 1.xhr.ope ...
- JS中new Date（）用法及获取服务器时间
1.获取服务器时间: var now = new Date($.ajax({async: false}).getResponseHeader("Date")); 2.new Dat ...
- php获取服务器时间的代码
php获取服务器时间的代码. 用php的date函数即可来获取服务器上的时间: <?php //将时区设置为中国 date_default_timezone_set("PRC&quo ...
- Unity 获取服务器时间 HTTP请求方式
在写每日签到的时候,我居然使用的是本地时间...被项目经理笑哭了...., 如果你在写单机游戏,没有游戏服务器,但又不想使用本地时间,就可以采用下面方法. 方法总结: 1. 使用HTTP请求获取服务器 ...
- Javascript获取服务器时间
//获取服务器时间 var getServerDate = function () { var xmlHttpRequest = null, serverDate = new Date ...
- 获取服务器时间ajax
$.ajax({ type:"OPTIONS", url:"/", complete:function(x){ // alert(x.getResponseHe ...
- JavaScript or JQuery 获取服务器时间
用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了(有的IE下扔不会正常获取,还是更建议走 ...
- js 倒计时功能，获取当前时间的年月日，时分秒
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
随机推荐
- Ubuntu 14.04 LTS Server 无法挂载光盘 启动initramfs等问题
今天需要在戴尔R410服务器上装64位的Linux,师兄给了个14.04的server 64位镜像.一开始打算用U盘安装,用软碟通烧写镜像之后,在服务器端设置从U盘启动,但是安装到一半出现了光盘无法挂 ...
- 2014 Super Training #4 E Paint the Grid Reloaded --联通块缩点+BFS
原题: ZOJ 3781 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3781 题意: 给一个n*m的X,O构成的格子,对 ...
- POJ 2142 The Balance【扩展欧几里德】
题意:有两种类型的砝码,每种的砝码质量a和b给你,现在要求称出质量为c的物品,要求a的数量x和b的数量y最小,以及x+y的值最小. 用扩展欧几里德求ax+by=c,求出ax+by=1的一组通解,求出当 ...
- java 8-6 抽象的练习
1. 猫狗案例 具体事物:猫,狗 共性:姓名,年龄,吃饭 分析:从具体到抽象 猫: 成员变量:姓名,年龄 构造方法:无参,带参 成员方法:吃饭(猫吃鱼) 狗: 成员变量:姓名,年龄 构造方法:无参,带 ...
- Android Studio系列教程三--快捷键
Android Studio系列教程三--快捷键 2014 年 12 月 09 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang.com/ ...
- ArcGis 统计方法
from:http://blog.sina.com.cn/s/blog_4177d50b0100fjbg.html 概述 一般常用的统计功能例如:唯一字段统计.数据行数统计.数据值求和统计等. 1.基 ...
- iOS下使用SHA1WithRSA算法加签源码
首先了解一下几个相关概念,以方便后面遇到的问题的解决: RSA算法:1977年由Ron Rivest.Adi Shamirh和LenAdleman发明的,RSA就是取自他们三个人的名字.算法基于一个数 ...
- [资料收集]MySQL在线DDL工具pt-online-schema-change
MySQL在线DDL工具pt-online-schema-change pt-online-schema-change使用说明(未完待续) 官网
- VMware 不可恢复错误(svga)”解决方法
虚拟机VMware 文件在迁移到另一台计算机时出现"VMware Workstation 不可恢复错误(svga)" 将另一台机器的 VMware 文件拷贝至本机,打开虚拟机出现 ...
- 双绞线线序+POE供电网线
0 重点 一般情况下会用1236(橙白.橙.绿白.绿)传输数据,1.2用于发送,3.6用于接收,45(蓝.蓝白)电源正极 78(棕白.棕)电源负极. 一 网线线序 12发 36收 二 poe网线供电 ...