AJAX基础

AJAX应用到的技术

    AJAX涉及到7项技术，其中Javascript、XMLHttpRequest、Dom、XML是最为重要
XMLHttpRequest对象
    XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据交换，却不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既可减轻服务器负担又加快了响应速度、缩短了用户等待时间。
    
    IE5.0开始，开发人员可以在Web页面内部使用XMLHTTPActiveX组件扩展自身的功能，不用从当前Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla1.0以及NetScape7则是创建继承XML代理类XMLHttpRequest；对应大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同

XMLHttpRequest对象

<script language=“javascript”>
           var xmlHttp = false;
           if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
</script>

XMLHttpRequest对象

XMLHttpRequest对象的方法

:#000000'>head

方法	描述
Abort()	停止当前请求
getAllResponseHeaders()	作为字符串返回完整的headers
getResponseheader(“hederLabel”)	作为字符串返回单个的header标签
open(“method”,“URL”[,asyncFlag[,”userName”[,”password”]]])	设置未决的请求的目标URL方法和其他参数
send(content)	发送请求
setRequestHeader(“label”,”value”)	设置

Javascript/DOM/XML

Javascript一直被定位为客户端的脚本语言，应用最多的地方就是表单数据的校验。现在，可以通过javascript操作XMLHttpRequest，来跟数据库打交道

DOM(Document Object Model)是提供给Html和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身
XML，是网上传输的数据，文档符合统一的标准。Xml可以很容易让所有程序共享

AJAX开发步骤

1.客户端事件发生，调用JavaScript函数编写的事件处理程序
2.在事件处理程序中创建XMLHttpRequest对象
3.配置XMLHttpRequest对象
4.XMLHttpRequest对象发送一个异步HTTP请求到服务器
5.服务器程序接收请求，处理请求，返回相应
6.XMLHttpRequest对象调用callback()函数并处理结果
7.更新HTML
    

初始化对象并发出XMLHttpRequest请求
    var http_request;
    if(window.XMLHttpRequest){
        http_request = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        http_request = new     ActiveXObject(“Mircosoft.XMLHTTP”);
    }
    注：有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错，因此，要确保返回的内容包含text/xml，需加入：
    http_request.overrideMimeType(“text/xml”);

指定响应处理函数
    http_request.onreadystatechange = processRequest;
    当服务器返回信息时，指定客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性既可。
    注：需要指出的是，这个函数名称不加括号，不指定参数。也可以用javascript即时定义函数的方式定义响应函数，比如：
     http_request.onreadystatechange = function(){
    
    };

发送HTTP请求
    指定响应处理函数之后，就可以向服务器发送HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
    http_request.open(“GET”,http://www.example.org/index.jsp,true);
    http_request.send(null);
    open的第一个参数是HTTP请求的方法，GET、Post或者Head
    open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，而不仅仅是静态页面。目标URL处理XMLHttpRequest请求跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
    open的第三个参数只是指定在等待服务器返回信息时，是否继续执行下面的代码。如果为true，则不会，直到服务器返回信息，默认为true

    open调用完毕后，要调用send方法。Send的参数如果是以post方式发出的，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件或者Post内容给服务器，必须先调用setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
    这时，资料则以查询字符串的形式列出，作为send的参数，例如：name=value&so=on

处理服务器返回的信息
    在第二步，我们已经指定了响应处理函数，这一步，来看看响应处理函数都应该做什么。
    首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性标可以指定，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

If(http_request.readyState){
    //信息已经返回，可以开始处理
}else{
    //信息还没有返回，等待
}
    服务器返回信息后，需判断返回的HTTP状态码，确定返回的页面没有错误，所有的状态码可以在W3C的官方网站上查到。其中，200代表页面正常。
    if(http_request.status==200){
    //页面正常，可以开始处理
    }else{
    //页面有问题
    }
    XMLHttpRequest对成功返回的信息有两种处理方式：

responseText
    将传回的信息当字符串使用
responseXML
    将传回的信息当XML文档使用，需用DOM进行解析处理

AJAX开发框架

<script language=“javascript”>
var http_request = false;
function send_request(url){//初始化、指定处理函数、//发送请求的函数
    //初始化XMLHttpRequest对象
    if(window.XMLHttpRequest){
        http_request = new XMLHttpRequest();
    }else if(window.ActiveXObject){//IE
    try{
     http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
      }

        }
        }    
}
If(!http_request){
    window.alert(“无法创建XMLHttpRequest实例”);
    return false；     
}
 http_request.onreadystatechange = processRequest;
 http_request.open(“GET”,url,true);
http_request.send(null);
}

function processRequest(){
    if(http_request.readyState==4){
        if(http_request.status==200){
            alert(http_request.responseText);
        }else{
            alert(“您所请求的页面有异常”);
        }
    }    
}
</script>