什么是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>

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

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

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请求的更多相关文章

  1. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  2. 转贴：JavaScript实现Ajax请求简单示例

    转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...

  3. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. 前端javascript发送ajax请求、后台书写function小案例

    HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...

  5. javascript原生ajax请求

    class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true ...

  6. JavaScript 伪Ajax请求

    伪Ajax 通过iframe以及form表单,可以实现伪Ajax的方式. 并且它的兼容性是最好的. iframe iframe标签能够获取一个其他页面的文档内容,这说明它内部肯定是发送了一个请求,并且 ...

  7. JavaScript的Ajax请求示例

    //创建XMLHttpRequest对象              var request = false;            try {                request = new ...

  8. 原生js版ajax请求

    function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...

  9. PHP 判断是否为 AJAX 请求

    先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...

随机推荐

  1. php中empty(), is_null(), isset()函数区别

    empty(), is_null(), isset()真值表(区别) 我们先来看看这3个函数的功能描述 www.111cn.net isset 判断变量是否已存在,如果变量存在则返回 TRUE,否则返 ...

  2. linux资源监控命令详解

    Linux统计/监控工具SAR详细介绍:要判断一个系统瓶颈问题,有时需要几个 sar 命令选项结合起来使用,例如: 怀疑CPU存在瓶颈,可用 sar -u 和 sar -q deng 等来查看 怀疑内 ...

  3. CentOS6.4安装VNC

    http://jingyan.baidu.com/article/ca2d939dd1dabbeb6c31ce24.html 一.安装 VNC 默认情况下,CentOS 6.4 是没有安装的. 检查是 ...

  4. 使用WIF实现单点登录Part IV —— 常见问题

    InvalidOperationException: ID1073: 尝试使用 ProtectedData API 解密 Cookie 时出现 CryptographicException (有关详细 ...

  5. linux下的声卡驱动架构

    1.linux下的声卡驱动架构主要分为OSS架构和ALSA架构. 2.OSS架构 OSS全称是Open Sound System,叫做开放式音频系统,这种早期的音频系统这种基于文件系统的访问方式,这意 ...

  6. Python开发【第一篇】Python基础之字符串格式化

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-310 ...

  7. MTK机子修复分区信息

    这是前一个星期的事了,最近一直懒得写博客~ 此事是由于我误刷了内核,然后导致分区信息出错... 内置存储挂载不上,也找不到内置存储的分区! 如果不是star的帮助.估计俺的爪机就要返厂了!! 接下来说 ...

  8. DIV指令一般用法

    本文最初发表于2015-8-14,是由别的地方迁移过来的 (本文所讲为无符号运算) DIV指令是8086汇编中的除法运算指令,它的结果不是浮点数,而是两个整数:商和余数. 我们来看王爽老师是怎么讲的: ...

  9. SOCKET 地址

    地址格式: 函数bind和getsockname使用通用数据类型:struct sockaddr*来指向socket地址. #incude <sys/socket.h> struct so ...

  10. arcgis离海距离的计算

    1.利用arctoolbox——要素——面转线工具,将县界提取出来. 2.对线要素编辑,利用“分割”工具对边界截断,而后融合成一条海岸线 3.利用分析工具——领域分析——近邻分析计算点到海岸线要素的距 ...