对ajax的了解

1.什么是ajax？
ajax的英文名称：Asynchronous JavaScript and XML（异步的javascript和xml），ajax是一种无需重新加载页面，自动更新部分页面的技术，ajax的使用案例：百度的搜索框的关键字、登陆和注册的表单验证、股票信息的自动更新等。

2.传统的开发模式与ajax的开发模式的不同之处
传统的开发模式：同步执行，页面需要重新加载才可以有页面信息，效率不高。
ajax的开发模式：异步执行，页面不需要重新加载，自动更新页面信息，效率高。

3.ajax.js文件的编写步骤
（1）、创建ajax对象
创建XMLHTTPRequest对象，用于后台和服务器的交换数据，意味着：能无需重新加载页面的情况下，自动更新页面。注意：XMLHTTPRequest对象是所有浏览器都支持的对象，当然老版本的浏览器还不支持，如：IE7以下的版本。还是需要考虑兼容性问题。
demo：

//1.创建ajax对象
var xmlhttp;
if (window.XMLHttpRequest)
  {// 兼容 IE7+, Firefox火狐, Chrome谷歌, Opera欧朋, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// 兼容 IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

（2）、连接服务器

//2.连接服务器
        //open(方法, 文件名, 异步传输)
        oAjax.open('GET', 'a.txt', true);

（3）、发送请求

//3.发送请求
        oAjax.send();

（4）、接受返回值
请求状态监控：onreadystatechange事件
readyState属性：请求状态
0 （未初始化）还没有调用open()方法，尚未初始化
1 （载入）已调用send()方法，正在发送请求，正在加载
2 （载入完成）send()方法完成，已收到全部响应内容，加载完成
3 （解析）正在解析响应内容，正在处理
4 （完成）响应内容解析完成，可以在客户端调用了，处理完成
status属性：请求结果
demo：

//4.接收返回
        oAjax.onreadystatechange=function()
        {//
                    //oAjax.readyState  //浏览器和服务器，进行到哪一阶段了
            if(oAjax.readyState==4) //处理完成，
            {
                if(oAjax.status==200)   //成功，200状态码
                {
                    alert('成功：'+oAjax.responseText)；//成功就返回文本信息
                }
                else
                {
                    alert('失败:'+oAjax.status);
                }//失败就返回状态码
            }
        };

4.ajax的使用过程
a、先写好ajax.js文件，并连接到静态页面html
b、写好文本，放在服务器站点上
demo：

<script>
window.onload=function ()
{//页面加载时
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()
    {//oBnt对象点击事件，调用ajax.js文件里的ajax(url, fnSucc, fnFaild)方法，注意url文件路径必须是英文，不可有中文，相对路径或绝对路径都可以。
        ajax('aaa.txt', function (str){
            alert(str);//成功则返回文本中的内容
        }, function (){
            alert('失败');//不成功返回‘失败’
        });
    };
};
</script>

c、处理缓存方法
阻止缓存方法：浏览器通过访问url的来识别决定是否使用缓存，（只要url地址在变，就可以了解决缓存问题）。也可以在路径那里加上get数据来阻止缓存。getTime()是毫秒数
demo：

<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()
    {
        ajax('aaa.txt?t='+new Date().getTime(), function (str){//在url路径上添加get方法即可阻止缓存问题，当然也可以在浏览器上改变url路劲
            alert(str);//var arr=eval(str);ajax.js读取的数据是字符串，如果文本内容是数组，要将数组变字符串，就要使用到eval（）方法
        }, function (){
            alert('失败');
        });
    };
};
</script>

5.HTTP请求方法
GET是用于获取数据（如：浏览帖子）：
POST是用于上传数据（如：用户注册）：
get、post的区别：
get是在url里传数据、安全性不高，容易泄露信息内容，容量小：有缓存，
post安全比较好，不通过网址url传递信息，可以传大文件：2G，容量大，没有缓存

猜你喜欢