【ThinkPHP】Ajax，利用原生JavaScript的Ajax实现
ThinkPHP官网上的Ajax示例写得非常复杂，还混杂着Jquery的一些代码，让人难以看懂其背后的本质。
其实ThinkPHP实现起来很简单的，核心就是$this->ajaxReturn(data,info,status)这一个后台方法，前台处理好ThinkPHP扔回来的Json，就可以轻松完成一个Ajax操作。
下面用一个极其简单例子来说明这个问题：
前台index.html有两个输入框，javascript获取输入两个的数之后，传递到AjaxAction.class.php中的Ajax1()方法，Thinkphp将两数获取后相加，之后将结果扔回前台。
当然，这个简单的相加明明单纯只用JavaScript就可以实现，这个例子只是为了说明ThinkPHP的Ajax是怎么操作的。
先在LibAction文件夹中开一个AjaxAction.class.php，里面的代码很简单，一个跳转到主页的方法index()，一个处理Ajax的方法Ajax1()：
<?php
class AjaxAction extends Action{
//跳转到首页
public function index(){
$this->display();
}
//Ajax后台处理
public function ajax1(){
//index.html的var text1与var text2是利用post方法传递过来的，因此直接用post方法获取
$text1=$_POST["text1"];
$text2=$_POST["text2"];
$this->ajaxReturn($text1+$text2,"运算成功！",1);//ThinkPHP的固定格式，此框架，要求固定推回三个参数给前台
}
}
?>
此处，$this->ajaxReturn(data,info,status)这一个后台方法，ThinkPHP是如此要求的：
系统支持任何的AJAX类库，Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端。并且支持JSON、XML和EVAL三种方式给客户端接受数据，通过配置DEFAULT_AJAX_RETURN进行设置，默认配置采用JSON格式返回数据，在选择不同的AJAX类库的时候可以使用不同的方式返回数据。要使用ThinkPHP的ajaxReturn方法返回数据的话，需要遵守一定的返回数据的格式规范。
ThinkPHP返回的数据格式包括：data：返回数据，status：操作状态，info：提示信息
实质上，仅仅是ThinkPHP扔回一个包含三个数据的json数组给前台而已，ThinkPHP提供三个位置给你传递你要返回的Ajax参数。
上效果图，在每一次Ajax都会先弹出一个最原始的ThinkPHP的Ajax返回结果，如果输入1与2，那么ThinkPHP所返回的结果如下图所示：
其实就是在$this->ajaxReturn(data,info,status)中写的三个数据。
info是一个utf-8编码不要仅，此json数组，在经历data=eval("("+XMLHttpRequest1.responseText+")");之后，就能data.data,data.info,data.status在JavaScript中正常使用传递回来的数据。
因此在Tpl下建立一个文件夹Action之后，再建立的index.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</title>
</head>
<body>
<input type="text" id="text1" />+<input type="text" id="text2" />
<button onclick="Ajax1()">=</button><span id="result"></span>
</body>
</html>
<script type="text/javascript">
//原生javascript创建Ajax对象的函数，其实本函数就是一个简单的new语句而已，主要是针对不同浏览器有不同的创建方法。
function createXMLHttpRequest() {
var XMLHttpRequest1;
if (window.XMLHttpRequest) {
XMLHttpRequest1 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpRequest1;
}
//Ajax处理函数
function Ajax1(){
//获取两个文本框输入的值
var text1=document.getElementById("text1").value;
var text2=document.getElementById("text2").value;
//创建Ajax对象
var XMLHttpRequest1=createXMLHttpRequest();
//指明相应处理方法，实质ajax1()为后台所对应的ajax1处理函数
var url="__URL__/ajax1";
XMLHttpRequest1.open("POST",url,true);
//这里没法解释，你所有JavaScript的请求头都这样写就对了，不会乱码
XMLHttpRequest1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//传递var text1与var text2给后台的ajax1()
XMLHttpRequest1.send("text1="+text1+"&text2="+text2);
//对于返回结果怎么处理
XMLHttpRequest1.onreadystatechange=function(){
//这个4代表已经发送完毕之后
if(XMLHttpRequest1.readyState==4){
//200代表正确收到了返回结果，相当于JQuery中的Success
if(XMLHttpRequest1.status==200){
alert(XMLHttpRequest1.responseText);
data=eval("("+XMLHttpRequest1.responseText+")");//将ThinkPHP的传回来的数据处理成JavaScript可处理的Json数组
alert(data.info);
document.getElementById("result").innerHTML=data.data;//将运算结果放到id为result的span节点中
}
else{
//如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。
alert("网络连接中断！");
}
}
};
}
</script>
以上的代码，使用纯JavaScript的Ajax实现。
具体可以参考《【php】利用原生态的JavaScript Ajax为php进行MVC分层设计，兼容IE6》（点击打开链接），这里不再赘述。
- 上一篇： 【php】文字转图片
- 下一篇： 【ThinkPHP】自定义标签
