24、Web开发：Ajax与图形处理全解析

Web开发：Ajax与图形处理全解析

1. Ajax基础与实例

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它使网页能够在不重新加载整个页面的情况下与服务器进行异步通信并更新部分网页内容。

1.1 基于响应更新网页

当 XMLHttpRequest 对象从服务器接收到响应时，可以对其进行处理。例如，要将从服务器接收的内容显示在名为 dynamicDiv 的 div 元素中，可以设置一个处理程序：

request.onreadystatechange = requestResponseHandler; 
function requestResponseHandler()
{
    if (request.readyState == 4 && request.status == 200)
    {
        var responseXML = request.responseXML;
        document.getElementById("dynamicDiv").innerHTML = responseXML;       
    }
}

在这段代码中， requestResponseHandler() 被分配给 onreadystatechange 事件的处理程序。因此，当从服务器接收到响应时，会调用 requestResponseHandler() 。

1.2 Ajax实例展示

假设有一个需求，允许用户在文本字段中输入文本，代码将用户输入的文本动态转换为大写并显示在 div 中。以下是实现该功能的详细代码：

HTML文件（ajax - test.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Example</title>
</head>
<body>

<script language="javascript" type="text/javascript">
    /**
     * 创建一个Ajax请求对象
     *  
     * @returns - XMLHttpRequest对象
     * 
     */    
    function getRequestObject()
    {
       if (window.XMLHttpRequest) 
       {
          return new XMLHttpRequest();
       }   
       else if (window.ActiveXObject) 
       {
          return new ActiveXObject("Microsoft.XMLHTTP");
       }
       else 
       {
          alert("Please upgrade your browser.");
          return null;
       }
    }   

    /**
     * 服务器响应的处理程序
     */    
    function responseHandler()
    {
        if (requestObject.readyState == 4)
        {
            renderResponse(); 
        }
    }     

    /**
     * 根据服务器响应更新页面
     */    
    function renderResponse()
    {
        document.getElementById('responseTxt').innerHTML = requestObject.responseText; 
    }

    /**
     * 打开AJAX对话
     */
    function execute()
    {    
        requestObject = getRequestObject();
        if (requestObject != null) 
        {
            requestObject.open("GET", "ajax_test.php?text=" + 
document.getElementById('inputTxt').value, true);
            requestObject.send(null); 
            requestObject.onreadystatechange = responseHandler;
        }
    }

    var requestObject = null;

</script>

  <form name="form">
     Enter text: <input type="text"  onkeyup="execute();" name="inputTxt" id="inputTxt" />
     <br/>
     <br/> 
     <div id="responseTxt">Text to be replaced</div>
  </form>
</body>
</html>

PHP文件（ajax - test.php） ：

<?php
    if (isset($_GET['text'])) 
       echo strtoupper($_GET['text']);
?>

在这个实例中，用户在文本框中输入文本，每次按键松开时会触发 execute() 函数。该函数会创建一个 XMLHttpRequest 对象，向 ajax_test.php 发送请求，并将用户输入的文本作为参数传递。 ajax_test.php 接收到文本后将其转换为大写并返回，最后在页面的 responseTxt div 中显示转换后的文本。

为了确保在用户禁用JavaScript的情况下也能了解他们的体验，建议在禁用脚本的浏览器中测试页面。

2. Web图形基础

在Web开发中，图形的使用至关重要。一个设计良好的网站能够有效地利用图形，而糟糕的图形使用则会降低网站的质量。

2.1 两种基本图形类型

图形世界主要有两种基本类型：光栅（或位图）和矢量。
- 光栅图形 ：由微小的像素组成，这些像素排列成矩形。每个像素都有不同的颜色值（在某些情况下，还有透明度或不透明度值）。由于光栅图形基于像素，它们依赖于显示器的分辨率。因此，在不损害图像质量的情况下，不能对光栅图形进行调整大小（尤其是放大）。常见的光栅文件格式有JPEG、GIF和PNG，照片和典型的Web图形都是光栅图像的例子。
- 矢量图形 ：由角度、曲线和线条组成的几何形状。由于矢量图形基于数学计算，因此可以在不损害质量的情况下进行缩放。最著名的Web矢量图形格式是Adobe Flash SWF（不过要注意，Flash电影可以包含光栅图像）。SVG是另一种不太知名的Web矢量格式。EPS和AI（Adobe Illustrator）是浏览器不支持的矢量格式。

目前，Web世界基本上是一个光栅化的世界，因为绝大多数非Flash图像都是光栅图形（JPEG、GIF或PNG）。

