Ajax教程让你10分钟就学会Ajax 心灵博客

支付宝内搜索 9155838 即可领现金红包每天都能领哦

十分钟教你学会AJAX，你相信吗？这绝对不是骗你！

有时候，我十分憎恨一些图书、教程，讲了好几十页，说了一大堆，结果没有简单有效的说出，这个东西怎么用，何时用？

事实上，对于IT行业，新技术新思想，此起彼伏，并且有些技术常常昙花一现，不了了之！常常这些技术名异效同，加之有些书籍和教程如法炮制、千篇一律，这都让程序员们累中加累，莫名一处。

我个人认为，学习一门技术应从两方面着手：原理和应用！

掌握原理，是理解这门技术，以致把它应用到极点的重要根基。
掌握应用，是我们的目标，所谓学以致用，概此理也。

1、什么是AJAX？
AJAX是Ajax(Asynchronous JavaScript. and XML)的简称，它并不是什么新技术，是现有技术的组合，实现了客户端（浏览器）与服务器的异步通信。也就是，我们通常所说的，不刷新页面。也有人称之为富客户端技术。

假如，你有过开发体验，在会员注册或者添加软件用户时，往往要验证这个用户名是否重复，传统上的实现，要提交整个表单，在服务器端判断这个用户是否存在，然后将信息返回客户端。这个过程，需要刷新页面，让用户的眼前空白一段时间，而使用ajax，就可以解决这样的问题，网页不需要刷新，但仍完成了在服务器端的验证。
就这是ajax。

2、AJAX的原理？
实际上，AJAX的原理很简单。打个比方，你要买张车票，你要自己去车站（这个过程好比浏览器提交信息给服务器的过程），买好票你再回来（服务器把信息发回浏览器），这一去一回，肯定要占用时间啊，也会耽误你其它的工作。使用了AJAX就不同了，现代你找个代理，让小张帮你去买票，而你只需要坐在办公室，看书阅报就OK了。

实际上，AJAX就是这样一个简单的原理。AJAX实际客户端不刷新的原理，就是通过Javascript中的 XmlHttpRequest 这个对象来代理客户端和服务器的通信过程，包括了GET和POST，这样就不需要再提交表单了，也不需要重置网址了，所以也就不刷新了。

“代理”的思想，在软件业中，用的是很广的。生活中也是很常见的。你像Java的虚拟机，.Net的运行时，实际上，就是通过一个代理，来实现了跨平台、跨语言的功能；生活中的中介、代办不也就是代理之思维。

所以，AJAX不是改变了客户端与服务器通信这一现状，只是通过Javascript（客户端脚本语言）客户端（浏览器）将要发送的数据准备好，然后通过XmlHttpRequest这个代理发送给服务器，待服务器把信息返回给客户端时，Javascript再将数据从代理者 XmlHttpRequest中读出来，就是这么点事。

3、改花多久学习AJAX？
我个人认为，如果你不是专业从事AJAX的研发与应用的人员，三天时间足矣！超过三天就是浪费时间了！希望本教程，可以让你十分钟搞定AJAX。

我个人认为，不久之后，浏览器中会内置异步通信功能，所以那时AJAX也就没有意义了。所以，对于AJAX技术，我们掌握其原理，能应用到项目中去就可以了。整个web开发，无非也就是一个网络通信Socket！所以，不是浏览器的厂商，没必要过于研究AJAX，因为那没有意义！

4、AJAX的使用
通过对AJAX的原理了解，我们知道，AJAX实际就是写Javascript，写Javascript通过XmlHttpRequest来发送、接收数据，而不是使用表单了。

所以，能发送，能接受，这就是使用AJAX的责任所在。国际上，有许多AJAX框架，但他们几乎都有一个特点，学习麻烦，并且和语言相关，储如.net2.0集成的Ajax框架，php的xajax框架等。针对这一情况，我写了一个纯javascript的ajax框架，这个ajax框架是我为jwork for php而定做的，但它同时也支持asp、net、jsp等所有web开发语言，因为它是纯js的。

我们知道，web开发主要是get（一般为网址请求）、post(一般为提交表单)方式，jwork框架中的ajax也是如此：

jget(url,output)
Url：表示你要提交请求的网址。网址中可带一个或多个参数。
Output：表示服务器回调的值显示的位置。一般为input或div标签的id名。

jpost(url,input,output)
jpost有三处参数：
Url：表示你要提交请求的网址。网址中可带一个或多个参数。
Input：表示通过表单POST方式提交的数据。形式为：name=ccopen&id=20
Output：表示服务器回调的值显示的位置。一般为input或div标签的id名。

5、示例用户名是否重复验证
注册页面：reg.html

<!-- 引入jwork的ajax框架 -->
<script. language="javascript" src="libs/ajax.js"></script>

<!-- 提示信息 -->
<div id="err" />

<form. action="reg2save.php" name="form1" method="POST">
 [ 用户注册 ] <hr>
 用户名： <input name="username" nblur="checkname()" ><br>
密码：<input name="password" ><br>
性别<input type="radio" value="男" name="sex" />男
  <input type="radio" name="sex" value="女" />女<br>
<input type="submit" value="提交" name="sub" />
</form>

<script. language="javascript">
 function checkname()
 {
  //调用ajax
   var username=document.getElementById("username");
   jget("checkname.php?username="+username.value,"err");
  }
</script>

处理页面：checkname.php

<?php
header('Content-Type:text/html;charset=GBK');
//查询数据库，判断是否重复，如果重复，打印下面这句话
$username=$_REQUEST["username"];

if($username=="jyh")//这里省略了查询数据库的操作，请自行套用
echo "<font color=red>用户名重复</font>";
else
echo "<font color=red>用户名可用</font>";
?>

好了，AJAX就是如此简单！你学会了吗？当然这是比较简单的，还值得你去深入。

更新于:2008-12-16 00:32:01 栏目:网站周边/代码关键词:

本站使用「署名 4.0 国际」创作共享协议，可转载、引用，但需署名作者且注明文章出处

Ajax教程 让你10分钟就学会Ajax

推荐文章

Ajax教程让你10分钟就学会Ajax