不用xmlhttprequest，实现ajax请求

最新推荐文章于 2023-02-15 23:12:19 发布

yaogao000

最新推荐文章于 2023-02-15 23:12:19 发布

阅读量615

点赞数

想不到不用XMLHTTP也可以实现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>www.svnhost.cn</title>

<!--

=========================================================================

by:http://www.svnhost.cn

=========================================================================

-->

<style type="text/css">

body,td,th {

    font-size: 12px;

}

form{margin:0px;padding:0px;padding-left:15px;}

h3{margin:0px;padding:10px 0;}

</style>

<script type="text/javascript" language="javascript" id="query"></script>

<script type="text/javascript">

function querycallback(o){

    if(o.QueryResult!="True"){

        document.getElementById("result").innerHTML="<font color='red'>提示：</font>查询失败，有可能是你没有输入正确的号码";

        document.shouji.mobile.focus();

    }else{

        document.getElementById("result").innerHTML = "手机号码："+o.Mobile+"</br>"+

        "所在省份："+o.Province+"</br>"+

        "手机城市："+o.City+"</br>"+

        "区        号："+o.AreaCode+"</br>"+

        "邮政编码："+o.PostCode+"</br>"+

        "提  供  商："+o.Corp+"</br>"+

        "卡  类  型："+o.Card+"</br>";

    }

}

//检测状态

function Status(obj){

    if (obj["Status"] != "True")

    if(confirm("当前服务状态不可用，是否刷新页面重试？")){

        window.location.reload();

    }else{

        window.location.href="http://www.f123.com/";

    }

}

//查询

function query(){

    var inp = document.shouji.mobile;

    //if(/^13\d{9}$/.test(inp.value))

    if(inp.value!=""){

        document.getElementById("result").innerHTML="<div style=\"color:#CCCCCC;\"><img src=\"img/loading_16x16.gif\" width=\"16\" height=\"16\" align=\"absmiddle\" /> 正在查询……</div>"

        document.getElementById("query").src="http://api.showji.com/locating/?m="+inp.value+"&output=json&callback=querycallback";

    }else{

        document.getElementById("result").innerHTML="<font color='red'>提示：</font>请输入你要查询的手机号码";

        inp.select();

    }

    return false

}



window.οnlοad=function(){

    document.shouji.mobile.focus();

}



</script>

</head>



<body>

<fieldset>

        <legend><h3>手机号码归属地查询</h3></legend>

        <div><form name="shouji" method="post" οnsubmit="return query();">

<input name="mobile" type="text" id="mobile"  /> 

<input type="submit" name="submit" value="查询" />

</form></div>

        <div id="result" style="line-height:150%;padding:15px 0 5px 20px;"> </div>

</fieldset>





<!--

如果想开始判断查询服务器状态，请去掉注释

<script type="text/javascript" src="http://api.showji.com/locating/Status.aspx?output=json&callback=Status"></script>

-->

</body>

</html>

 
 
演示 ：http://daohang.f123.com/tool/shouji.htm

参考：