ajax读取文件的小总结

最新推荐文章于 2023-07-30 20:58:18 发布

棕旨

最新推荐文章于 2023-07-30 20:58:18 发布

阅读量1k

点赞数

分类专栏： js笔记文章标签： ajax获取数据 json eval

本文链接：https://blog.csdn.net/m15933025112/article/details/89019042

版权

js笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.ajax读取文件

创建数据文件。
创建XMLHttpRequest对象。
获取文件
注意点：
1.在服务器中运行
2.注意编码问题，要统一（ajax文件和数据文件）

2.获取文件的的分类

1.获取txt文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax获取服务器文件</title>
</head>
<body>
<script type="text/javascript">
    var xmlHttp=null;
    //判断服务器状态函数
    function readyStateChangeHandle() {
        if(xmlHttp.readyState ==4){
            if(xmlHttp.status ==200){
                document.getElementById('ssj').innerHTML=xmlHttp.responseText;
            }
        }
    }
    //获取XMLHttpRequest对象函数
    function ajaxFunction(URL) {
        //获取对象
        try {
            xmlHttp =new XMLHttpRequest();
        }
        catch (e) {
            alert('您的服务器不支持ajax');
        }
        if(xmlHttp){
            xmlHttp.open("GET",URL,true);
            xmlHttp.onreadystatechange = readyStateChangeHandle;
            xmlHttp.send(null);
        }
        else {
            alert("error");
        }

    }
    
</script>
<input type="button" id="test" value="test" onclick="javascript:ajaxFunction('text')"/>
<div id="ssj">123213213</div>
</body>
</html>

2.获取xml文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取XML文件</title>
</head>
<body>
<script type="text/javascript">
    var xmlHttp=null;
    function  readyStateChangeHandle() {
        if(xmlHttp.readyState==4&&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{
            alert("不支持ajax");
        }
        xmlHttp.onreadystatechange=readyStateChangeHandle;
        xmlHttp.open("GET",'data.xml',true);
        xmlHttp.send(null);
    }
</script>
<input type="button" id="test" value="Take me to the world of Ajax" onclick="ajaxRequest()"/>
</body>
</html>

4.获取js文件并执行代码(eval)****

<select id="ssj" onclick="ajaxFunction()"> </select>
<script type="text/javascript">
    var xmlHttp=null;
    //判断服务器状态函数
    function readyStateChangeHandle() {
        if(xmlHttp.readyState ==4){
            if(xmlHttp.status ==200){
                var javascript =xmlHttp.responseText;
             //   var select =document.getElementById('ssj');
                //alert(select);
                eval(javascript);
                var html ="";
                html ="<select id='ssj'><option>"+aList[0]+"</option>";
                html +="<option>"+aList[1]+"</option></select>";
                document.getElementById('ssj').outerHTML=html;
               // select.outerHTML=html;
            }
        }
    }
    //获取XMLHttpRequest对象函数
    function ajaxFunction() {
        //获取对象
        try {
            xmlHttp =new XMLHttpRequest();
        }
        catch (e) {
            alert('您的服务器不支持ajax');
        }
        if(xmlHttp){
            xmlHttp.open("GET",'testjs/data.js',true);
            xmlHttp.onreadystatechange = readyStateChangeHandle;
            xmlHttp.send(null);
        }
        else {
            alert("error");
        }
    }
</script>

eval解析json字符串

  document.write(eval(2*3));
    try{
        alert("Result:"+eval(prompt("Enter an expression","请输入")));//prompt提供可输入的提示对话框
    }
    catch (e){
        alert(e);
    }
    //json
    var json= "{'uid':123,'uname':'ssj'}";//json字符串命名规范
    var txtobj =eval("("+json+")");//解析json字符串
    document.write(txtobj.uid);