Ajax详解及用户名重用检测实例

最新推荐文章于 2022-10-07 14:52:42 发布

朱圣吉

最新推荐文章于 2022-10-07 14:52:42 发布

阅读量297

点赞数 1

分类专栏：实例讲解文章标签： Ajax 异步传输

本文链接：https://blog.csdn.net/weixin_38891048/article/details/79203042

版权

实例讲解专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文分两部分，前半部分详细讲解Ajax核心组件，下半部分实操Ajax异步传输验证用户名是否重复实例
四个组件：XMLHttpRequest，JavaScript,css,DOM

—-XMLHttpRequest

XMLHttpRequest是Ajax技术的核心对象，它负责将用户请求以异步的方式提交到服务器并获得服务器端的响应信息及数据。

—-JavaScript

是Ajax技术的重要组成部分，可以用来创建XMLHttpRequest对象并使用该对象的方法及属性。并将获取的信息局部更新到页面中，实现局部刷新，作用类似于胶水

—-css

也叫层叠样式表，可以实现多种特效

—-DOM

DOM即文档对象模型。用于HTML和XML文档的API，可以修改文档的内容及视觉表现。（使用Ajax时，从服务器返回的内容需要更新到页面局部时，就可以使用DOM对象操作浏览器内的内容进行局部更新）

—-XMLHttpRequest对象

1.XMLHttpRequest是ajax的核心对象，使用ajax都是从创建XMLHttpRequest对象开始的

2.XMLHttpRequest是一个浏览器内部对象，可以发送http请求并接收http响应。不同的浏览器对XMLHttpRequest的实现有所不同。在IE中，是通过ActiveXObject对象来实现XMLHttpRequest，其它浏览器使用本地JavaScript对象实现。

例如：
if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp=new XMLHttpRequest();
    }

注：以上代码中就解决了创建XMLHttpRequest对象时不同浏览器的兼容问题.

—-XMLHttpRequest对象封装的属性及方法

–readyState

–status

–StatusText

**onreadyStatechange

**responseText

**responseXML

XMLHttpRequest的属性：

—readyState

可以返回5种请求状态

0：“未初始化状态”，表示已经创建但并未初始化

1：“打开的状态，并已开始调用”，XMLHttpRequest对象的open()方法，表示已经准备好向服务器发送请求

2：“发送状态”，表示XMLHttpRequest对象已经调用send()方法将请求发送至服务器，但是尚未收到响应

3：“接收状态”，表示已经收到http响应头的信息，但信息体尚未完全接收

4：“已加载状态”，表示响应已完全接收

—status

status用来返回服务器的响应状态码。如：404表示请求文件未找到；500表示内部服务器错误；200表示一切正常.

例如：

if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
        。。。。。。
    }
}

—StatusText

表示的属性及含义与Status类似，但是是以文本的形式，而Status是以状态码形式

—onreadystatechange

onreadystatechange是一个事件触发器。其值通常是一个函数名（不加括号的）。任何状态的变化都会触发该事件并顶用指定的函数（一般为JavaScript函数）

例如：

xmlHttp.onreadystatechange=callback;

意思是一旦readyState状态发生改变，就会调用callback函数

—responseText

responseText属性是用来接收服务器端的文本内容，以字符串的形式存在。在使用responseText可以直接将返回的内容辅助给某个域的innerHTML值。显示到客户端

例如：

if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
        document.getElementById("unamemsg").innerHTML=xmlHttp.responseText;
    }
}

以上代码的意思是：当加载状态完成时，且服务器一切正常，就通过id获取节点元素并将该元素对应的值改为xmlHttp从服务器端收到的文本

—responseXML

responseXML用来接收服务器端响应，以XML形式存在。这个对象可以解析为一个DOM对象，进而使用DOM的API更新到客户端页面

例如：

var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var passed=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;

XMLHttpRequest的方法：

–open(DOMString method,DOMString url,boolean async,DOMString username,DOMString password);

注：method指定http请求方法，如post、get等，URL用来指定XMLHttpRequest对象请求的具体的URL，可以是相对URL，也可以是绝对的，async用来指定是否异步，默认值是true。对于需要认证的服务器，可以提供可选的用户名和密码，在调用open（）方法后，XMLHttpRequest的readyState属性值将设定为1，并把responseText、responseXML、status的属性设为初始值；

1.例如：

var url="check?uname="+escape(username.value);
xmlHttp.open("GET",url,true);

注：check是指向了servlet并且将uname传递走了

2.又例如:

var url="check?uname="+escape(username.value);
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlenCoded");

–send()

