AJAX【一】

Asynchronous JavaScript and XML（异步JavaScript和XML)，是一种创建交互式网页应用的网页开发技术。

AJAX工作原理：

AJAX的工作原理：Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。让我们来了解这几个对象。

AJAX优点：

• 节省用户操作，提高用户体验，减少数据请求

• 无刷新更新数据

• 异步与服务器通信

• 基于标准被广泛支持

。。。

AJAX缺点：

• 没有了Back和History功能，即对浏览器机制的破坏

• AJAX的安全问题

• 对搜索引擎支持较弱

。。。

Ajax适用场景

• 表单验证

• 快速的用户与用户间的交流响应

• 对数据进行过滤和操纵相关数据的场景

• 普通的文本输入提示和自动完成的场景

。。。

Ajax不适用场景

• 搜索

• 基本的导航

• 替换大量的文本

。。。

第一个Ajax应用：

<input type="button" value="提交" id="btn">
<script>
    window.onload=function (){
        //ie兼容问题 new ActiveXObject('Microsoft.XMLHTTP')
        var xhr;
        //方法一
        /*if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }*/
        //方法二：
        try{
            //尝试执行try中的代码，如有错误，执行catch中的代码并返回错误信息
            xhr=new XMLHttpRequest();
            //throw new Error('手动报错');
        }catch(e){
            xhr=new ActiveXObject('Microsoft.XMLHTTP');
            //alert(e);
        }
        var btn=document.getElementById("btn");
        btn.onclick=function (){
            var xhr=new XMLHttpRequest();
            xhr.open('get','msg/msg.txt',true);
            xhr.send();
            xhr.onreadystatechange=function (){
                if(xhr.readyState ==4){
                	if(xhr.status ==200){
                    	 alert(xhr.responseText);
                    }else{
                    	alert("出错了"+xhr.status);
                    }
                }
            }
        }
    }
</script>