html5 脚本之家,ajax应用_AJAX相关_脚本之家

这段代码展示了如何使用Ajax技术实现动态查询天气预报、IP地址和手机归属地的功能。通过创建XMLHttpRequest对象,发送GET请求到相应的服务器端脚本,并在接收到响应后更新页面显示。函数包括检查输入有效性、处理状态变化以及更改按钮样式等操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Web Tools--Ajax Version
    天气预报:

value=北京>    

id=Disp_Weather>

  IP地址查询:

value=127.0.0.1>    

id=Disp_IPArea>

手机归属查询:

 

id=Disp_MobileArea>

chgBtnStyle();

//针对不同的浏览器获取指定的id对象

function getObj(objID) {

return document.all ? document.all[objID] : document.getElementById(objID);

}

var req;

//使用xmlrequest对象

function createXHR() {

try {

req = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e) {

try {

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

}

catch (E) {

req = false;

}

}

if (!req && typeof XMLHttpRequest != "undefined") {

req = new XMLHttpRequest();

}

}

function getWeather() {

createXHR();

req.open("GET", "weather.asp?City=" + getObj("Weather").value, true);

req.send();

req.onreadystatechange = handleStateChange1;

}

function handleStateChange1() {

if (req.readyState<4){getObj("Disp_Weather").innerText = "正在查询["+getObj("Weather").value+"]天气状况..."}

else if (req.readyState == 4 && req.status == 200) {

getObj("Disp_Weather").innerText = req.responseText;

} else {

getObj("Disp_Weather").innerText = "/u67e5/u8be2/u8fc7/u7a0b/u51fa/u73b0/u8fc7/u7a0b/uff0c/u8bf7/u91cd/u8bd5/u6216/u8054/u7cfb/u7ba1/u7406/u5458/uff01";

}

}

function checkip() {

var ipArray, ip, j;

ip = getObj("Ip").value;

if (/[^/d/.]/.test(ip)) {

return false;

}

ipArray = ip.split(".");

if (ipArray.length != 4) {

return false;

}

for (var i = 0; i < 4; i++) {

if (ipArray[i].length == 0 || ipArray[i] > 255) {

return false;

}

}

return true;

}

function getIp() {

if (checkip()) {

createXHR();

req.open("GET", "IpSearch.asp?IP=" + getObj("Ip").value, true);

req.send();

req.onreadystatechange = handleStateChange;

} else {

getObj("Disp_IPArea").innerText = "/u8fd4/u56de/u9519/u8bef/uff1a/u4e0d/u662f/u6b63/u786e/u7684ip";

}

}

function handleStateChange() {

if (req.readyState<4){getObj("Disp_IPArea").innerText = "正在查询ip["+getObj("Ip").value+"]..."}

else if (req.readyState == 4 && req.status == 200) {

getObj("Disp_IPArea").innerText = req.responseText;

} else {

getObj("Disp_IPArea").innerText = "/u67e5/u8be2/u8fc7/u7a0b/u51fa/u73b0/u9519/u8bef/uff0c/u8bf7/u91cd/u8bd5/u6216/u8054/u7cfb/u7ba1/u7406/u5458/uff01";

}

}

function checkMobile() {

var sMobile = getObj("Mobile").value;

if (!(/^13[0-9]/d{4,8}$/.test(sMobile))) {

return false;

}

return true;

}

function getMobile() {

if (checkMobile()) {

createXHR();

req.open("GET", "MobileSearch.asp?Mobile=" + getObj("Mobile").value, true);

req.send();

req.onreadystatechange = handleStateChange2;

} else {

getObj("Disp_MobileArea").innerText = "/u8fd4/u56de/u9519/u8bef/uff1a/u4e0d/u662f/u5b8c/u6574/u768411/u4f4d/u624b/u673a/u53f7/u6216/u8005/u6b63/u786e/u7684/u624b/u673a/u53f7/u524d/u4e03/u4f4d";

}

}

function handleStateChange2() {

if (req.readyState<4){getObj("Disp_MobileArea").innerText = "正在查询手机号码["+getObj("Mobile").value+"]..."}

else if (req.readyState == 4 && req.status == 200) {

getObj("Disp_MobileArea").innerText = req.responseText;

} else {

getObj("Disp_MobileArea").innerText = "/u67e5/u8be2/u8fc7/u7a0b/u51fa/u73b0/u9519/u8bef/uff0c/u8bf7/u91cd/u8bd5/u6216/u8054/u7cfb/u7ba1/u7406/u5458/uff01";

}

}

function chgBtnStyle(){

var btn=document.getElementsByTagName("input")

for(var i=0;i

if(btn[i].type=='button'){

btn[i].className="btnStyle";

}

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值