AJAX基础学习

什么是AJAX？

    AJAX (Asynchronous JavaScript and XML):异步的JavaScript和XML

    AJAX 不是一种新的编程语言，而是使用现有标准的新方法。

    AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以是网页实现异步更新。

        这意味着可以在不重新加载整个网页的情况下，对网页的某一部分进行更新。传统的网页如果需要更新内容，必须重载整个网页。

 

XMLHttpRequest对象：

    XMLHttpRequest对象是AJAX的基础。

    所有现代浏览器均支持XMLHttpRequest对象。

    XMLHttpRequest对象用于在后台与服务器进行数据交换。

 

    创建XMLHttpRequest对象：

        语法： var xhr = new XMLHttpRequest();

    老版本的Internet Explorer(IE5和IE6)使用ActiveX对象：

        语法： var xhr = new ActiveXObject("Microsoft.XMLHTTP");

 

    为了应对所有的现代浏览器，包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象，支持则创建XMLHttpRequest对象，

        不支持则创建ActiveXObject对象

 

    例如：

        var xhr ;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else{

            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

 

    XMLHttpRequest对象用于和服务器进行数据交换：

        向服务器发送请求：

            如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

            open()语法：规定请求的类型，url以及是否异步处理请求

            open(method,url,async):

                method: 请求的类型.例如：get 或 post

                url: 文件在服务器上的位置

                async: true（异步） 或 false（同步）

            send()语法：将请求发送到服务器

            send(string):

                string: 仅用于post请求。

 

            请求时是使用get还是post?

                与post相比，get更简单快速，并且大部分情况下都能用.

                然而，在一下情况下请使用post请求：

                    1：无法使用缓存文件（更新服务器上的文件或数据库）

                    2：向服务器发送大量数据（post没有数据限制）

                    3：发送包含未知字符的用户输入时，post比get更稳定也更可靠。

 

                get请求：

                    一个简单的get请求：

                    xhr.open('get','demo_get.asp',true);

                    xhr.send();

 

                    上面的例子，可能得到的是缓存的结果（当缓存中已经存在请求路径的结果是时）

                    为了得到的是最新的数据而不是缓存数据，可以向url添加一个唯一的ID：

                    xhr.open('get','demo_get.asp?t=' + Math.random(),true);

                    xhr.send();

 

                    如果想通过get方式发送信息，可以向url添加信息：

                   xhr.open('get','demo_get.asp?name=Bill&age=22',true);

                   xhr.send();

 

                post请求：

                    一个简单的post请求：

                    xhr.open('post','demo_post.asp',true);

                    xhr.send();

 

                    如果需要像HTML表单那样post数据，请使用setRequestHeader()来添加HTTP请求头信息。

                    然后在send()方法中规定你希望发送的数据：

                    xhr.open('post','ajax_test.asp',true);

                    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

                    xhr.send('name=Bill&age=22');

 

                    setRequestHeader()语法：向请求添加HTTP头

                        setRequestHeader(header,value);

                            header: 规定头的名称

                            value: 规定头的值

 

                url： 服务器上的文件：

                    open()方法的url参数是指服务器上的文件的地址，该文件可以是任何类型的文件。

 

                异步： true 或 false

                    XMLHttpRequest对象如果需要用于异步的话，其open()方法的async参数必须设置为true.

                    对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时，

                    AJAX出现之前，这可能会引起应用程序挂起或停止。

                    通过AJAX，JavaScript无需等待服务器的响应，而是:

                        在等待服务器响应时执行其他脚本

                        当响应就绪后对响应进行处理

 

                    async = true:

                        当使用async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

                        例如：

                        xhr.onreadystatechange = function(){

                            if(xhr.readyState == 4 && xhr.status == 200){

                                //当响应处于就绪状态时要执行的任务代码

                                document.getElementById('myDiv').innerHTML = xhr.responseText;

                            }

                        };

                        xhr.open('get','test.txt',true);

                        xhr.send();

 

                    async = false:

                        如果使用async=false,JavaScript会等到服务器响应就绪才继续执行。

                        如果服务器繁忙或缓慢，应用程序会挂起或停止。

                        当你使用async=false时，请不要编写onreadystatechange函数，

                        把响应就绪要执行的代码放到send()语句后面即可：

                        例如：

                        xhr.open('get','test.txt',false);

                        xhr.send();

                        document.getElementById('myDiv').innerHTML = xhr.responseText;

 

服务器响应：

    如果需要获得来自服务器的响应，请使用XMLHttpRequest对象的 responseText 或 responseXML 属性。

        responseText: 获得字符串形式的响应数据

        responseXML: 获得XML形式的响应数据

 

    responseText 属性：

        如果来自服务器的响应数据不是XML，请使用responseText属性。

        例如：

        document.getElementById('myDiv').innerHTML = xhr.responseText;

 

    responseXML 属性：

        如果来自服务器的响应数据是XML，而且需要作为XML对象进行解析，请使用responseXML属性。

        例如：请求books.xml文件，并解析响应

            xmlDoc = xhr.responseXML;

            txt = "";

            x = xmlDoc.getElementsByTagName('artist');

            for(var i = 0; i < x.length; i++){

                txt = txt + x[i].childNodes[0].nodeValue + '<br/>';

            }

            document.getElementById('myDiv').innerHTML = txt;

 

onreadystatechange事件：

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。

    每当readyState改变时，就会触发onreadystatechange事件。

    readyState属性存有XMLHttpRequest的状态信息。

 

    下面是XMLHttpRequest对象的三个重要属性：

        onreadystatechange: 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。

        readyState: 存有XMLHttpRequest对象的状态。从0到4发生变化.

            0：请求未初始化

            1：服务器连接已建立

            2：请求已接收

            3：请求处理中

            4：请求已完成，并且响应已就绪

        status: 存有页面状态码

            200：“OK”

            404：未找到页面

 

    在onreadystatechange事件中，我们规定当服务器响应已经做好被处理的准备时所执行的任务。

        当readyState等于4且页面状态码为200时，表示响应已经就绪并且成功：

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4 && xhr.staus == 200){

                    document.getElementById('myDib').innerHTML = xhr.responseText;

                }

            };

 

        onreadystatechange事件被触发5次（0-4），对应着readyState的每个变化。

 

参考资料：http://www.w3school.com.cn/ajax/index.asp