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. 如何用ZBrush确定头部五官的位置

    之前和大家讲过如何在ZBrush中确定头部雕刻,在第一阶段中面数很少,只能将大型体雕刻出来,由于面数太少不能进行下面的雕刻.接下来第二阶段的调整,需要重新分布模型表面的网格,增加面数,进行五官的位置的 ...

  2. 边工作边刷题：70天一遍leetcode: day 85-3

    Zigzag Iterator 要点: 实际不是zigzag而是纵向访问 这题可以扩展到k个list,也可以扩展到只给iterator而不给list.结构上没什么区别,iterator的hasNext ...

  3. 线性代数与MATALB1

    1图论的一个基本应用 下图描述了4个城市之间的航空航线图, 为了描述着4个城市之间航线的邻接关系,定义邻接矩阵 第i行描述从城市i出发,可以达到各个城市的情况, 可以证明,矩阵A^N表示一个人连续坐N ...

  4. Java虚拟机详解05----垃圾收集器及GC参数

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  5. Mecanim 学习概述

    前言 我要逐个击破Unity中的知识点,包括1.Mecanim 2.NavMesh 3.4.3之后新的GUI系统 4.新的2D功能 5.Shader 6.性能及后期处理 早在2013年初的时候就听说过 ...

  6. flex+AS3编程规范

    flex+AS3编程规范 Flex+AS3编码规范 http://www.cnblogs.com/jiahuafu/   1.  缩写: 尽量避免使用缩写,使用缩写时尽量和Flex保持一致.但要记住一 ...

  7. Studio 从入门到精通 （一）

    目标:Android Studio新手–>下载安装配置–>零基础入门–>基本使用–>调试技能–>构建项目基础–>使用AS应对常规应用开发 AS简介 经过2年时间的研 ...

  8. mysqli_stmt预处理类

    <?php  $mysqli=new mysqli("localhost", "root", "123456", "xsph ...

  9. readLine读取socket流的时候产生了阻塞

    BufferedReader的readLine方法,只要读到流结束或者流关闭,就会返回null 在读取文件的时候,文件结尾就是流的结尾,但对于Socket而言不是的.不能认为流中数据读完了就是流的结尾 ...

  10. Silverlight 利用DataGrid行加载事件动态控制行列显示

    datagrid的绑定很好用,但有时候我们往往需要根据model内容来动态控制行或者列,该怎么办呢? 这时候,我们就需要用到行加载事件:在加载每一行数据的时候,根据数据的内容来控制相应的表格显示. 比 ...