ajax其实是个很简单的东西,来来去去就是那一套。他实现的功能是什么呢?举一个例子:在用户登陆的时候,用户输入了用户名和密码,然后点击登录按钮。此时,内部发生了什么事情呢? 先把用户输入的数据通过后台和数据库进行检验,看用户名和密码是否匹配。如果匹配,则登录。如果不匹配。则调用javascript中的函数,提示用户密码错误。这里实质是点击一个按钮,同时进行了javascript的处理和后台的处理。
其实,ajax做的就是这样一类事情:触发事件,同时调用javascript函数和后台处理。(这个其实就是所说的异步刷新、部分刷新的本质)
理解了ajax在干一件什么样的事情,那么我们就来看看如何使用。其实,ajax的使用已经是一种套路的东西。看懂了下面的例子,便可以举一反三,灵活运用。(使用PHP后台脚本)
*基础知识:url的参数。 url: test.php?userName=tom&age=16&gender=male
上面的url中!期中test.php可以理解为你后台处理的那个页面(文件名),这个url一共有三个参数,userName age 和 gender 他们的赋值用等号赋值,跟在文件名后的第一个参数名前加“?”,后面的加“&”。
在test.php中!可以通过$_GET或$_POST(这个要添加http头,再次不叙述)方法来获取值。比如:要获取userName的值,可以这个获得:$userName = $_GET["userName"];此处,用$_GET还是用$_POST要看js文件中的这条语句window.open("GET",url,true);第一个参数是GET就用$_GET,第一个参数是POST,就用$_POST。
例子:
下面是js代码:
- function test()
- {
- var userName = document.getElementById("userName").value;
- var age = document.getElementById("age").value;
- var xmlhttp;
- <span style="color:#ff0000;">var url = test.php?userName=userName&age=age; //url要自己设定</span>
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- <span style="color:#ff0000;">//此处便是进行JS处理的部分</span>
- }
- }
- xmlhttp.open("GET",url,true);
- xmlhttp.send();
- }
- <?php
- $userName = $_GET["userName"];
- $age = $_GET["age"];
- //执行一些数据库的操作
- echo "bingo";
- ?>
* 在js代码的第二处红色处,可以通过 xmlhttp.responseText来获得后台代码echo的内容。此处,
var response = xmlhttp.responseText;
则 response = "bingo".
只要掌握了这些,基本上可以灵活的使用AJAX这个方便、革命性的工具了。