ajax获取服务器文件



获取服务器上的文本文件


Ajax获取文件,一般是通过我们的ajax发送的请求去获取服务器上的一个网址,或者是一个文件地址。然后通过返回给我们的ajax,然后再来做一个相对应的处理。


1. 首先,我们先创建这个数据文件


1) 这里我已经写好了实例,看一下。例如我创建了一个这个网页文件。


Ajax1.png


2) 同时,也创建了一个相同名字的txt文本文件。


Ajax2.png


这个就是文本文件里面的内容。


Ajax3.png


这就是我已经准备好的一个数据文件。

3) 其实ajax读取文本文件的原理很简单,在核心思想掌握之后,对大型的应用开发是很容易上手的。
重点基础是熟悉XMLHttpRequest这个对象的属性和方法,对其得心应手才能够写出用户感受良好的应用。

 

2. 第二步还是创建一个XMLHttpRequest的对象


3. 第三步是获取文件,但是它有两个注意点


第一个:就是我们的ajax依赖于JavaScript,它必须在网页中运行。
第二个:就是我们这个ajax网页文件的编码跟我们数据文件的编码一定要统一,不然可能就会出现乱码的问题。

1) 我们还是看一下这个示例,看它是如何获取txt文件。我们刷新页面,这个页面和我们上节课的页面类似。


Ajax4.png

2) 我们点击这个按钮,它会获取对应的服务器上的文件,然后把服务器上面的内容展示到文本框中。我们服务器上的文件就是这个:


Ajax5.png


3) 我们点击一下test按钮,文本框的中的内容就被改变了。


Ajax6.png


就被替换成了txt文本中的内容:


Ajax7.png


 

4. 查看获取服务器文件的网页源码


这就是网页源码的所有内容。


<html>
<head>
<title>Ajax初步入门视频课程</title>
</head>
<body>
 
<script type="text/javascript">
 
var xmlHttp = null;
 
function readyStateChangeHandle()
{
    if (xmlHttp.readyState ==4 ) {
        if (xmlHttp.status == 200 ) {
            document.getElementById('vv').innerHTML = xmlHttp.responseText;        
        }     
    }
}
 
function ajaxFunction(the_request_url)
{
    try {
        xmlHttp = new XMLHttpRequest() ;   
    }    
    catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
                alert("您的浏览器不支持ajax") ;
                return false;
            }    
        }    
    }
    if (xmlHttp) {
        xmlHttp.open('GET', the_request_url, true);     
        xmlHttp.onreadystatechange = readyStateChangeHandle;
        xmlHttp.send(null);
    } else {
        alert('error');     
    }
}
</script>
<input type="button" id="test" value="test" onclick="javascript:ajaxFunction('ajax-04.txt')" />
<br/><br/>
<div style="border:1px solid black;width:300px;height:250px;" id="vv">test ajax</div>
</body>
</html>

 

1) 首先,我定义了xmlHttp的一个全局的变量。
var xmlHttp = null;

2) 其次,我定义了两个function函数


function readyStateChangeHandle()
{
    if (xmlHttp.readyState ==4 ) {
        if (xmlHttp.status == 200 ) {
            document.getElementById('vv').innerHTML = xmlHttp.responseText;        
        }     
    }
}
 
function ajaxFunction(the_request_url)
{
    try {
        xmlHttp = new XMLHttpRequest() ;   
    }    
    catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
                alert("您的浏览器不支持ajax") ;
                return false;
            }    
        }    
    }
 
    if (xmlHttp) {
        xmlHttp.open('GET', the_request_url, true);     
        xmlHttp.onreadystatechange = readyStateChangeHandle;
        xmlHttp.send(null);
    } else {
        alert('error');     
    }
}



第一个函数


a) 取名为
readyStateChangeHandle。
也就表明是这个ajax的状态发生变化的时候,这样的一个处理函数,看了这个函数的定义之后,应该就大致了解这个函数是做什么事情,做到一个见名知意的好处。

b) 然后我在里面判断了它的readyState这个属性。

if (xmlHttp.readyState ==4 ) {
        if (xmlHttp.status == 200 ) {
         document.getElementById('vv').innerHTML = xmlHttp.responseText;     }     
     }

当这个属性等于4,并且我判断了它的状态码是不是等于200,我还是把id为vv的html元素里面的内容置为我这个返回的responseText。
我们获取服务器上的文件或者接口的输出,我们就是通过responseText或者是responseXML这样的两个属性来获取的。

这是第一个函数,其实就是判断状态,然后展示对应的内容。

 

第二个函数


还是响应ajax请求的一个函数。

a) 首先,还是创建我们的XMLHttpRequest对象。

try {
        xmlHttp = new XMLHttpRequest() ;   
    }    
    catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
                alert("您的浏览器不支持ajax") ;
                return false;
            }    
        }    
    }

 

b) 然后再是发送这么一个请求。

xmlHttp.open('GET', the_request_url, true);     

xmlHttp.onreadystatechange = readyStateChangeHandle;

xmlHttp.send(null);


c) 然后将我们创建的第一个函数赋值给这个
onreadystatechange属性。

xmlHttp.onreadystatechange = readyStateChangeHandle;

 

d) 然后我们定义了一个按钮来绑定这个事件。
<input type="button" id="test" value="test" onclick="javascript:ajaxFunction('ajax-04.txt')" />
当我们onclick的时候,绑定了ajaxFunction这个函数,来获取这个ajax-04.txt txt文件。

所以,当我们点击这个按钮的时候,它就会调用ajaxFunction函数,创建XMLHttpRequest这个对象,建立请求,然后发送请求。
当然,中间有监控状态变化的一个函数。