调用open（）方法后，就已经准备好了一个XMLHttpRequest对象，接下来需要调用send（）方法将请求发送给服务器。当async为true时，send（）方法立即返回，其他脚本语言可以继续使用。无需等待服务器响应。send（）方法有一个可选参数，该参数是用来发送post形式的一些内容。如果不需要，就可以写成send()或send(null)

例如：

xmlHttp.open("GET",url,true);
xmlHttp.send(null);
再例如：
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlenCoded");
xmlHttp.send("uname="+escape(username.value));

XMLHttpRequest对象的其他方法

—setRequestHeader(DOMString header,DOMString value)

设置请求头信息，必须写在open（）之后执行

—getResponseHeader(DOMString header)

根据响应头的名字获取对应的值，若响应头信息未能返回到客户端，则返回null值

—getAllResponseHeader()

返回所有头信息和对应的value值，以键值对的形式表示

—abort()

可以用来暂停一个与XMLHttpRequest对象相联系的HTTP请求，从而使该对象恢复到初始化状态

DOM模型

三个部分：核心，HTML，XML

—核心部分：是比较底层的对象接口。适用于任何格式的结构化文档，HTML和XML部分定义了访问和操作HTML与XML的标准方法

—DOM独立于编程语言，很多语言都实现了DOM的API，在Ajax中，主要使用js来使用DOM模型

—Ajax为客户端技术，在Ajax中既可能使用HTML DOM操作HTML，也可能使用XML DOM操作XML

HTML DOM常用方法及属性

–getElementById（）

可以根据HTML文档中元素的id的值返回相关的元素
例如：
document.getElementById("unamemsg");

—getElementsByTagName（）

可用于HTML文档中的任何元素，通过标签名返回所有元素
例如：
1.getElementsByTagName（"h1"）；
2.document.getElementById("unamemsg").getElementsByTagName("h1");
解释说明：   1：返回页面中所有h1元素
        2：返回id为"unamemsg"的元素下面的所有h1元素

—parentNode,firstChild及lastChild

parentNode：返回某个节点元素的父节点
firstChild：返回某个节点的第一个子节点
lastChild：返回某个节点的最后一个子节点

—nodeName、nodeValue及nodeType

节点名，节点值，节点类型
例如：
var x=document.getElementById("unamemsg");
var text=x.firstChild.nodeValue；

XML DOM常用方法及属性

—getElementsByTagName（）

返回该标签所有元素的集合
例如：
titles=xmlDom.getElementsByTagName（"student"）;
解释：获取所有名为"student"的元素

—appendChild(node)

向节点中插入子节点
例如：
age=xmlDom.createElement("age");
xmlDom.getElementsByTagName（"student").appendChild(age);
解释：创建了一个age节点，并将其作为子节点加入文档中第一个student节点

—e.getAttribute()

可获取节点e的指定名字的属性值
例如
sex=xmlDom.getElementsByTagName（"student")[0].getAttribute("sex");

Ajax 实现用户名重用实例

jsp关键代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest(){

    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp=new XMLHttpRequest();
    }

}

function validate(){

    createXMLHttpRequest();
    var username=document.getElementById("uname");
    var url="check?uname="+escape(username.value);
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);

}

function callback(){

    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
            var passed=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
            setMessage(message,passed);
        }
    }

    }

function setMessage(message,passed){

    var validateMessage =document.getElementById("unamemsg");
    var fontColor="red";
    if(passed=="true"){
        fontColor="green";
    }
    validateMessage.innerHTML="<font color="+fontColor+">"+message+"</font>"

}

</script>

</head>

<body>

<form action="regist" method="post">

用户名：<input type="text" id="uname" name="uname" value="${param.uname }" onblur="validate()" />

<div id="unamemsg"></div>

密码：<input type="password" id="pwd" name="pwd" ><br>

<div id="pwdmsg"></div>

<input type="submit" value="注册">

</form>

</body>

验证用户名关键servlet代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("进入ajax");
    //返回xml到客户端
    boolean flag=true;
    String message="";
    UserDaoImpl u=new UserDaoImpl();
    User user=u.selectByName(request.getParameter("uname"));
    if(user==null){
        message="用户名可以使用";
    }else{
        flag=false;
        message="用户名已存在，请选择其他用户名";
    }
    System.out.println(message);
    response.setContentType("text/xml;charset=utf-8");
    PrintWriter out=response.getWriter();
    response.setHeader("Cache-Control", "no-cache");
    out.println("<?xml version='1.0' encoding='utf-8'?>");
    out.println("<response>");
    out.println("<passed>"+Boolean.toString(flag)+"</passed>");
    out.println("<message>"+message+"</message>");
    out.println("</response>");
    out.close();
    }