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. [AcWIng 799] 最长连续不重复子序列

    点击查看代码 #include<iostream> using namespace std; const int N = 1e5 + 10; int a[N], s[N]; int mai ...

  2. SpringBoot 读取配置文件数据

  3. Invocation failed Unexpected end of file from server java.lang.RuntimeException: Invocation failed Unexpected end of file from server

    Android studio 提交 push的时候报错. Invocation failed Unexpected end of file from serverjava.lang.RuntimeEx ...

  4. .NET 中 GC 的模式与风格

    垃圾回收(GC)是托管语言必备的技术之一.GC 的性能是影响托管语言性能的关键.我们的 .NET 既能写桌面程序 (WINFROM , WPF) 又能写 web 程序 (ASP.NET CORE),甚 ...

  5. go 语言开发1 环境配置和语言基础

    Go 语言环境配置 windows 环境变量: 设置 GOROOT (安装路径),GOPATH(工程目录) Path 中加入 %GOROOT%/bin 和 %GOPATH%/bin mac 环境变量: ...

  6. 10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形

    一.数据统计 在视频直播中,还有一项比较重要,那就是数据监控 比如开发人员需要知道收了多少包.发了多少包.丢了多少包,以及每路流的流量是多少,才能评估出目前用户使用的音视频产品的服务质量是好还是坏 如 ...

  7. mysqldump速查手册

    一.mysqldump用法 1.1 常见选项 --all-databases, -A: 备份所有数据库 --databases, -B: 用于备份多个数据库,如果没有该选项,mysqldump把第一个 ...

  8. Springmvc基础及应用

    SpringMVC简介和环境搭建 SpringMVC简介 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一.在Spring3.0 后全面超越 S ...

  9. SPPNet(特征金字塔池化)学习笔记

    SPPNet paper:Spatial pyramid pooling in deep convolutional networks for visual recognition code 首先介绍 ...

  10. 【Java面试】如何理解Spring Boot中的Starter？

    一个工作了3年的Java程序员,遇到一个Spring Boot的问题. 他对这个问题有一些了解,但是回答得不是很好,希望参考我的高手回答. 这个问题是:"如何理解Spring Boot中的S ...