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 {
               
    }
  }
}