AJAX入门及实例分析

前边参考了许多人的做法后自己封装了一个ajax的JS类，完全属于自造轮子，如果你正在使用其他的框架（如：jQuery），那就没必要在看下去了。
一、ajax_function.js 代码如下：
var XMLHttpReq=false;

function createXMLHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla
XMLHttpReq=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}

/*
* method 请求方式 可以是POST 或者 GET
* url 异步调用的路径
* content 这里传递给后台的是参数
* callback 回调函数名（以前一直以为这里就是一个回调函数的名字，其实不 然，这里可以是一个构造function）
* syn 是否异步调用 true 异步；false 同步
*/

function send(method,url,content,callback,syn){
createXMLHttpRequest();
if(method.toLowerCase()=="get") {
XMLHttpReq.open(method, url, syn);
}else if(method.toLowerCase()=="post") {
XMLHttpReq.open(method, url, syn);
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}else {
window.alert("http request parameter wrong category!");
return false;
}

/*
* 如果是异步调用，那么指定其回调函数，如果是同步调用，指定的回调函数不符合w3c标准。
*/
if(syn){
XMLHttpReq.onreadystatechange=callback;
}
XMLHttpReq.send(content);
}

二、应用实例。
在页面中引入封装的控件


1、简单的异步调用。
function simple_fun(){
send("GET", url, null,call_back,true);
}
function call_back(){
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var inner = XMLHttpReq.responseText;
//var inner = XMLHttpReq.responseXML;
//这里获取了inner后就可以根据实际需求来修改页面的显示。
// your code
} else {

}
}
}

2、回调函数带参数的异步调用
function CarryParameters_fun(){
var arg="param";
send("GET", url, null,function(){call_back(arg),true);
}
function call_back(arg){
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var inner = XMLHttpReq.responseText;
//传入的参数arg可以参与到回调函数的运算。

} else {

}
}
}

3、同步调用
function Synchronization_fun(){
//注意传入的回调函数是null,syn是false.
send("GET", url, null,null,false);
}
那么，以先入为主的思想你是不是也纳闷：传入的回调函数是空，那XMLHttpRequest.response返回的数据在哪里处理？
如果异步调用，当然是在回调函数里接收到返回值。但是同步调用则有些不同，同步调用不使用回调函数，而
是在XMLHttpReq.open(method, url, syn);XMLHttpReq.send(content); 后面可以直接处理结果，比如
function send(method,url,content,callback){
createXMLHttpRequest();
if(method.toLowerCase()=="get") {
XMLHttpReq.open(method, url, syn);
}else if(method.toLowerCase()=="post") {
XMLHttpReq.open(method, url, false);
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}else {
window.alert("http request parameter wrong category!");
return false;
}

XMLHttpReq.send(content);

//不需要回调函数，直接处理结果
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var inner = XMLHttpReq.responseText;

} else {

}
}
}
所以，在ajax的同步调用里面我们可以这样写：
function Synchronization_fun(){
send("GET", url, null,null,false);
call_back();
}
function call_back(){
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var inner = XMLHttpReq.responseText;

} else {

}
}
}