什么是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的register_shutdown_function函数详解

    function shutdown() { $last_error = error_get_last(); if ($last_error) { error_log(print_r($last_err ...

  2. 八数码难题 （codevs 1225）题解

    [问题描述] 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给出一种初始布局(初始状态)和目标布局( ...

  3. python & pandas链接mysql数据库

    Python&pandas与mysql连接 1.python 与mysql 连接及操作,直接上代码,简单直接高效: import MySQLdb try: conn = MySQLdb.con ...

  4. 第十七章 调试及安全性(In .net4.5) 之 程序诊断

    1. 概述 生产环境中的程序,也是不能保证没有问题的.为了能方便的找出问题,.net提供了一些特性来进行程序诊断. 这些特性包括:logging.tracing .程序性能分析(profiling) ...

  5. IOS学习：在工程中添加百度地图SDK

    1.将下载下来的sdk中的inc文件夹.mapapi.bundle.libbaidumapapi.a添加到工程中,其中libbaiduapi.a有两个,一个对应模拟器一个对应真机,导入方法如下: 第一 ...

  6. LinqToSql中使用事务（2）

    原文地址:http://www.cnblogs.com/blusehuang/archive/2007/07/16/819677.html

  7. <?php>慢慢写一些php的cookie问题<?>

    写网站是个爬坑的过程,在你设计完功能之后,就会发现:卧槽,这个怎么实现?你妹,这个能实现么? 进了公司分工明确还好说(= =学长们都这么说),在学校自己没事写一些项目的话只能自己爬坑了. 蹬蹬瞪蹬,登 ...

  8. C#模糊查询绑定datagridview

    private CollectionViewSource wgdData = new CollectionViewSource(); private DataTable Ds_wgd { get { ...

  9. pcre 使用

    1.主页地址:http://www.pcre.org/     下载pcre-7.8.tar.bz22.解压缩:     tar xjpf pcre-7.8.tar.bz23.配置:     cd p ...

  10. 关于ios极光推送server端注意的地方

    今天试用了极光推送API 用它是因为,大多数人说它的文档是最全的,但是用过之后,发现关于IOS的文档,还是很不够,导致走了一点弯路! 特别是服务端的代码:https://github.com/jpus ...