JavaScript学习总结之JS、AJAX应用_H5之家 - 中国HTML5教程资源分享第一站

1、AJAX 简介

　　AJAX(音译为：阿贾克斯) = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，也就是在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX 不是新的编程语言，而是一种使用现有标准的新方法，是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用 AJAX）如果需要更新内容或者用户注册信息、提交表单等，必需重新加载整个网页页面。所以说 AJAX 是一种与服务器交换数据并更新部分网页的艺术，因此我们必须掌握 AJAX 这种技术。

　　AJAX 是基于现有的 Internet 标准，并且联合使用它们：

　　　　①、XMLHttpRequest 对象 (异步的与服务器交换数据)

　　　　②、JavaScript/DOM (信息显示/交互)

　　　　③、CSS (给数据定义样式)

　　　　④、XML (作为转换数据的格式)

　　AJAX 的核心是 JavaScript 对象 XMLHttpRequest，他是一种支持异步请求的技术，也就是 XMLHttpRequest 赋予了我们可以使用 JS 向服务器提出请求并处理响应的能力，而不阻塞用户，通过这个对象，JS 可在不重载页面的情况下与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 是一种独立于 Web 服务器软件的浏览器技术，也就是 AJAX 应用程序独立于浏览器和平台！可用于创造动态性更强的应用程序

　　那么，简单说，AJAX 就是可以让 JS 去读取服务器上的数据，他的功能是可以在无需刷新页面的前提下，去服务器读取或者发送数据。可用来与 JSON 文件进行交互式通信，也可用来与数据库进行动态通信，还可用于创造动态性更强的应用程序。最常见的应用就是用户登录，在登录时，他就可以判断用户输入是否正确，如果输入正确，就直接显示用户信息，如果输入错误，提示错误信息，并不需要刷新页面。

　　2、配置服务器

　　AJAX 应用是异步更新，读取服务器上的数据，那到底服务器是什么东西呢？其实服务器就相当于 PC ，我们在平时浏览网页时，只需要在地址栏输入相应的网址，就可以浏览对应的页面，这些页面不可能存储在个人电脑中，那得需要多大的硬盘，并且还有其他影响因素，所以这些网页就存储在对应的服务器上，比如百度的服务器、新浪的服务器，其实服务器跟我们平时用的电脑没有什么多大的区别，个人计算机也可以作为服务器，甚至是手机之类的东西也可以作为服务器，比如我们用手机给电脑传照片，可以不通过数据线，使用 WIFI 或者腾讯提供的功能，就可以很轻松的完成传输过程，这时候手机就充当了服务器的角色，只不过性能比较差，仅对这一台机器提供服务而已。那么 Web 服务器就是可以同时对很多人提供服务，性能更强大。

　　在学习 AJAX 时，就必须配置个人服务器，也就是要在本机搭建服务器程序，方便我们调试代码。通常都会使用 WAMP 来搭建服务器，本地服务器搭建程序有很多种，大家可以选一种自己喜欢的来搭建，这里就以 WAMP 为例，WAMP 即 Windows 下的 Apache + Mysql + PHP 集成安装环境，也就是 Win 平台上的服务器程序，而通常都使用 WampServer 这一服务器软件。我这里安装的是 WampServer 2.5，大家可以百度搜索 wamp 找到2.5版本下载安装，建议将程序装在 D 盘，安装完成之后，打开程序，在桌面右下角有一个 W 的图标，通常都为绿色，可在图标上点击右键，选择倒数第二个选项切换为中文，切换完成之后，接下来就是配置了，下面是我在网上找到的配置方法，并且使用没有问题，写在这里也省的去找了，现在 WampServer 已经更新到3.0版本了，根据安装的版本不同在百度搜索配置方法，都是一堆堆的。

　　首先，用编辑器打开安装目录：D:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 文件

　　在516行或者搜索关键词找到：

#Include conf/extra/httpd-manual.conf

　　将前面的井号去掉。

　　然后，再打开：D:\wamp\bin\apache\apache2.4.9\conf\extra\httpd-vhosts.conf 文件

　　在代码最后添加如下内容：

DocumentRoot "D:/wamp/www"

ServerName

ServerAlias abc.com

Options Indexes FollowSymLinks

AllowOverride All

Require all granted

</Directory>

</VirtualHost>

　　为个人站点地址，可以自行定义。

　　最后，打开：C:\Windows\System32\drivers\etc\hosts 文件

　　添加：127.0.0.1

　　重新启动WAMP。

　　在需要做测试时，将页面保存在 D:/wamp/www 路径下，文件名保存为 index.html，然后在浏览器地址栏输入 abc.com 就可以打开刚才保存的页面。

　　如果打开不成功，可百度搜索解决办法，可能是80端口被占用了。

　　这里需要注意一下，放在服务器下的文件不能用中文命名。

　　3、AJAX 基础

　　首先，我们先来看一个 AJAX 应用的实例：请求并显示静态 TXT 文件

<!DOCTYPE html>

<html>

<head>

function ajax(){

var oAjax = new XMLHttpRequest();

oAjax.onreadystatechange = function (){

if(oAjax.readyState == && oAjax.status == ){

alert(oAjax.responseText);

}

oAjax.open('GET', 'ajax/demo.txt', true);

oAjax.send();

}

</script>

</head>

<body>

</body>

</html>

　　我们需要把页面保存在 WAMP 安装目录下 www 根目录中，并且新建一个文件夹命名为 ajax，用于存储 TXT 文件，命名为 demo.txt，文件中可以随意输入点文字，用作演示。然后通过我们自定义的个人站点，在浏览器中打开页面，当点击读取按钮后，弹出 TXT 文件中的内容。

　　通过上面的实例，我们就可以看到，实际上 AJAX 的作用就是从服务器上读取一个文件，并且把这个文件内容返回给我们，让我们处理。