什么是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. SQL Server中查询结果拼接遇到的小问题

    前天的项目,刚接手,对于模块还不是很熟悉,其中有一个模块,涉及到4个表,其中主要的表就有两个,只要把这个弄清楚了就一切回归于“太平”了. 模块要求:把两个表的内容查询出来,结果连接在一起.大师说完,感 ...

  2. List集合实战总结

    //构造被分隔的集合 List<object> list = new List<object>(); for (int i = 0; i <= 100; i++) { l ...

  3. C#之事件初步

    上文简述了委托,所谓的简述,只是说了一下如何使用委托,既然有了委托的基础,便可以稍微一探事件的机制. 事件,实际上是委托类型,事件处理函数如下: public delegate void MyHand ...

  4. RAC本地数据文件迁移至ASM的方法--非归档模式

    系统环境:rhel6.2_x64+Oracle RAC11g 操作过程: 1.非归档模式 SQL> archive log list; Database log mode No Archive ...

  5. c语言结构体保存并输出学生信息

    最近在学习数据结构,巩固下c语言. #include<stdio.h> /*定义结构体student并设置别名stud*/ /*typedef struct student{ int nu ...

  6. 8.python中的数字

    python中数字对象的创建如下, a = 123 b = 1.23 c = 1+1j 可以直接输入数字,然后赋值给变量. 同样也可是使用类的方式: a = int(123) b = float(1. ...

  7. Python核心编程--学习笔记--2--Python起步(上)

    本章是对Python的主要特性做一个快速介绍. 1 介绍 交互执行时,解释器有两种提示符: 主提示符(>>>):解释器在等待输入下一个语句: 次提示符(...):解释器在等待输入当前 ...

  8. Android WIFI 启动流程

    参考:http://blog.chinaunix.net/uid-26215986-id-3260413.html 一. WIFI 工作步骤 1. Wifi模块初始化 2. Wifi启动 3. 查找热 ...

  9. win7无线网卡的灯突然不亮了的解决办法

    win7无线网卡的灯突然不亮了,百度了一下,按如下的方法解决了:  WIN7中:右键单击“计算机”,选择“管理”进入“计算机管理”,选择“服务和运用”下的“服务”,然后双击“WLAN AutoConf ...

  10. springboot常见应用属性

    # ===================================================================# COMMON SPRING BOOT PROPERTIES ...