编写自己的一个ajax库。

r囧r小猫 2022-06-07 05:19 142阅读 0赞

ajax用途可以用来读取后台数据，实现分页等等功能。

ajax不难，今天我们来写一个属于自己的一个ajax库。

知识点：

1. 编写 Ajax 库，AJAX 请求步骤  
2. 创建 ajax 对象：XMLHttpRequest  
3. 在 IE6 下兼容 XMLHttpRequest 的解决方案：ActiveXObject("Microsoft.XMLHTTP")  
4. window属性与变量的关系  
5. 用 window 属性来处理 IE6 的兼容性问题  
6. 连接服务器：oAjax.open()  
7. 同步与异步的区别  
8. 发送请求：oAjax.send()  
9. 接收返回：oAjax.onreadystatechange、readyState 属性、oAjax.status、oAjax.responseText  
10. 封装 AJAX 函数

代码：

readyState属性：请求状态  
0 （未初始化）还没有调用open()方法  
1 （载入）已调用send()方法，正在发送请求  
2 （载入完成）send()方法完成，已收到全部响应内容  
3 （解析）正在解析响应内容  
4 （完成）响应内容解析完成，可以在客户端调用了

ajax数据类型：

json , txt , xml

用法：写一个简单的分页：

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>分页</title>
    </head>
    <body>
        <script src="ajax.js"></script>
        <script>
           window.onload = function(){
                var ul = document.getElementById("ul1");
                var oa = document.getElementsByTagName("a");
                //循环三个标签
               for ( var i = 0; i<oa.length; i++){
                   //索引
                   oa[i].index = i;
                   oa[i].onclick = function(){
                       // 读取数据
                       ajax( "page"+ ( this.index + 1)+ ".txt", function( str ){
                           var pageData = eval( str );
                           //清空页数内容
                           ul.innerHTML = '';
                           for ( var i =0; i < pageData.length; i++){
                               //创建li元素
                               var li = document.createElement("li");
                               li.innerHTML = "<em>"+pageData[i].user + "</em>"+pageData[i].pass;
                                ul.appendChild(li);
                           }
                       });
                   }
               }
           };
        </script>
        <ul id="ul1">
    
        </ul>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
    </body>
    </html>