Ajax 的核心是 XMLHttpRequest 对象,其实写来写去无非就是做表单的提交,表单有两种提交方法(POST 跟 GET),当然 XMLHttpRequest 对象也支持可以用这两种方法来提交数据,总之,表单能提交什么它就能提交什么.唯一不同的是普通表单返回需要刷新网页,将所需要返回的数据在新页面里呈现出来,但是 XMLHttpRequest 可以不用刷新,直接利用当前页面的一个元素来显示我们需要的东西,而且返回的形式基本没啥限制,呵呵``是不是很方便啊``不过说来说去无非还是在文本上做手脚,从HTTP到XML再到JSON,说来说去都还是文本.唯一不同的只是性质发生了点变化而已.
来说说 XMLHttpRequest 吧,这东西其实也没什么复杂的,呃~~我还是贴个 HelloWorld 出来吧,不写两行代码总感觉不爽呢:

var request = false; //建立一个变量用来当存放对象
function createRequest() { //创建对象
try{
request = new XMLHttpRequest(); //创建 XMLHttpRequest 对象
} catch (Microsoft) {
try {
request = new ActiveXObject("MSXML2.XMLHTTP");//不行就用 XMLHTTP 对象
} catch (Other) {
try {
request = newActiveXObject("Microsoft.XMLHTTP");//再不行就用老版本的 XMLHTTP 对象
} catch (failed) {
request = false; //再不行就没办法了}
}
}
if(!request){
alert("Error initializing XMLHttpRequest!");//如果一直都不行的话,给个警告吧
}
}
function getLoginStatus_GET() { //这个是 GET 版的
varusername = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "Valida.php?username=" + escape(username) + "&password=" + escape(password);
createRequest(); //创建对象
request.open("GET", url, true); //调用 Open 方法,使用 GET 来提交一个表单到上面这个URL上面,说白了就是访问这个网页!
request.onreadystatechange = updatePage; //设置异步回调函数,呵呵,下面要写好哦!当然如果不是异步的话,上面的 ture 就可以换成 false 了!
request.send(null);//都 GET 过了,没他啥事了,做个提交把数据发送出去就完事 }
function getLoginStatus_POST() { //这个是 POST 版的
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var url = "Valida.php"; //唯一不同的是这里没有跟变量(变量在哪里?)
var data = "username=" + escape(username) +"&password=" + escape(password);//这里不是么? createRequest(); //创建对象
request.open("POST", url, true);//这回我们改一下,因为是POST,所以这里就是POST啦```
request.setrequestheader("Content-Length",data.length);//好熟悉,看过 HTTP 协议的都知道 request.setrequestheader("Content-Type","application/x-www-form-urlencoded");
request.onreadystatechange = updatePage; //设置异步回调函数
request.send(data); //这回就要发送数据了,就是上面的 data 变量,跟 GET 没啥区别,唯一不同的就是不把变量放在 URL 后面而是单独用 send 方法来提交
}
function updatePage() { //回调函数,这个也很关键哦``
if (request.readyState == 4) { //XMLHttpRequest 一共有4个状态(0-4),4表示数据接收完了
if (request.status == 200) {//如果没有报HTTP错误的话(200标示成功)
var response = request.responseText; //把收到的数据放到变量里,接收数据用的就是这个方法哦`(记住它叫responseText)
document.getElementById("loginStatus").innerHTML = response;//这个没什么`` } else
document.getElementById("loginStatus").innerHTML = request.status + " " + statusText; //如果你没有收到数据那就需要知道问题出在哪儿了,这句就是这个意思!
}
}

高亮代码跟写注释好累哦,总之,服务端只要写两个函数判断接收到的变量就可以了```跟普通表单是一样的```
OK,就写到这里吧`好困,明天继续研究 XML 跟 JSON! 哇塞`好期待````

标签: JSON, Ajax