043 学习记录

来源：互联网发布：百度怎么推广淘宝店铺编辑：程序博客网时间：2024/06/05 09:30

AJAX简介
无需重新加载整个网页，只更新部分网页的技术。
AJAX = 异步 javascript and xml
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。
优点：
1.页面无刷新，在页面内与服务器通信
2.使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力
3.减轻服务器和带宽的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担
4.基于标准化的并被广泛支持的技术，不需要下载插件或小程序。

实例
使用ajax-servlet实现用户名密码的异步验证
index.jsp :

<script type="text/javascript">    var xmlHttpResult;//存储对象function checkUser(){    //在这个方法里实现验证的功能        //首先获取一个xmlHttpRequest对象        xmlHttpRequest=getXmlHttpRequest();        //获取用户名和密码        var name=document.getElementById("name").value;        var password=document.getElementById("password").value;    //给对象打开一个连接 设置请求方式，请求连接，是否异步    xmlHttpRequest.open("GET","CheckServlet?username="+name+"&password="+password,true);    //给xmlHttpRequest设置一个回调方法    xmlHttpRequest.onreadystatechange=callBack;    xmlHttpRequest.send(null);    }    //创建一个xmlHttpRequest对象    function getXmlHttpRequest(){    if(window.getXmlHttpRequest()){        getXmlHttpRequest=new XMLHttpRequest();//第一种        }    if(window.ActivXObject){        xmlHttpRequest=new ActivXObject("Microsoft.XMLHTTP");        if(!xmlHttpRequest){            xmlHttpRequest=new ActivXObject("Msxml2.XMLHTTP");        }    }    return xmlHttpRequest;    }

    //回调方法    function callBack() {        //判断响应码   数据码 4  200        if(xmlHttpRequest.readyState==4){            //4   响应完成            if(xmlHttpRequest.status==200){                //说明这个响应得到了正常的响应                var result=xmlHttpRequest.responseText;//接收到的响应                document.getElementById("resultid").innerHTML=result;//将结果存放            }        }    }</script>

<body>    <h1>用户名密码验证</h1>    <hr/>    请输入用户名：<input id="name" name="username" type="text" onkeydown="checkUser()"/><br/>    请输入密码:<input id="password" type="password" name="password"/><br>    <input type="button" id="submitId" value="check" onclick="checkUser()"/>    <div id="resultid"></div>    <img alt="ss" width=200px height=200px src="/wk.jpg"/></body>

CheckServlet

阅读全文

0 0