Ajax基础2

Posted 2020-07-27 distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax基础2相关的知识，希望对你有一定的参考价值。

什么是服务器

网页浏览过程的分析

如何配置自己的服务器程序（AMP）

什么是Ajax

无刷新数据读取

异步，同步

Ajax基础(2)

使用Ajax

基础请求显示txt的文件

字符集编码

缓存，阻止缓存

动态数据，请求js或（json）文件

eval的使用

DOM创建元素

局部刷新，请求并显示部分网页文件

Ajax原理

http请求方法

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    var oAjax=null;
    
    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器
    oAjax.open(\'GET\', url, true);
    
    //3.发送请求
    oAjax.send();
    
    //4.接收服务器的返回
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4)    //完成
        {
            if(oAjax.status==200)    //成功
            {
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                    fnFaild(oAjax.status);
            }
        }
    };
}

简单ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(\'btn1\');
    
    oBtn.onclick=function ()
    {
        ajax(\'data.txt\', function (str){
            //str->\'[1,2,3,4]\'
            //alert(str);
            var arr=eval(str);
            
            alert(arr[3]);
        });
    };
};
</script>
</head>

<body>
请求服务器上的文件，这个文件放了一个数组<br />

请求文件放置数组里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
    var oUl=document.getElementById(\'ul1\');
    var aBtn=document.getElementsByTagName(\'a\');
    var i=0;
    
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            ajax(\'page\'+(this.index+1)+\'.txt\', function (str){
                var aData=eval(str);
                
                oUl.innerHTML=\'\';
                for(i=0;i<aData.length;i++)
                {
                    var oLi=document.createElement(\'li\');
                    
                    oLi.innerHTML=\'<strong>\'+aData[i].user+\'</strong><i>\'+aData[i].pass+\'</i>\';
                    
                    oUl.appendChild(oLi);
                }
            });
        };
    }
};
</script>
</head>

<body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>