AJAX 过程总结

Posted 2020-10-16

AJAX 工作过程：
(1) 创建对象（需要处理兼容性问题）
        创建XMLHttpRequest对象（创建一个异步调用对象）
        <!-- ie6以上 -->
        var xhr = new XMLHttpRequest();
        <!-- ie6及以下 -->
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP")
　　　　　// 兼容性处理
　　　　 try{
　　　　　　var xhr = newXMLHttpRequest();
　　　　 }catch(e){
　　　　　　var xhr = newActiveXObject("Microsoft.XMLHTTP");
　　　　 }

(2) 连接服务器
        创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息（get或post、url、同步或异步，默认异步为true）
        xhr.open("get/post","1.php?username=Jack&age=12",true);
(3) 发送HTTP请求
        xhr.send();
(4) 设置响应HTTP请求状态变化的函数
        oAjax.onreadystatechange = function(){ //当请求状态改变时要调用的事件函数 }
(5) 获取异步调用返回的数据
        xhr.onreadystatechange = function(){
            if(xhr.readyStat e== 4 && xhr.status == 200){
                <!-- responseText就是返回的数据 -->
                alert(xhr.responseText);
            }
        }
(6) 使用javascript和DOM实现局部刷新
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                document.getElementById("myId").innerhtml=xhr.responseText;
            }
        }

AJAX 的缺点：
1、ajax 不支持浏览器 back 按钮。
2、ajax 存在安全性问题，暴露了与服务器交互的细节。
3、ajax 对搜索引擎的支持比较弱。