随便在百度谷歌上输入Ajax都会出现一大堆的搜索结果，这已经不再是什么新奇的技术了。但若从一开始就学习了ASP.Net，使用功能齐全的Visual Studio集成开发工具，或许未必能对访问一个动态网页到底发生了哪些事情了解的那么清楚。VS上提供的WebForm编程方式，让你可以像做WinForm开发一样，拖拖控件，双击写点C#代码，效果差不多就出来了，功能也实现的差不多了。

翻看所有和Ajax有关的博客或书本，都会告诉你，这不是一个新词，而是几种现有技术的缩写：Asynchronous、JavaScript and XML。它能够实现后台与服务器少量数据交换，实现页面的异步刷新。举个简单的例子，也是被常拿出来练手的，省市区联动。假设你在网上买东西，要你填写你家地址。那么这个网站得提供全国30多个省（含直辖市）及这些省下的地级市，再往下就是这些地级市下的区和县。如果没有Ajax，在你首次进入页面时，这几千条数据都得从后台取来，给你摆在这里。但如果使用Ajax呢，当你选择了北京市，那么就去后台将北京市下的各个区和县取出来，更新前台页面放区（县）的区域。这样每次获取的数据量就大大减少了。（这个例子在后面我会给出完整实现代码）

先要搞清访问网站时发生了哪些事情。你在浏览器上输入网址，DNS服务器会将网址解析成IP地址，路由器寻找到主机后，去80端口（默认HTTP的端口，有些可能会指定一个非80的端口给自己的网站）要客户端请求（Request）的页面；服务器处理好客户端的请求（Request）后，将文档返回给客户端（Response），客户端的浏览器将收到的文档（Html）解析显示出来。那么怎么实现Ajax的这样一个过程呢。关键的几个步骤是：创建XmlHttpRequest对象，设置对象调用方法，调用回调函数显示服务器返回的数据，发送请求。在这个过程中，JavaScript起重要作用。因为它是脚本语言，由浏览器解析执行，并不会导致页面的刷新。下面我们在VS上新建一个Web工程来举例说明实现一个简单的Ajax。

步骤一

新建Html页面，用于请求数据，并将返回的数据显示在该页面上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Simple Ajax Demo</title>

    <script type="text/javascript" language="javascript" src="JS/SimpleAjax.js"></script>

</head>

<body>

<input type="button" id="GetInfoByAjax" value="Ajax获取数据"  onclick="GetInfoByAjax();"/>

<hr/>

<div id="DataDiv"></div>

</body>

</html>

步骤二

新建JS文件，放在JS目录下，命名为SimpleAjax.js。在上面建好的Html页面中记得要引用该文件。

function GetInfoByAjax() {

    //创建xmlHttpRequest对象

    var xmlHttp = new XMLHttpRequest();

    //配置XmlHttpRequest对象

    xmlHttp.open("get", "Handlers/SimpleAjax.ashx");

    //设置回调函数

    xmlHttp.onreadystatechange = function () {

        if (xmlHttp.readyState = 4 && xmlHttp.status == 200) {

            document.getElementById("DataDiv").innerHTML = xmlHttp.responseText;

        }

    }

    //发送请求

    xmlHttp.send(null);

}

步骤三

建立一个一般处理程序（.ashx）文件，当然，你也可以用一个aspx文件来作为后台处理前台页面发来的请求。该文件命名为SimpleAjax.ashx，放在Handlers目录下。为了体现最简单，这个文件我们不做任何修改，默认的文件会向前台返回一个字符串“Hello World”。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace ProvinceCityAjax.Hadlers

{

    /// <summary>

    /// SimpleAjax 的摘要说明

    /// </summary>

    public class SimpleAjax : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write("Hello World");

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

好了，这会儿你在浏览器上查看文件，点击页面上的按钮，就可以看到Hello World被写在页面上了。同时观察浏览器的后退按钮，是否依旧灰色无法点击呢？说明页面未被刷新，但向后台请求的数据确实返回来了。

到这里，这个最简单的Ajax实现了。但问题还有很多，那一个简简单单的JavaScript函数就有许多问题。XMLHttpRequest是什么，为什么用get，那个if条件中的4,200都是什么。待续！

版权声明：本文为博主原创文章，未经博主允许不得转载。

Ajax基础知识（一）的更多相关文章

  1. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  2. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  3. Ajax基础知识 浅析（含php基础语法知识）

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

  4. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  5. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. AJAX 基础知识

    1.AJAX 是一种用于创建快速动态网页的技术.而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...

  8. Json,Gson,Ajax基础知识

    //json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...

  9. ajax基础知识

    一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...

随机推荐

  1. [置顶] 轻量级语言Lua入门

    作为一个脚本爱好者,而且是脚本(Perl)起家的我,一有空就喜欢学习下这些脚本语言.据说魔兽世界.愤怒小鸟都用到了它,所以今天研究下Lua这个叫法有点奇特的脚本 [转载请注明出处:http://blo ...

  2. JSTL 中<c:forEach>使用

    <c:forEach 详解 博客分类: JSTL   <c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 ...

  3. windows phone 加速计（5）

    原文:windows phone 加速计(5) 在windows phone 中存在着加速计,我们可以利用加速计获得用户手机的状态,根据手机状态调整我们的程序,这样会更人性化:windows phon ...

  4. python学习笔记之三：字典，当索引不好用时

    字典是python中唯一内建的映射类型.字典中的值并没有特殊的顺序,但是都存储在一个特定的键(key)里.键可以是数字,字符串甚至是元组. 1. 创建和使用字典 字典可以通过下面的方式创建: phon ...

  5. HTTP代理与SPDY协议（转）

    原文出处: fqrouter HTTP代理是最经典最常见的代理协议.其用途非常广泛,普遍见于公司内网环境,一般员工都需要给浏览器配置一个HTTP代理才能访问互联网.起初,HTTP代理也用来翻越“功夫网 ...

  6. Android开发之Buidler模式初探结合AlertDialog.Builder解说

          什么是Buidler模式呢?就是将一个复杂对象的构建与它的表示分离,使得相同的构建过程能够创建不同的表示.Builder模式是一步一步创建一个复杂的对象,它同意用户能够仅仅通过指定复杂对象 ...

  7. Swift难点-继承中的构造规则实例具体解释

    关于继承中的构造规则是一个难点. 假设有问题,请留言问我. 我的Swift新手教程专栏 http://blog.csdn.net/column/details/swfitexperience.html ...

  8. Emacs经常使用快捷键的注意事项

    一直用VIM,尝试了好几次Emacs都被它"多得像天上的星星"一样的快捷键给吓倒了.这几天最终下定决心再次尝试. 将它的Tutor练习了一下,顺便对经常使用快捷键做了一下笔记,方便 ...

  9. 尝到awk

    我前几天写的sed,这个时候继续了解它的兄弟,awk,两者都使用,一种感觉.既可以用来处理场.假设你想要做文本处理.sed删除.匹配,一些频繁更换使用,假设每一行文本,你想深入,一些每行和列处理的,例 ...

  10. <a href='javascript:void(0)' onclick='my()'></a>