> \(^o^)/，为了治疗小邪那个灰常严重的 JavaScript 恐惧症，让我们开始攻打 JavaScript 的阵地吧。
> 首先学习一下创建 XMLHttpRequest 对象，然后使用这个对象进行一次简单的表单动态处理。
一. 创建 XMLHttpRequest 对象：
> Ajax 的重点就在于 XMLHttpRequest 对象，可以让我们不用刷新页面就能与服务器交换数据。
> 而不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的，下面我们先写点简单的代码。
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();
}
}
</script>
> OK，那么上面代码给 Firefox Opera Safari Chrome 之类的浏览器来创建对象都是木有问题的。
> 但是这里杯具了，因为我们碰到了 IE [- -#]，所以需要把代码变得像下面那么长，IE 才能运行。
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari and so on ..
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // IE 6.0+
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5+
}
catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
}
</script>
二. 输入时动态发出请求：
> 你可以试一下下面的代码，在 “输入” 处输入内容的时候，每按一下按键，都会进行一次请求。
> 下面的处理方式是 GET 方式请求一次 time.php，返回的数值是根据时间的秒来变动的喔。
> 演示传送门 - http://www.evlos.org/apps/demo/ajax_001
<html>
<head>
<title>Ajax执行表单测试</title>
</head>
<body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari and so on ..
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // IE 6.0+
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE 5.5+
}
catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.php",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
输入: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
<?php echo time(); ?> //这是 time.php 的代码，这里的代码表示输出 Unix 时间戳，额，简单说就是会每秒变一次数值
三. 输入时动态发出请求的原理：
//使用下面的代码来创建一个表单，请注意我们的表单里面是木有 “提交” 按键的 <form name="myForm"> 输入: <input type="text" name="username" onkeyup="ajaxFunction();" /> 时间: <input type="text" name="time" /> </form>
//下面的内容要包含在 ajaxFunction() 函数中，在创建 XHR 对象之后执行
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.php",true);
//open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。
//第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
xmlHttp.send(null); //send() 方法可将请求送往服务器。
四. 附言：
> - -#，虽然还是有那么一点点的 JavaScript 恐惧症，所以要蛋定，要灰常蛋定。╮(╯▽╰)╭ 阿门。
> 呵呵，下一篇文章会对不同参数的传递进行讲解，如果文章不长，就会继续讲解结果的返回。
> 希望对大家有帮助哦。゜)～～～ <(__)> <゜)))彡 <*)) >=< <^!^> <+))><< 。。。。。
呃，我只看得懂jQuery的ajax过程，纯js头大
@winy , 为了克服 JavaScript 恐惧症，所以就咬一咬牙直接从这里下手鸟 ~ ╮(╯▽╰)╭ ~
╮(￣▽￣")╭ 哎，啥时候能够浏览器内置 jQuery 库哩 ~~
:surprised: 从走点路顺势过来抢个沙发，再慢慢看文章
@dudo , 呵呵，荒淫，强烈荒淫 ~
啊哈哈哈 我最近也有在看Ajax的东西 我是为了ExtJs才看这个 喀喀喀 JavaScript感觉跟我上手的其他语言都不太一样。。有些小郁闷~
@Kaisir.Wang , 哇靠，这个 ExtJs 太专业鸟 ~ 疯掉了啊啊啊啊 o(≧口≦)o ~
嘿嘿，感觉还是喜欢 PHP，JavaScript 的语法太复杂鸟 ~
PS:你那个Type进一个字符就get的小程序，小心把服务器拖死额。。哈哈
@Kaisir.Wang , ╮(╯▽╰)╭，以后还有短网址站点的API会遇到这种大大的鸭梨的情况 ~
只好试着适应鸟 ~
最近看见org域名的网站 都是顺手一关..o(︶︿︶)o 唉.杯具.
@mice , 。。。。。。。'゜ (PД`q。)·。'゜冰天雪地掩面泪奔……
我看不懂啊
ajax一窍不通
@zwwooooo , 施主要蛋定，贫僧也是今天才通了九窍 ~ :redface: :redface:
第一段里面不用写try吧
@路人假 , :exclaim: 这个…… 呃~~ -______-"，不是很清楚，不过看 w3c 的演示代码某段是这样写的 ~
@邪 罗刹 ,
呃，因为没有catch，所以其实try是木有意义的。。。
@路人假 ,
喔喔，多谢，原来是这样 ~
看来那些网站上的代码也不全是完全准确的 ~
:exclaim: AJAX...AJAX...AJAX...AJAX...AJAX...AJAX...
一定要尽快掌握AJAX...
@MOPVHS , 蛋定，蛋定，蛋定，蛋定，蛋定，蛋定 ~
o(*￣▽￣*)ゞ ~
IE赶紧灭亡吧
哦滴神..转了N个博客....都离不开网站..都离不开WP....
WP啊..快死亡吧
@山头人 , 。。。囧 虽然小邪也不是很喜欢 WP，只能希望 Typecho))) 发展再快一点！
@阿邙 , ╮(╯▽╰)╭，微软这次可没干好事 ~
@邪 罗刹,
赶紧出来个超级漏洞 让全世界鄙视它吧~
@阿邙 , 。。。来个病毒把 IE 全部删除然后装 FIREFOX 或者 CHROME 都可以 ╮(╯▽╰)╭ ~
@邪 罗刹,
好吧 I服了you :rolleyes:
路过..
@91526 , 嘎嘎，荒淫路过_(￣0￣)_[哦~] ~
Ajax真是好东西 可以和jquery结合使用 那是如鱼得水
@丕子 , 呜呜呜呜，跪求浏览器内置jQuery代码库 ~
貌似已经走在了你的教程前面 哈哈
@Roam , 哈哈，那可是很不错的呢，刚好有问题找你哈哈 ~
@邪 罗刹 ,
测试一下下 ~
@邪 罗刹 ,
杯具了，Ajax 木有正常工作 ~
@邪 罗刹 ,
看看 Ajax 评论是否正常工作了 ~
浏览器内置 jQuery 库 这想法不错 希望会吧
@疾风 ,
恩恩，现在最新版本的 Mini 版大小已经有 70.4 KB 那么大了 ~
我喜欢这样的文章 ，哈哈……刚刚看了几天PHP，对这个还不是很了解，多写写啊，小邪，嘎嘎
@久酷 ,
嘿嘿嘿，真开心你喜欢 ~ :redface:
以后一定会多写写的，因为小邪只写得来这种文章呀 ~
貌似是可以是直接用jquery内置的ajax方法……
@久酷 ,
额，最近觉得 jquery 库太大了，受不鸟 ~
不过现在看来大家都那么推崇，那一定性价比不会低的 ~
所以以后就要用 jquery 咯 ~ 嘎嘎 ~
如果只是简单的应用那就直接用jQuery的ajax调用，很容易，不需要考虑太多，最主要是兼容性不用担心。
@QiQiBoY ,
恩恩，写这篇文章的时候还是接受不了调用那么大的代码库 ~
不过现在释然了，因为突然想到我自己的图片就差不多几百KB了 ~ :redface:
回复邮件通知插件测试 ~
@小邪 ,
春哥保佑我成功 ~ :biggrin: :biggrin: :redface: :redface:
@小邪 ,
额滴春哥 ~ TMD怎么又变成垃圾邮件了 ~
@邪 罗刹 ,
看看最后那层嵌套能在一排显示几个表情 ~
@邪 罗刹 ,
哈雷路亚 ~ :redface:
@邪 罗刹 ,
这套表情太TM经典了 ~ :rolleyes:
@邪 罗刹 ,
啥都不说了 ~ :exclaim:
@邪 罗刹 ,
6个刚刚好 ~
@邪 罗刹 , :biggrin: :biggrin:
@邪 罗刹 , 看来去掉换行会好很多 ~
@小邪 ,
靠，大不了过 gmail 服务器发送 ~
@小邪 ,
很好，已经收到了，测试一下新样式 ~ ❤
@小邪 , :exclaim: :exclaim: ~~
小邪换主题了，很好看。
把表情放在内容框上面就方便了。
@Hailo ,
嘿嘿，好主意 o(*^▽^*)o，立马搞定了 ~ :rolleyes: :rolleyes: