Ajax学习笔记

1.定义

AJAX (Asynchronous JavaScript and XML) 即异步的JavaScript和XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。简单来说，Ajax就是让JS去读取服务器上的数据。

2.常见用法

常见的请求文件分为静态数据和动态数据两种：

• 请求并显示静态TXT文件

  • 字符集编码 【UTF-8】

  • 缓存 阻止缓存【常用方法：加时刻 url + "?t=" + new Date().getTime()】

• 动态数据（数组，json）

3.创建Ajax库

创建Ajax库分为四步骤，主要如下：

1. 创建Ajax对象；

2. 连接到服务器；

3. 发送请求；【告诉服务器你要什么文件】

4. 接收返回值；【服务器返回你要的文件】

示例：

               //【1】创建Ajax对象

                if (window.XMLHttpRequest)//undefined在if里面代表假

                {

                    //非IE6兼容

                    var oAjax = new XMLHttpRequest();

                } else

                {

                    //IE6兼容,其他浏览器访问不了，得兼容

                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

                }

                // alert(oAjax);    //XMLHttpRequest

                // alert(oAjax.readyState);//0

                //【2】连接服务器

                //open(方法，文件名,异步传输)

                oAjax.open("GET", "../aaa.txt?t=" + new Date().getTime(), true);

                //【3】发送请求

                oAjax.send();

                //【4】接收请求    [网速使然，并不知道何时才能返回，使用onreadystatechange来判断]

                oAjax.onreadystatechange = function () {

                    // oAjax.readyState 判断浏览器和服务器进行到哪一步了

                    if (oAjax.readyState == "4")       //读取完成

                    {

                        if (oAjax.status == "200")   //状态码200：成功

                        {

                            alert("成功" + oAjax.responseText);

                        } else {

                            alert("失败" + oAjax.status);   

                        }

                    }

                };

 

json操作示例 

<script>

        window.onload = function () {

            var oBtn = this.document.getElementById("btn1");

            var oUl = this.document.getElementById("users");

            oBtn.onclick = function () {

                ajax("../aaa.txt", function (str) {

                    var arr = eval(str)

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

                        var oLi = document.createElement('li');

                        oLi.innerHTML = '用户：' + arr[i].a + '<br/>密码：'+arr[i].b;

                        oUl.appendChild(oLi);

                    }

                    //alert(arr[0].a);

                });

            };

        }

    </script>

属性和变量（JS）：用没有定义的变量-报错；用没有定义的属性-undefined【解释上文为何用window.XMLHttpRequest做判断】

                //【1】

                var a=12；

                alert(a)；//12

                alert(window.a);//12 全局变量是window的一个属性

              //【2】假设我没有给a赋值

                alert(a);//报错

                alert(window.a);//undefined

ReadyState状态：

0  ：（未初始化）还没有open()方法

1  ：（载入）已调用send（）方法，正在发送请求

2  ：（载入完成）send（）方法完成，已收到全部响应内容

3  ：（解析）正在解析响应内容

4  ：（完成）响应内容解析完成，可以在客户端调用了