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方法:

1
2
//让get请求不从浏览器获取缓存数据(可去)
xhr.setRequestHeader("If-Modified-Sine", "0");

       post方法

1
2
//编码格式
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", "0");
                //设置回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        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 == 4 && xhr.status == 200) {
                        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>

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

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

public void ProcessRequest(HttpContext context)
        {
            if(context.Request.HttpMethod.ToLower()=="get")
            {
                Thread.Sleep(1000);
                context.Response.Write("这是一个get请求,成功返回数据");
            }
            else
            {
                Thread.Sleep(1000);
                context.Response.Write("这是一个post请求,成功返回数据");
            }
        }

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

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

 

 

 

javascript版Ajax请求,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。