Ajax：异步的JS和XML

1、Ajax
1) AJAX 是 Asynchronous JavaScript And XML 的简称。直译为，异步的JS和XML。
2) AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
3) AJAX也可以简单的理解为通过JS向服务器发送请求。

2、同步和异步

1) 同步处理
AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。
2) 异步处理
而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

3、异步请求对象
XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。
XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。
这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

4、Xhr对象的方法
① open(method,url,async)
　　open()用于设置请求的基本信息，接收三个参数。
　　　　1）method
 　　　　　　请求的方法：get或post
 　　　　　　接收一个字符串
　　　　2） url
 　　　　　　请求的地址，接收一个字符串
　　　　3）Assync
　　　　　　发送的请求是否为异步请求，接收一个布尔值。
 　　　　　　true 是异步请求
 　　　　　　false 不是异步请求（同步请求）
② send(string)
　　send()用于将请求发送给服务器，可以接收一个参数
　　　　1）string参数
　　　　　　该参数只在发送post请求时需要。
 　　　　　　string参数用于设置请求体
③ setRequestHeader(header,value)
　　用于设置请求头
　　　　1） header参数
 　　　　　　字符串类型，要设置的请求头的名字
　　　　2） value参数
 　　　　　　字符串类型，要设置的请求头的值
5、 XMLHttpRequest对象的属性
1) readyState
　　① 描述XMLHttpRequest的状态
　　② 一共有五种状态分别对应了五个数字：
 　　0 ：请求尚未初始化，open()尚未被调用
　　 1 ：服务器连接已建立，send()尚未被调用
　　 2 ：请求已接收，服务器尚未响应
　　 3 ：请求已处理，正在接收服务器发送的响应
　　 4 ：请求已处理完毕，且响应已就绪。
2) status
　　① 请求的响应码
 　　　　200 响应成功
 　　　　404 页面为找到
 　　　　500 服务器内部错误
　　　　　　… … … …
3) onreadystatechange
　　① 该属性需要指向一个函数
　　② 该函数会在readyState属性发生改变时被调用
4) responseText
　　① 获得字符串形式的响应数据。
5) responseXML（用的比较少）
　　① 获得 XML 形式的响应数据。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        span{
            color:red ;
        }
    
    </style>
<script type="text/javascript">
        // 获取 xhr 对象
        function getXhr(){
            var xhr = new XMLHttpRequest();
            //alert(xhr);
            return xhr; 
        }
        
        function checkUsername(){
            //获取用户输入的用户名。
            var username = document.getElementById("username").value;
            //发送异步请求进行校验
            var xhr = getXhr();
            
            //设置请求信息
            xhr.open("get","checkUsername?username="+username,true);   //url，对于get，？后面为请求参数
            //发送请求
            xhr.send();   //对于get可以什么都不写
            //监听readyState的状态
            xhr.onreadystatechange=function(){  //匿名函数
                if(xhr.readyState == 4 ){  // 响应处理完成
                    if(xhr.status == 200){ //处理正确
                        //获取服务端响应回来的数据. 
                        var msg = xhr.responseText ;
                        //将信息显示到用户名输入框后面
                        document.getElementById("regist_span").innerHTML=msg ;
                    }
                }
            }
        }
</script>
</head>
<body>    
    <h1>欢迎注册</h1>
    <form action="regist"  method="post">
        <%-- 用户名称:<input type="text" id="username" name="username" onblur="checkUsername();"/><span id="regist_span">${regist_msg }</span> --%>
        
        用户名称:<input type="text" id="username" name="username" /><span id="regist_span">${regist_msg }</span>  <!--EL表达式-->
        <br/>
        
        用户密码:<input type="password" id="password" name="password"/>
        <br/>
        确认密码:<input type="password" id="repassword" name="repassword"/><span id="pass_span"></span>
        <br/>
        <input type="submit" value="注册"/>  
        
    </form>
    
    <input type="button" value="测试xhr对象" onclick="getXhr();"/>
</body>
</html>

1、innerHTML:几乎所有的标签都有innerHTML属性，它是一个字符串，用来设置和获取开始标签和结束标签之间的内容（包括标签和文本）。
2、value:设置获取表单标签的value属性值。

package com.atguigu.login.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.atguigu.login.beans.User;
import com.atguigu.login.dao.UserDao;
import com.atguigu.login.dao.UserDaoImpl;

/**
 * Servlet implementation class CheckUsernameServlet
 */
public class CheckUsernameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取到用户名
        String username = request.getParameter("username");
        
        UserDao userDao = new UserDaoImpl();
        
        User user = userDao.getUserByUsername(username);
        
        String msg = "";
        if(user == null ) {
            //可用
            msg = "用户名可用";
        }else {
            //不可用
            msg = "用户名不可用";
        }
    
        response.setContentType("text/html;charset=utf-8");
        
        response.getWriter().println(msg);
        
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

posted @ 2020-05-09 10:29 kkzhang 阅读(305) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream

Ajax：异步的JS和XML

公告