Ajax基础知识（一）

随便在百度谷歌上输入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都是什么。待续！

原文链接：https://www.f2er.com/ajax/163772.html

Ajax基础知识（一）

猜你在找的Ajax相关文章