所以这就达到了我们点这个按钮去获取服务器上的这个txt文件的一个效果。


Ajax8.png




获取服务器上的XML文件


我们看一下示例,有已经定义好的示例。


<!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>Asynchronous JavaScript And XML</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp=null;
function readyStateChangeHandle()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var xmlDOM=xmlHttp.responseXML;
            var xmlRoot=xmlDOM.documentElement;
            try
            {
                var xmlItem=xmlRoot.getElementsByTagName("item");
                alert(xmlItem[0].firstChild.data);
            }
            catch(e)
            {
                alert(e.message);
            }
        }
    }    
}
function ajaxRequest()
{
    if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange=readyStateChangeHandle;
    xmlHttp.open("GET","data.xml",true);
    xmlHttp.send(null);
}
</script>
<input type="button" onclick="ajaxRequest()" value="Take me to the world of AJAX" />
</body>
</html>

 

1. 首先,我创建了一个html网页,这个网页的结构跟刚才的示例有点儿雷同。


2. 然后我们定义了JavaScript代码。


<script type="text/javascript">
var xmlHttp=null;
function readyStateChangeHandle()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var xmlDOM=xmlHttp.responseXML;
            var xmlRoot=xmlDOM.documentElement;
            try
            {
                var xmlItem=xmlRoot.getElementsByTagName("item");
                alert(xmlItem[0].firstChild.data);
            }
            catch(e)
            {
                alert(e.message);
            }
        }
    }    
}
function ajaxRequest()
{
    if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange=readyStateChangeHandle;
    xmlHttp.open("GET","data.xml",true);
    xmlHttp.send(null);
}
</script>


3. 同样我也定义了两个函数。


function readyStateChangeHandle()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var xmlDOM=xmlHttp.responseXML;
            var xmlRoot=xmlDOM.documentElement;
            try
            {
                var xmlItem=xmlRoot.getElementsByTagName("item");
                alert(xmlItem[0].firstChild.data);
            }
            catch(e)
            {
                alert(e.message);
            }
        }
    }    
}
function ajaxRequest()
{
    if(window.XMLHttpRequest)
    {
        xmlHttp=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange=readyStateChangeHandle;
    xmlHttp.open("GET","data.xml",true);
    xmlHttp.send(null);
}


4. 第一个函数


用来监控状态的改变和响应。

1) 同理,我先监控它的readyState状态码,是不是
看看它的状态是不是为4。

function readyStateChangeHandle()
{
    if(xmlHttp.readyState==4)
    {
        if(xmlHttp.status==200)
        {
            var xmlDOM=xmlHttp.responseXML;
            var xmlRoot=xmlDOM.documentElement;
            try
            {
                var xmlItem=xmlRoot.getElementsByTagName("item");
                alert(xmlItem[0].firstChild.data);
            }
            catch(e)
            {
                alert(e.message);
            }
        }
    }    
}

2) 然后,监控它的状态码是不是为200。
if(xmlHttp.status==200)

如果为200的话,我就获取这个XML。
我是通过这xmlHttp对象的的responseXML 这个属性来获取这个对应的xml文件的。


3) 然后就获取了
var xmlRoot=xmlDOM.documentElement;这样的一个根元素。


4) 然后,我再通过这个根元素下面的TagName为item的这样一个元素,因为它可能有多个这个item。
var xmlItem=xmlRoot.getElementsByTagName("item");

我获取第0个的第一个子元素的数据。
alert(xmlItem[0].firstChild.data);

这就是我获取了整个输出里面的XML文件内容,然后将它解析为一个XML对象,获取到对应的数据。

 

5. 第二个函数


同样也是建立我们的XMLHttpRequest对象。

1) 它用两种方式来建立。

if(window.XMLHttpRequest)

    {

        xmlHttp=new XMLHttpRequest();

    }

    else if(window.ActiveXObject)

    {

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

    }


2) 然后再是绑定状态改变的这么一个属性。
xmlHttp.onreadystatechange=readyStateChangeHandle;


3) 然后,新建我们的这个请求。
xmlHttp.open("GET","data.xml",true);

再发送请求:
xmlHttp.send(null);

 

6. 同样是一个按钮,通过onclick事件来响应这个


ajaxRequest函数。
<input type="button" onclick="ajaxRequest()" value="Take me to the world of AJAX" />


7. 最后我们看一下这个数据文件的格式


Ajax9.png 


1) 第一行,声明这是一个XML文件。

2) 然后第二行这个,定义了这个XML文件的根元素为:Root。

3) 然后第三行才是我们的item,item里面就是我们的内容。


8. 我们把这个xml文件粘贴到服务器里面,我们看一下效果。



Ajax10.png


点击这个按钮,看看效果。



Ajax11.png


这就是我们XML文件里面定义的内容,它就已进读取到了,并且把里面的内容做了解析了。


9. 一个技巧


当我们发送ajax请求的时候,我们可以通过Chrome浏览器里面的Network。


Ajax12.png


当我们点击按钮的时候,就会在这里显示出XML文件的记录。(记得把开关打开,否则就不会记录)这就是我们的ajax请求,这是我们接口的输出,我们在这里可以看到这个内容。


Ajax13.png


10. 然后看我们发送的请求


如果大家对Http协议比较熟悉的话,这些请求头;包括响应头;还有一个响应的内容我们都可以通过这个工具很清楚的了解到这个过程。


Ajax14.png

 



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

有一位课程导师想与你聊聊

客服热线 400-862-8862

回到顶部