2.2 寻找优质图形

要想在网站中使用优质的图形，有以下几种途径：
- 自己动手（DIY） ：如果有数码相机并且擅长拍照，这是为网站添加图形最便捷的方式。但如果拍摄的照片质量不佳，如人物裁剪不当、红眼或风景单调，可能需要考虑其他选项。
- 免费库存图片 ：现在有一些免费的库存摄影网站，如 stock.xchng （www.sxc.hu）和 morguefile.com ，这些网站提供专业质量的摄影图像，不过主要侧重于照片，插图相对较少。每张照片都有自己的使用许可，使用前需仔细阅读。
- 商业库存图片 ：如果有特定需求，无法自己拍摄或找不到合适的免费图片，可以选择商业库存图片网站。例如，Getty Image的Photodisc（www.gettyimages.com）适合需要专业插图的情况；Shutterstock.com提供订阅服务下载图片；对于插图，还可以考虑 stockart.com 。

2.3 避免使用不良图形

在选择图形时，应避免以下两种类型的图形：
- 受版权保护的图像 ：所有图像都受版权保护，未经版权所有者的明确许可或授权，从任何网站（包括Flickr或Facebook）获取图像是不允许的。在为网站选择图像时要谨慎。
- 剪贴画 ：剪贴画通常用于学校时事通讯和儿童生日贺卡，不适合用于网站。与其他更优质的图形供应选项相比，剪贴画看起来业余且俗气。

2.4 选择图形编辑器

虽然Windows和Mac操作系统的最新版本提供了基本的裁剪和调整光栅图形大小的功能，但在处理网站图形时，这些功能远远不够。以下是一些可供考虑的图形编辑器：
- 网站软件 ：一些网站软件工具可以对图像进行适度的修改和调整。例如，Dreamweaver允许在不离开其环境的情况下对图像进行优化、裁剪、重新采样、调整亮度和对比度以及锐化等操作，但它不能在其环境中直接编辑图形，如需编辑，还需要更高级的工具。
- Adobe Photoshop ：是Windows和Mac上图像编辑软件的行业标准。如果价格和学习曲线不是问题，它是一个很好的选择。Adobe还提供了Adobe Photoshop Elements，这是Photoshop的精简版本。
- 其他商业产品 ：除了Photoshop，还有其他商业产品可供选择。例如，Microsoft的Microsoft Expression Design是一款不错的图形编辑软件；Corel的Paint Shop Pro也是一个选项。
- GIMP（开源替代方案） ：如果预算有限，可以考虑GIMP。它是开源软件，可免费使用，并且有适用于Windows、Mac和Linux的版本。有些用户对它评价很高，而有些用户则不太满意，但鉴于其免费的特点，值得一试。

3. 图形设计与使用技巧

在网站设计中，如何将图形融入页面并使其发挥最大作用是一个重要的问题。

3.1 使用图形链接

在HTML文档中，通常使用超链接 <a> 元素来定义文本链接。但有时仅靠文本链接不够，需要使用图形作为链接。可以通过将 <img> 元素包含在 <a> 链接中来轻松将图形定义为普通超链接，例如：

<a href="http://www.cnet.com"><img src="cnet_logo.png" alt="Visit CNET"/></a>

如果使用Dreamweaver或Expression Web，处理图形链接的方式与处理文本链接类似。

3.2 融入热点和图像映射

在某些情况下，普通的图形链接可能无法满足需求。例如，在显示美国地图的网站中，单个链接无法满足每个州的链接需求，这时就需要使用热点。
- 热点 ：是图形图像中不可见的区域，当点击该区域时，其行为类似于常规超链接。包含可点击热点的图像称为图像映射。
- 图像映射的实现 ：可以使用任何JPEG、GIF或PNG图像作为图像映射。在HTML代码中，通过指定图像内的位置（x,y坐标）来定义热点。 <map> 元素表示图像映射，在 <map> 元素内定义多个 <area> 元素，每个 <area> 元素对应一个热点。通过向 <img> 元素添加 usemap 属性将图像与图像映射链接起来。以下是一个示例：

<html>
<head></head>
<body>
<img src="countrymap.png" usemap="#usa">
<map name="usa">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="east.html">
<area shape="rect" coords="128,132,241,179" href="west.html">
<area shape="circle" coords="68,211,35" href="washingtondc.html">
</map>
</body>
</html>

手动使用正确的像素坐标创建图像映射是一个棘手的过程，建议使用Expression Web、Dreamweaver或Photoshop等可视化工具来轻松定义热点。

