[Javascript] 最基础的Ajax

博客首页 » Javascript 最基础的Ajax

发布于 16 Dec 2014 06:42
标签 blog
为了调试Ajax,写了一个最基础的Ajax程序

首先准备一个js文件,作为ajax的应答

{"result":"hello!"}

HTML文件test.html

<!doctype html>
<meta charset="utf-8">
<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
    <label>message:</label><span id="message"></span>
</body>
<script src="test.js"></script>
</html>

js文件test.js

var url = "test.ajax.js"; 
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() //非IE浏览器及IE7以上
    : window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHttp") //IE6及以下
    : null;
 
if(xhr) {
    xhr.open("GET", url, true); //连接(方式post或get,地址, 异步)
    xhr.onreadystatechange = callback;
    xhr.send(null); //发送请求
}
 
function callback() { 
    //回调函数,响应状态
    if(xhr.readyState == 4) {//请求状态为4表示成功
        if(xhr.status == 200) {//http状态200表示OK
            document.getElementById ("message").innerHTML = 
                "状态码 " + xhr.statusText 
                + "\n<br/>文本 " + xhr.responseText
                + "\n<br/>内容 " + JSON.parse(xhr.responseText).result;
        } else { //http返回状态失败
            document.getElementById ("message").innerHTML = "服务端返回失败状态" + xhr.statusText;
        }
    }
    else { //请求状态还没有成功,页面等待
        document.getElementById ("message").innerHTML ="数据加载中" + xhr.readyState;
    }
}
 
/* 作为对照,也写了一个jquery的版本,还是jQuery简洁吧
$(document).ready(function () {
    $.get("gwtest.ajax.php", function(resp, status, xhr) {
    }).success(function(resp, status, xhr) {
        console.log("succeed");
        console.log(resp.result);
        $("#message").text(resp.result);
    }).error(function(resp, status, xhr) {
        window.alert("failed");
    });
});
*/

本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Javascript 最基础的Ajax

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License