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);

    }

}

Ajax：异步的JS和XML的更多相关文章

  1. ajax 之js读取xml的多浏览器兼容

    主要是分为两大类:IE.其它浏览器 IE8以下只支持这种 InputVoltage.innerText = xmlDoc.getElementsByTagName(id)[0].text, 其它浏览器 ...

  2. day28(ajax之js原生代码实现)

    ajax ajax:异步页面无刷新技术 AJAX:异步的 JavaScript And XML. * 使用的是老的技术,用的是新的思想. AJAX的功能:完成页面的局部刷新,不中断用户的体验. XML ...

  3. Ajax_简介： 异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template

    AJAX Asynchronous JavaScript And XML 通过 AJAX 可以在 浏览器中向 服务器 发送异步请求 一种 使用现有标准的 新方法,而非新语言 XML  可扩展标记语言 ...

  4. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  5. ajax (异步js+xml)

    AJAX 基础 AJAX = 异步js+xml 通过与后台服务器进行少量数据交换,实现前台网页局部更新 XMLHttpRequest对象 是 AJAX 的基础 var xmlhttp; if (win ...

  6. 11月15日下午 ajax返回数据类型为XML数据的处理

    ajax返回数据类型为XML数据的处理 /*XML:可扩展标记语言 HTML:超文本标记语言 标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对 ...

  7. 三、jQuery--Ajax基础--Ajax全接触--Ajax在JS中的应用

    Ajax的全称:Asynchronous JavaScript And XML(异步的 JavaScript 和 XML). Ajax不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分 ...

  8. jquery ajax 访问webServer的xml文件

    最近项目中要使用到通过ajax访问webServer的xml文件,通过下面的方式可以直接访问webServer的xml文件,不需要在web.xml中进行任何配置.它的返回参数就是服务器上的xml文件. ...

  9. Js读取XML文件为List结构

    习惯了C#的List集合,对于Javascript没有list 极为不舒服,在一个利用Js读取XML文件的Demo中,决定自己构建List对象,将数据存入List. 第一步,Js读取XML文件知识 X ...

随机推荐

  1. MySQL基础合集

     我的小站 1.MySQL的优势 运行速度快 使用成本低 可移植性强 适用用户广 2.MySQL的运行机制 一个SQL语句,如select * from tablename ,从支持接口进来后,进入连 ...

  2. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  3. B08. BootstrapBlazor实战 Menu 导航菜单使用(2)

    接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 3.项目模板 节省时间,直接使用 Bootstrap Blazor App 模板快速搭建项目 传送门: https ...

  4. netty系列之:netty中的核心解码器json

    目录 简介 java中对json的支持 netty对json的解码 总结 简介 程序和程序之间的数据传输方式有很多,可以通过二进制协议来传输,比较流行的像是thrift协议或者google的proto ...

  5. 如何突破Jenkins瓶颈，实现集中管理、灵活高效的CI/CD

    在过去的几年间,随着DevOps的兴起,持续集成(Continuous Integration)与持续交付(Continuous Delivery)的热度也水涨船高.在本文中,我们将首先带您了解热门的 ...

  6. 【译】defer-panic-and-recover

    Go 有通用的控制流程:if,for,switch,goto.它也有go语句用于让代码运行在单独的协程.这里我将讨论一些不常见的问题:defer,panic 和 recover. defer语句将函数 ...

  7. Docker从入门到放弃(1) Docker简介与安装

    ​ 目录 一.Docker简介 1.Docker是什么: 2.为什么有docke的出现: 3.docker与传统容器的区别: 4.docker基本组成 5.docker工作原理: 二.Docker安装 ...

  8. OpenStack平台镜像优化

    在使用打快照方式制作镜像后,镜像的大小会变得非常大,比如一个基础的CentOS镜像大小为400M左右,但是使用打快照方式制作的镜像大小会有1个G左右,具体的大小还要根据安装的东西来实际情况实际分析. ...

  9. hibernate + hsqldb单元测试

    1.测试环境连接hsqldb,使用hibernate的自动建表功能. 1 <bean id="sessionFactory" 2 class="org.spring ...

  10. 好客租房15-jsx中的条件渲染

    jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from &q ...