什么是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. QQ消息99+形成--第三方开源--BezierView

    Android第三方开源的BezierView实现了上述QQ的99+条未读消息气泡显示.Android开源BezierView在github上的项目主页是:https://github.com/che ...

  2. 常用icon以及color颜色RGB值和对应颜色效果图

    Android谷歌官方扁平化设计常用icon集合   Android谷歌官方扁平化设计color颜色RGB值和对应颜色效果图.

  3. java中4中类修饰符访问范围

    public:本类中可见,同包中可见,子类中可见,其他包中可见. protected:本类中可见,同包中可见,子类中可见,其他包不可见. 默认:本类中可见,同包中可见,子类不可见,其他包不可见. pr ...

  4. 低功耗蓝牙（BLE）透传模块 ——RF-BM-S01（BQB认证）

    本文来源深圳信驰达科技www.szrfstar.com,技术交流群336720020. 低功耗蓝牙(BLE)透传模块 ——RF-BM-S01(BQB认证) 深圳市信驰达科技有限公司 2013年3月18 ...

  5. p ython笔记第一天

    一.Linux基础 - 计算机以及日后我们开发的程序防止的服务器的简单操作 二.Python开发 http://www.cnblogs.com/wupeiqi/articles/5433893.htm ...

  6. 老工程升级到VS2010或以上时会出现 libc.lib 解决方法

    有些网上的工程都比较老,比如用2003之类.一般会有个静态libc.lib.在新版本里已经没有这个库,被微软无情的抛弃. 编译时会出现动态库找不到: 1>LINK : fatal error L ...

  7. SharePoint2013网站添加切换用户登录

    不知道大家发现没,sharepoint2013的网站集下面没有了切换用户登陆这个选项卡,这对于我们有时候要做一些权限性的实验是不太方便的,今天我找到了一个办法解决,又实际应用了一下,感觉不错,特地来和 ...

  8. oracle group 语句探究（笔记）

    1.group by语句在oracle中没有排序功能,必须依靠order by才能实现按照预定结果的排序 2.group by 的cube扩展 with test as ( id, name from ...

  9. System.IO之内存映射文件共享内存

    内存映射文件是利用虚拟内存把文件映射到进程的地址空间中去,在此之后进程操作文件,就 像操作进程空间里的地址一样了,比如使用c语言的memcpy等内存操作的函数.这种方法能够很好的应用在需要频繁处理一个 ...

  10. Python学习——struct模块的pack、unpack示例

    he struct module includes functions for converting between strings of bytes and native Python data t ...