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---例：获取服务器时间的更多相关文章

  1. JS获取服务器时间并且计算距离当前指定时间差的函数

    项目中遇到了从服务器获取时间,现在记录一下方便以后查询: 1.后台代码:(创建一个date对象并以JSON的形式返回去) // 获取服务器时间 public String getNowServerTi ...

  2. JS 中获取服务器时间的注意点

    在通过js获取服务器时间时,遇到了小小的问题,但造成的影响挺大的,所以写出来提醒大家,在获取服务器时间时一定要细心要多测试多验证. js 中使用以下方法获取服务器时间时要注意两点: 1.xhr.ope ...

  3. JS中new Date（）用法及获取服务器时间

    1.获取服务器时间: var now = new Date($.ajax({async: false}).getResponseHeader("Date")); 2.new Dat ...

  4. php获取服务器时间的代码

    php获取服务器时间的代码. 用php的date函数即可来获取服务器上的时间:  <?php //将时区设置为中国 date_default_timezone_set("PRC&quo ...

  5. Unity 获取服务器时间 HTTP请求方式

    在写每日签到的时候,我居然使用的是本地时间...被项目经理笑哭了...., 如果你在写单机游戏,没有游戏服务器,但又不想使用本地时间,就可以采用下面方法. 方法总结: 1. 使用HTTP请求获取服务器 ...

  6. Javascript获取服务器时间

    //获取服务器时间 var getServerDate = function () {     var xmlHttpRequest = null,     serverDate = new Date ...

  7. 获取服务器时间ajax

    $.ajax({ type:"OPTIONS", url:"/", complete:function(x){ // alert(x.getResponseHe ...

  8. JavaScript or JQuery 获取服务器时间

    用js做时间校正,获取本机时间,是存在bug的. 使用js也可获取到服务器时间,原理是使用 ajax请求,返回的头部信息就含有服务器端的时间信息,获取到就可以了(有的IE下扔不会正常获取,还是更建议走 ...

  9. js 倒计时功能，获取当前时间的年月日，时分秒

    一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...

随机推荐

  1. 实习小记-python中不可哈希对象设置为可哈希对象

    在这篇之前,我又专门翻译过官方python3.3的可哈希对象文档,大家可以先参考一下: 实习小记-python中可哈希对象是个啥?what is hashable object in python? ...

  2. UESTC 887 方伯伯的儿童节 --树形DP

    定义: 1.dp[u][1]表示u这个点设立糖果发放点且u这棵子树满足条件时的最少糖果点数 2.dp[u][0]表示u这个点不设立发放点且u这棵子树满足条件时的最少糖果点数 设v1,v2……vn为u的 ...

  3. 二维背包（钟神想要的）（不是DP）

    [问题描述] 背包是个好东西,希望我也有.给你一个二维的背包,它的体积是? × ?.现在你有一些大小为1× 2和1×3的物品,每个物品有自己的价值.你希望往背包里面装一些物品,使得它们的价值和最大,问 ...

  4. [3D跑酷] MissionManager

    前言 许久没有更新日志了,之前写了GUIManager,GUIClickEventReceiver还有AudioManager,这次写MissionManager 引用关系 首先看下MissionMa ...

  5. GitHub入门之一：使用github下载项目

    git作为目前比较流行的版本控制系统,被各个互联网公司广泛使用着.目前国外的网站有GitHub,国内的有CSDN和OSCHINA的git. 使用git可以很方便地进行多人协作和版本控制.作为一个入门小 ...

  6. 17SpringMvc_在业务控制方法中写入包装User的模型来收集参数——解决问题

    在解决问题之前,我要说明一下jsp页面上填入信息,一个用户的信息比如用户的名字,用户的电话,用户的手机等等,在这个jsp页面上填好信息后,转到有个action处理这个信息.原理是什么? 在jsp页面上 ...

  7. 13SpringMvc_限定某个业务控制方法，只允许GET或POST请求方式访问

    这篇文章要实现的功能是:在一个Action中,有些业务方法只能是post提交上来的才能执行,有些方法是只能get提交上来的才能执行. 比如上篇文章中的UserAction.java(代码如下) pac ...

  8. JS框架之收集专帖

    1.KNOCKOUT.JS 官网:http://knockoutjs.com/ 学习:http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.h ...

  9. usb驱动开发8之配置描述符

    前面分析了usb的四大描述符之端点描述符,接口描述符(每一个接口对应一个功能,与之配备相应驱动),下面是看配置描述符还是看设备描述符呢??我们知道,设备大于配置,配置大于接口,接口可以有多种设置. 我 ...

  10. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...