ajax应用

2016-02-19 12:58 6 1 收藏

下面图老师小编跟大家分享ajax应用,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

DIV class=box id=top_barWeb Tools--Ajax Version /DIVBR
DIV class="box general"    天气预报: INPUT id=Weather size=17
value=北京   INPUT onclick=getWeather() type=button value="提 交" name=submit   SPAN
id=Disp_Weather/SPAN/DIV
DIV class="box general"  IP地址查询: INPUT id=Ip maxLength=17 size=17
value=127.0.0.1   INPUT onclick=getIp() type=button value="提 交" name=submit   SPAN
id=Disp_IPArea/SPAN/DIV
DIV class="box general"手机归属查询: INPUT id=Mobile maxLength=15 size=17 value=13
  INPUT onclick=getMobile() type=button value="提 交"   SPAN
id=Disp_MobileArea/SPAN/DIV
SCRIPT language=JavaScript type=text/javascript
            chgBtnStyle();
        /SCRIPT
//针对不同的浏览器获取指定的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.readyState4){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 = "u67e5u8be2u8fc7u7a0bu51fau73b0u8fc7u7a0buff0cu8bf7u91cdu8bd5u6216u8054u7cfbu7ba1u7406u5458uff01";
    }
}
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 = "u8fd4u56deu9519u8befuff1au4e0du662fu6b63u786eu7684ip";
    }
}
function handleStateChange() {
    if (req.readyState4){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 = "u67e5u8be2u8fc7u7a0bu51fau73b0u9519u8befuff0cu8bf7u91cdu8bd5u6216u8054u7cfbu7ba1u7406u5458uff01";
    }
}
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 = "u8fd4u56deu9519u8befuff1au4e0du662fu5b8cu6574u768411u4f4du624bu673au53f7u6216u8005u6b63u786eu7684u624bu673au53f7u524du4e03u4f4d";
    }
}
function handleStateChange2() {
    if (req.readyState4){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 = "u67e5u8be2u8fc7u7a0bu51fau73b0u9519u8befuff0cu8bf7u91cdu8bd5u6216u8054u7cfbu7ba1u7406u5458uff01";
    }
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

function chgBtnStyle(){
    var btn=document.getElementsByTagName("input")
    for(var i=0;ibtn.length;i++){
        if(btn[i].type=='button'){
           btn[i].className="btnStyle";
        }
    }
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1602667.html

延伸阅读
标签: Web开发
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax并没有创造出某种具体的新技术,它所使用的所有技术都是在很多年前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得...
标签: Web开发
AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。 常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。 以上操作,对于用户体验方面来说是比较“差劲”的...
标签: Web开发
如果我们用AJAX技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,...
标签: Web开发
今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。 它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换...
标签: Web开发
未来的Web services和面向服务的架构(SOA)可能就在于Ajax。Ajax是一种用于创建丰富的、基于Web应用的编程技术,它看起来和桌面软件差不多,但却基于浏览器,而且消耗资源不多。    Ajax在最近几个月里被大肆宣传,很大程度上是因为由Google开发的那一些高可见性的Ajax应用。    尽管如此,今天的Ajax还...

经验教程

385

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部