4. 图形优化

在Web开发中，图形的优化至关重要，它可以在保证一定质量的前提下，尽量减小图形的大小，提高页面的加载速度。

4.1 确定图形文件类型

Web浏览器支持三种流行的图形格式：JPG/JPEG、GIF和PNG。这三种格式都支持图像压缩，相比其他图像格式（如RAW或TIFF）更受青睐。例如，一个15兆字节的TIFF图像使用JPEG格式可以缩小到仅50千字节。

格式	最佳用途	最差用途	是否支持透明度	是否支持动画
JPEG	照片、连续颜色和灰度图像	简单图形、边缘和线条清晰的图像	否	否
GIF	文本、边缘清晰的艺术作品、线图	连续颜色图像、照片、颜色超过256种的图像	是	是
PNG - 8	文本、边缘清晰的绘图、剪贴画	连续颜色图像、照片、颜色超过256种的图像	是	否
PNG - 24	照片（尽管比JPEG等效文件大得多）、半透明图像	文件大小很重要时的连续颜色照片	是（支持全不透明度混合）	否

4.2 各图形格式特点

• JPEG ：是一种非常通用的图像格式，适用于高分辨率的数码照片（最多1670万种颜色）和普通的Web图形。JPEG使用有损压缩技术来压缩颜色和灰度连续色调图像，即丢弃人眼不易察觉的颜色。一般来说，图像越复杂，JPEG的表现越好。它不适合简单图形、线图或文字。此外，与GIF和PNG不同，JPEG不支持透明度，每个像素都必须有颜色。可以通过图像编辑软件精确控制JPEG图像的优化级别，质量级别通常在0到100之间，0表示压缩程度最高（文件较小），100表示不压缩（文件较大）。在大多数情况下，根据图像的不同，应使用30 - 75的质量级别，通常40 - 60的范围是比较合适的。
• GIF ：是早期Web的标准图像格式，至今仍然很受欢迎。GIF只支持256种颜色，不适合高分辨率照片。但其无损压缩技术非常适合文本、线条和仅使用几种颜色的简单图形。GIF支持透明度，可以指定图像的背景为透明，还支持动画。过去，GIF的使用受到专利限制，现在相关法律问题已经解决。
• PNG ：是最新的Web图形格式，越来越受欢迎。所有现代浏览器都支持该格式。PNG有两个版本：
• PNG - 8 ：与GIF类似，支持256种颜色和简单的透明度。使用PNG - 8通常可以获得比GIF更好的压缩比，适合小型简单图形。
• PNG - 24 ：支持24位颜色（即数百万种颜色）和不透明度。由于PNG使用无损压缩，高分辨率的PNG图像比JPEG图像大得多。PNG - 24对不透明度的支持（也称为平滑透明度）可以让你为图像中的任何像素指定透明度或不透明度级别（范围从0到255），从而创建半透明效果。不过，早期版本的Internet Explorer（7.0之前）不支持不透明度。

通过合理选择图形文件类型和优化图形，可以在保证网站视觉效果的同时，提高页面的加载速度，为用户提供更好的体验。

Web开发：Ajax与图形处理全解析

4.3 优化图形设计与下载速度

在确定了合适的图形文件类型后，还需要进一步优化图形设计和提高下载速度，以确保网站在不同网络环境下都能快速加载。

4.3.1 优化图形设计

• 选择合适的尺寸 ：根据实际需要显示的大小来确定图形的尺寸，避免使用过大尺寸的图形。例如，如果在网页上只需要显示一个小图标，就不要使用高分辨率的大图片。
• 减少颜色数量 ：对于一些简单的图形，可以适当减少颜色的数量，这样可以降低文件大小。比如，对于一些纯色的图标，可以将其颜色调整为尽量少的几种。
• 去除不必要的元素 ：检查图形中是否有不必要的元素，如背景图案、多余的线条等，将其去除可以使图形更加简洁，同时也能减小文件大小。

4.3.2 提高下载速度

• 使用图像压缩工具 ：除了利用图形格式本身的压缩功能外，还可以使用专门的图像压缩工具进一步减小文件大小。例如，TinyPNG可以对PNG和JPEG图像进行无损压缩，在不损失太多质量的情况下显著减小文件大小。
• 采用渐进式加载 ：对于较大的图片，可以采用渐进式加载的方式。渐进式JPEG图像在加载时会先显示一个低分辨率的版本，随着数据的不断加载，图像会逐渐变得清晰。这样用户在图片完全加载之前就可以大致看到图片的内容，提高了用户体验。
• 优化服务器配置 ：合理配置服务器，如启用Gzip压缩、设置合适的缓存策略等，可以减少数据传输量，提高图形的下载速度。

