Ajax基础了解

最新推荐文章于 2024-06-10 15:15:38 发布

原创最新推荐文章于 2024-06-10 15:15:38 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步 #javascript

JS基础分享专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Ajax技术的基本概念，展示了如何利用Ajax实现网页的部分异步更新，包括创建XMLHttpRequest对象、链接服务器、发送请求及接收返回值等关键步骤。

一、什么是Ajax
AJAX = Asynchronous Javascript And XML （异步JavaScript和XML）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二、Ajax怎么编写？
1、创建XMLHttpRequest 对象
所有现代浏览器都支持 XMLHttpRequest 对象（而IE5和IE6使用ActiveXObject 对象）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象

variable=new XMLHttpRequest();//除IE5、IE6浏览器写法

    variable=new ActiveXObject("Microsoft.XMLHTTP");//IE5、IE6浏览器写法

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：兼容处理
哪这个兼容的写法如下：

var xmlhttp;
            if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

2、链接服务器
使用XMLHttpRequest 对象的 open() 方法：

//open(方法, 文件名, 异步传输)
oAjax.open('GET', 'a.txt', true);

在 open()中接収的三个参数，
第一个是方法，这里的方法有两种，分别是 GTE和POST。
在这里提一下，与POST相比GTE会更简单和快捷些，大部分时候也都是用GET的。至于POST有很多弊端，jute这里不着重介绍，用GTE方法就会。

3、发送请求
将请求发送到服务器，发送请求时用send()方法：

oAjax.send();

4、接受返回值

oAjax.onreadystatechange=function ()
        {
            //oAjax.readyState  //浏览器和服务器，进行到哪一步了
            if(oAjax.readyState==4) //读取完成
            {
                if(oAjax.status==200)   //成功
                {
                    alert('成功：'+oAjax.responseText);
                }
                else
                {
                    alert('失败:'+oAjax.status);
                }
            }
        };

知道这几个步骤我们就把他给封装成一个函数

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    if(window.XMLHttpRequest)//兼容的写法
    {
        var oAjax=new XMLHttpRequest();
    }
    else
    {
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

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

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

    //4.接收返回
    oAjax.onreadystatechange=function ()
    {
        //oAjax.readyState  //浏览器和服务器，进行到哪一步了
        if(oAjax.readyState==4) //读取完成
        {
            if(oAjax.status==200)   //成功
            {
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                {
                    fnFaild(oAjax.status);
                }
                //alert('失败:'+oAjax.status);
            }
        }
    };
}

封装完函数后，我们要学会使用：

ajax('aaa.txt?t='+new Date().getTime(), function (str){
//其中在url地址后面加上?t=new Date().getTime()用来阻止浏览器的缓存。
            alert(str);
        }, function (){
            alert('失败');
        });