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 == 4 && xhr.status == 200) {
                        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', '0');
                //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==4 && xhr.status==200) {
                        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