5. 综合应用案例

为了更好地理解前面介绍的Ajax和图形处理知识，下面通过一个综合应用案例来展示如何将它们结合使用。

假设要开发一个旅游网站，该网站需要展示各地的旅游景点图片，并且用户可以通过搜索框输入景点名称来获取相关的景点信息。

5.1 页面结构设计

首先，设计页面的基本结构，包括搜索框、图片展示区域和景点信息显示区域。以下是一个简单的HTML代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游网站</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="输入景点名称">
    <button onclick="searchAttraction()">搜索</button>
    <div id="imageDisplay"></div>
    <div id="infoDisplay"></div>

    <script>
        function searchAttraction() {
            // 实现搜索功能的代码将在后面添加
        }
    </script>
</body>
</html>

5.2 图形处理

在这个案例中，景点图片的选择和优化非常重要。根据前面介绍的图形文件类型知识，对于高质量的景点照片，选择JPEG格式可以在保证质量的前提下减小文件大小。同时，使用图像压缩工具对图片进行进一步优化。

例如，将图片上传到TinyPNG进行压缩后，再将其用于网站中。在HTML中使用 <img> 标签来显示图片：

<div id="imageDisplay">
    <img src="attraction.jpg" alt="景点图片">
</div>

5.3 Ajax实现搜索功能

使用Ajax技术实现搜索功能，当用户输入景点名称并点击搜索按钮时，向服务器发送请求，获取相关的景点信息并更新页面。以下是实现该功能的JavaScript代码：

function searchAttraction() {
    var searchText = document.getElementById('searchInput').value;
    var request = new XMLHttpRequest();
    request.open('GET', 'search.php?keyword=' + searchText, true);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            var response = JSON.parse(request.responseText);
            // 更新图片和信息显示区域
            document.getElementById('imageDisplay').innerHTML = '<img src="' + response.image + '" alt="景点图片">';
            document.getElementById('infoDisplay').innerHTML = response.info;
        }
    };
    request.send();
}

5.4 服务器端处理

在服务器端，使用PHP来处理搜索请求。以下是一个简单的 search.php 示例：

<?php
$keyword = $_GET['keyword'];
// 模拟从数据库中获取景点信息
$attractions = array(
    '故宫' => array(
        'image' => 'gugong.jpg',
        'info' => '故宫是中国明清两代的皇家宫殿，位于北京中轴线中心，是世界上现存规模最大、保存最为完整的木质结构古建筑群之一。'
    ),
    '长城' => array(
        'image' => 'greatwall.jpg',
        'info' => '长城是中国古代的一项伟大工程，是世界文化遗产之一。它绵延万里，气势雄伟。'
    )
);

if (isset($attractions[$keyword])) {
    $result = $attractions[$keyword];
    echo json_encode($result);
} else {
    echo json_encode(array('image' => '', 'info' => '未找到相关景点信息'));
}
?>

通过这个综合应用案例，可以看到Ajax和图形处理技术在实际项目中的应用，它们可以为网站带来更好的用户体验和更高的性能。

6. 总结

在Web开发中，Ajax和图形处理是两个非常重要的方面。Ajax可以实现网页的异步更新，提高用户交互性；而图形处理则可以让网站更加美观、吸引人。

通过掌握Ajax的基本原理和使用方法，如创建 XMLHttpRequest 对象、处理服务器响应等，可以开发出动态交互性强的网页。同时，了解不同类型的图形（光栅和矢量）以及常见的图形文件格式（JPEG、GIF、PNG）的特点和适用场景，能够合理选择图形文件类型，并对图形进行优化，从而提高网站的加载速度和用户体验。

在实际开发中，要根据具体的需求和场景，将Ajax和图形处理技术有机结合起来，开发出高质量的Web应用。例如，在旅游网站、电商网站等项目中，都可以充分利用这些技术来提升网站的性能和用户满意度。

未来，随着Web技术的不断发展，Ajax和图形处理技术也会不断演进。例如，新的图形格式可能会出现，Ajax的实现方式也可能会更加简洁高效。开发者需要不断学习和掌握新的技术，以适应不断变化的市场需求。

总之，掌握Ajax和图形处理技术是Web开发者必备的技能之一，它们将在未来的Web开发中发挥越来越重要的作用。