AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

yp307567950

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量63

点赞数

分类专栏： web层文章标签： Ajax JavaScript XML 应用服务器 CSS ViewUI

web层专栏收录该内容

5 篇文章 0 订阅

订阅专栏

--------------------------------------------------------------------------------------------------------------------------------------

1.AJAX(Asynchronous JavaScript And XML)

AJAX：Asynchronized JavaScript + XML的缩写

主要由JavaScript和xml两种技术以一种新的方式组合成的一门客户端技术。

a)HTML,CSS实现标准的显示

b)DOM实现动态的交互

c)XML,XSTL实现数据的获取

d)XMLHttpRequest发送异步请求，获取异步数据

e)JavaScript 将各种技术粘合起来

-------------------------------------------------------------------------------------------------------------------------------------

2.同步请求应答通信模型详解

传统的web应用采用click-->wait-->refresh方式与用户交互。采用同步请求、响应的交互模式页面驱动，以页面为中心，即使请求前后的两个页面非常类似，服务器也要重新发送。

browse--->request--->server--->response

会打断用户的操作，因客户端每次操作后都会等待服务器的响应。刷新页面会丢失用户信息，光标位置不能对用户的请求做出立即的响应。由于HTML的限制，很多特殊效果很难实现。

-------------------------------------------------------------------------------------------------------------------------------------

3.使用目的

解决了同步应答通信模型(request/response)的一些缺点

a)页面先前的内容丢失

b)用户的下一步操作被中断

c)页面信息局部更新时，更新了整个页面。

-----------------------------------------------------------------------------------------------------------------------------------

4.开发AJAX的步骤

a)产生一些事件(onclick,onblus,onchange)，由这些事件去调用对用js文件中的JavaScript函数。

b)创建一个XMLHttpRequest对象实例。

c)配置XMLHttpRequest实例对象的一些属性。

d)通过XMLHttpRequest实例对象去调用open()方法，注册回调函数，然后调用send()方法发出一个异步请求。

e) XMLHttpRequest对象接受到返回的全部response信息(server端处理client请求，并返回响应信息)

f)若返回信息正确，则通过responseText或者responseXML来获得返回信息(HTML或XML文档)

g)利用返回的信息对页面进行局部的更新(DOM操作更新浏览器内容)

-----------------------------------------------------------------------------------------------------------------------------------

5.AJAX实例

<%@page language="java" pageEncoding="utf-8" %>
<html>
<head>

</head>
<body>
    <table>
        <tr> <td>用户名:</td><td><input οnblur="javascript:initNameDiv()" id="name_id" name="username"/><div id="namediv"></div></td></tr>
        <tr> <td>密码:</td><td><input id="pass_id" name="password" type="password"/></td></tr>
        <tr> <td><input name="submit" type="submit" value="submit" οnclick="javascript:validate()"></td><td><input name="button" value="reset" type="reset"/></td></tr>
    </table>
    <script type="text/javascript">
    var name_id=document.getElementById("name_id");
    var username;
    function initNameDiv(){
        username=name_id.value;
        if(username=="")
        {
            alert("用户名不能为空！");
            return false;
        }
        sendRequest();
    }

    function validate(){
        var pass_id=document.getElementById("pass_id");
        if(pass_id==null)
        {
            alert("密码不能为空！");
            return false;
        }
    }
    var xmlHttp;
    function sendRequest()
    {
        try{
            xmlHttp = new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }catch(e){
            try{
                xmlHttp = new XMLHttpRequest();
            }catch(e){
                xmlHttp = null;
            }
        }
        xmlHttp.onreadystatechange=process;
        xmlHttp.open("get","addUser?username="+escape(username),true);
        xmlHttp.send(null);
    }
    function process()
    {
        if(xmlHttp.readystate==4)
        {
            if(xmlHttp.status==200)
            {
                if(xmlHttp.responseText=="success")
                {
                    document.getElementById("namediv").innerHTML="注册成功！";
                }
                else{
                    document.getElementById("namediv").innerHTML="用户名已存在！";
                }
                alert("response:"+xmlHttp.responseText);
            }
            alert("stutas="+xmlHttp.status);
        }
    }

</script>
</body>
</html>

yp307567950

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX

--------------------------------------------------------------------------------------------------------------------------------------1.AJAX(Asynchronous JavaScript And XML)AJAX：Asynchronized Java...
复制链接

扫一扫

专栏目录