javascript版Ajax请求

什么是Ajax请求，Ajax也就是“Asynchronous JavaScript and XML”（异步JavaScript和XML），无刷新数据读取。能减少流量的消耗，也提高了浏览的流畅性，给用户更加友好的体验。

发送Ajax请求也就几步便可完成

第一步：创建异步对象

var xhr = new XMLHttpRequest();

这样创建的异步对象是给新版的浏览器用的，当然不乏一些用着旧版浏览器的老客户。旧版的创建方法如下：

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

这样我们可以写出如下形式来兼容两个类型的浏览器

var xhr = null;

if(window.XMLHttpRequest){

    xhr = new XMLHttpRequest();

}else{

    xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

第二步：设置参数

get方法：xhr.open('get', 'DataResponse.ashx', true);

post方法：xhr.open("post", "DataResponse.ashx", true);

两个方式的区别自己去百度了，无非就是通过什么方式向发送请求的地址发送数据

第三步：设置编码头

这一步其实可以忽略：

get方法：

                //让get请求不从浏览器获取缓存数据（可去）

                xhr.setRequestHeader("If-Modified-Sine", "0");

　　 post方法

                //编码格式

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

　　设置这个报文头的具体作用都写在了上面，貌似post方法中，这个设置编码格式是一定要弄的，不然会得不到数据

第四步：发送数据

xhr.send();

其中括号中可以放置要发送的数据，没有想发送的数据便留空。

自己做的一个小型网站来演示下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Get.aspx.cs" Inherits="test.Get" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            //javascript 的Ajax get方法

            document.getElementById("getAjax").onclick = function () {

                //向服务器请求时间，创建异步对象

                var xhr = new XMLHttpRequest();

                //设置参数

                xhr.open('get', 'DataResponse.ashx', true);

                //让get请求不从浏览器获取缓存数据（可去）

                xhr.setRequestHeader("If-Modified-Sine", "");

                //设置回调函数

                xhr.onreadystatechange = function () {

                    if (xhr.readyState ==  && xhr.status == ) {

                        var res = xhr.responseText;

                        alert(res);

                    }

                }

                //发送数据

                xhr.send();

            }

            //javascript 的Ajax Post方法

            document.getElementById("postAjax").onclick = function () {

                //向服务器请求时间，创建异步对象

                var xhr = new XMLHttpRequest();

                //设置参数

                xhr.open("post", "DataResponse.ashx", true);

                //编码格式

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                //设置回调函数

                xhr.onreadystatechange = function () {

                    if (xhr.readyState ==  && xhr.status == ) {

                        var res = xhr.responseText;

                        alert(res);

                    }

                }

                xhr.send();

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        get请求按钮：

        <input type="button" id="getAjax" value="点击发送请求"/><br/>

        post请求按钮：

        <input type="button" id="postAjax" value="点击发送请求"/>

    </div>

        <img src="test.gif" />

    </form>

</body>

</html>

这样便能看到这样的效果：

javascript版Ajax请求

在服务器端，通过判断不同的请求方式来返回不同的数据给浏览器：

public void ProcessRequest(HttpContext context)

        {

            if(context.Request.HttpMethod.ToLower()=="get")

            {

                Thread.Sleep();

                context.Response.Write("这是一个get请求，成功返回数据");

            }

            else

            {

                Thread.Sleep();

                context.Response.Write("这是一个post请求，成功返回数据");

            }

        }

这里的Thread.Sleep(1000);主要是用来模拟浏览器向服务器请求数据这个过程，然后通过中间的gif图片来判断这个Ajax异步请求是怎样一回事，可以看到点击后，有那么服务器那边停缓了一秒钟，然而整个过程中gif图片没有停下来，然后请求完毕后不能后退，因此Ajax请求后还是以前这个页面，没有跳转，这样给客户的体验就增强了。最后附上整个项目源码：

http://files.cnblogs.com/xmfdsh/javascript%E7%89%88Ajax.rar

秒客网

javascript版Ajax请求

相关文章