【JS】【Ajax原始版本】【使用dom对象获取节点】

Ajax:不应刷新页面,就可以访问服务器的方式.

1.创建ajax对象

var createAjax = function() { 
    return window.XMLHttpRequest ? //判断这个语法是否合法,在ie6浏览器会出现不兼容情况.
    new XMLHttpRequest() : //非ie返回ajax对象
    new ActiveXObject("Microsoft.XMLHTTP");//ie返回的ajax对象
}

var ajax=createAjax();

2.配置ajax的属性

//get方式请求服务器,可以用(url?名=值&名=值)方式发送参数,true表示异步,不用等待服务器响应.
ajax.open("get","url",true);

3.发送ajax

ajax.send();

4.监听ajax的状态
ajax.onreadystatechange:监听器
ajax.readyState==4:代表服务端已经响应
ajax.status == 200:服务端响应的内容是正常内容

ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //业务逻辑
        }
    }

若为post请求
更改两点:1.要设置请求头.2.url后不可再加参数,要在send时候添加参数

ajax.open("POST","url",true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("参数名=值&参数名=参数值");

案例1,获取服务端时间

• html代码

<!--定义一个文本框,效果:鼠标移近value=时间;鼠标移开value=value_time-->
<input value="show_time" id="myTime" type="text" onmouseout="out();" onmouseover="over();">

• js代码

var out = function() {
    var myTime = document.getElementById("myTime");
    myTime.value = "show_time";
}
var over = function() {
    // 创建ajax
    var ajax = createAjax();
    // 给ajax配置action地址,此处加一个时间数,是防止ie的缓存
    ajax.open("get", "/MyAjax/ajax_getTime?" + new Date().getTime(), true);
    // 发送ajax
    ajax.send();
    // 判断ajax状态
    p(ajax.responseText);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
        //修改节点内容为服务器传送过来的数据
        document.getElementById("myTime").value = ajax.responseText;
        }
    }
}

• action代码 用resp.getWriter().print(str)来向ajax回应

public String getTime() throws Exception {
        String myTime = new Date().toLocaleString();
        this.print(myTime);
        return this.NONE;
    }

//向ajax输出
public void print(String str) throws Exception {
//设置编码为json和utf-8
ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
//输出
ServletActionContext.getResponse().getWriter().print(str);
    }

案例2,检测帐号受否存在

• html代码

<!--定义一个文本框,效果:内容更改后就发送请求检测帐号,结果显示于span-->
<input type="text" id="username" onchange="check();">
<span id="checkRet"></span>

• js代码

var check= function() {
    // 创建ajax
    var ajax = createAjax();
    // 给ajax配置action地址,并加入username参数
    ajax.open("get", "/MyAjax/ajax_check?username="+document.getElementById("username").value, true);
    // 发送ajax
    ajax.send();
    // 判断ajax状态
    p(ajax.responseText);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
        //修改span的文本内容
document.getElementById("checkRet").innerHTML=ajax.responseText;
        }
    }
}

• action代码 用resp.getWriter().print(str)来向ajax回应

public String check() throws Exception {
//username是请求传递过来,通过感知接口获取
//usernamelist 应该从数据库中获取
        if(!usernameList.contains(username)) {
            this.print("帐号已经存在");
        }else {
            this.print("帐号可以使用");
        }


        return this.NONE;
    }

//向ajax输出
public void print(String str) throws Exception {
    ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
    ServletActionContext.getResponse().getWriter().print(str);
    }