ajax应用

<DIV class=box id=top_bar>Web Tools--Ajax Version </DIV><BR>
<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.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<btn.length;i++){
        if(btn[i].type=='button'){
           btn[i].className="btnStyle";
        }
    }
}

(0)

相关推荐

  • 原生JavaScrpit中异步请求Ajax实现方法

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要ajax功能而引入Jquery比较不划算. 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题. JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpReq

  • thinkPHP5 ajax提交表单操作实例分析

    本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <

  • FormData+Ajax实现上传进度监控

    什么是FormData? FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同: 如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: //实例化一个formData对象 var

  • ajax跳转到新的jsp页面的方法

    ajax可以实现局部刷新页面,即在不刷新整个页面的情况下更新页面的局部信息. 项目中遇到一个问题:在用户列表也,当点击某个按钮时需要去查询用户的信息,查询成功跳转到用户详情界面:查询失败,则在原页面弹出提示信息. 想到两个解决办法: 方法一: 点击按钮,调用普通方法去查询用户信息,查询成功跳转到用户详情页面:查询失败,重定向调用查询用户列表的方法,在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息,相当于重新加载了用户列表页面. 方法二: 根据需求,不可以重新加载用户列表页面.用aj

  • ajax实现输入提示效果

    本文实例为大家分享了ajax实现输入提示效果的具体代码,供大家参考,具体内容如下 网站主页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px auto; padding:0px; } .l{ height:50px; wid

  • 简单实现ajax三级联动效果

    本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下 主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></sc

  • 四步轻松实现ajax发送异步请求

    ajax发送异步请求,供大家参考,具体内容如下 第一步(得到XMLHttpRequest) ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!! 1.得到XMLHttpRequest 大多数浏览器都支持:var xmlHttp=new XMLHttpRequest(); IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); IE5.0以更早版本的IE:var xmlHttp=new A

  • Ajax邮箱、用户名唯一性验证实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> $(function () { $("#txtEmail").blur(function () { $.ajax({ type: "post", url: "reg.ashx?email=" + $.trim($("#txtEmail").val()) + "&

  • 解决Ajax加载JSon数据中文乱码问题

    一.问题描述 使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/sysMenu/listSysMenu', autoParam: ["id=parentId"] } SpringMvc中文字符处理: Java代码 <mvc:annotation-driven> <mvc

  • 全面解析Ajax和jsonp使用总结

    前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax •定义:一种发送http请求与后台进行异步通讯的技术. •原理:实例化xmlhttp对象,使用此对象与后台通信. ajax的同源策略: •ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑. ---------------------------------------------------------------------

随机推荐