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. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  2. Git 详解

    1. Git 1.1. Git是何方神圣? Git是用C语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历史记录状态).另一个状 态可以是不同的文 ...

  3. 线程操作案例--生产者与消费者，Object类对线程的支持

    本章目标 1)加深对线程同步的理解 2)了解Object类中对线程的支持方法. 实例 生产者不断生产,消费者不断消费产品. 生产者生产信息后将其放到一个区域中,之后消费者从区域中取出数据. 既然生产的 ...

  4. this关键字的使用

    一,表示类中属性 1,没有使用this的情况 class Person{ // 定义Person类 private String name ; // 姓名 private int age ; // 年 ...

  5. intellij IDEA15 设置背景颜色

    File--> Settings 2. Appearance & Behavior --> Appearance 设置边框背景颜色 3. Editor --> Colors ...

  6. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  7. 【.NET进阶】函数调用--函数栈

    原文:http://www.cnblogs.com/rain-lei/p/3622057.html 函数调用大家都不陌生,调用者向被调用者传递一些参数,然后执行被调用者的代码,最后被调用者向调用者返回 ...

  8. ztree插件(JQuery Tree)

    本次使用的ztree插件,基本上所有的需求都能满足,可谓功能强大. * [http://www.ztree.me/v3/api.php zTree v3.0 API 文档] * [http://www ...

  9. 图像相似度算法的C#实现及测评

    近日逛博客的时候偶然发现了一个有关图片相似度的Python算法实现.想着很有意思便搬到C#上来了,给大家看看. 闲言碎语 才疏学浅,只把计算图像相似度的一个基本算法的基本实现方式给罗列了出来,以至于在 ...

  10. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...