JavaScript DOM 编程艺术 - 7.4 Ajax案例Chrom调试跨域请求错误解决办法

最新推荐文章于 2023-06-27 08:58:47 发布

Sugarian

最新推荐文章于 2023-06-27 08:58:47 发布

阅读量263

点赞数

分类专栏： JavaScript 文章标签： Chrome调试跨域请求

本文链接：https://blog.csdn.net/fatfish_/article/details/83959477

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript DOM 编程艺术7.4节提到了Ajax技术。Ajax可以做到只更新页面的一小部分，从而加快了页面内容的更新，提高用户体验。
文章展示了一个小例子，通过XMLHttpRequest请求数据，将内容动态加载到页面。案例代码包括页面代码ajax.html，创建XMLHttpRequest的getHTTPObject.js，请求、处理新内容的getNewContent.js以及模拟服务器返回数据的example.txt.

<!--ajax.html-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Ajax</title>
    </head>
    <body>
        <div id="new"></div>
        <script src="addLoadEvent.js"></script>
        <script src="getHTTPObject.js"></script>
        <script src="getNewContent.js"></script>
    </body>
</html>

// getHTTPObject.js
function getHTTPObject(){
    if(typeof XMLHttpRequest == "undefined"){
        XMLHttpRequest = function(){
            try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){}
            return false;
        }
    }
    return new XMLHttpRequest();
}

// getNewContent.js
function getNewContent(){
    var request = getHTTPObject();
    if(request){
        request.open("GET", "example.txt", true);
        request.onreadystatechange = function(){
            if(request.readyState == 4){
                var para = document.createElement("p");
                var txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.send(null);
    }
    else
        alert("Sorry, your browser dosen\'t support XMLHttpRequest");
}
addLoadEvent(getNewContent);

// example.txt
This was loaded asynchronously.

在chrom执行的时候，由于通过本地file://协议访问example.txt文件，会遇 " cross origin requests are only support for HTTP " （跨域请求只支持HTTP协议）问题。安装了python的电脑可以启用python的服务器。打开命令行，在工程目录下执行如下命令：

python -m SimpleHTTPServer

然后可以通过

http://localhost:8000/workspace/JS/scripts/ajax.html

查看执行效果。

Sugarian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 编程艺术 - 7.4 Ajax案例Chrom调试跨域请求错误解决办法

JavaScript DOM 编程艺术7.4节提到了Ajax技术。Ajax可以做到只更新页面的一小部分，从而加快了页面内容的更新，提高用户体验。文章展示了一个小例子，通过XMLHttpRequest请求数据，将内容动态加载到页面。案例代码包括页面代码ajax.html，创建XMLHttpRequest的getHTTPObject.js，请求、处理新内容的getNewContent.js以及模拟服...
复制链接

扫一扫

专栏目录