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. 00. 初次使用（系统安装+ssh连接）

    效率教程,配置不需要插显示器,一步到位 一.装系统 1. sd卡用读卡器插上电脑,打开软件SD Formatter 4.0,按默认配置,直接格式化. 软件下载链接:https://pan.baidu. ...

  2. SpringMVC 配置 & 初识 & 注解 &重定向与转发

    初识 在web.xml 中注册DispatcherServlet <servlet> <servlet-name>springmvc</servlet-name> ...

  3. 【导包】使用Sklearn构建Logistic回归分类器

    官方英文文档地址:http://scikit-learn.org/dev/modules/generated/sklearn.linear_model.LogisticRegression.html# ...

  4. jfinal极速开发

    下载jfinal项目,上面都配置好了不用自己新建从头配置.https://jfinal.com/ idea打开项目 配置数据库 resources目录下demo-config-dev.txt # co ...

  5. ZooKeeper 基本原理你懂了么？

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 作者:阿凡卢来源:cnblogs.com/luxiaox ...

  6. 「Python实用秘技08」一行代码解析地址信息

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第8期 ...

  7. vue大型电商项目尚品汇（前台篇）day01

    学完vue2还是决定先做一个比较经典,也比较大的项目来练练手好一点,vue3的知识不用那么着急,先把vue2用熟练了,vue3随时都能学. 这个项目确实很经典包含了登录注册.购物车电商网站该有的都有, ...

  8. mybatis xml 中 trim 多余的符号

    <if test="(mac != null and mac != '') or (roomNo != null and roomNo != '') or (bedNo != null ...

  9. 118_Power Pivo周维度度同比、环比相关

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 在群里看到有人在交流周维度同环比,同时又好多天都没有更新文章了,最近没有什么好的素材,就硬生生的写一个吧. 先来 ...

  10. HDFS 细粒度锁优化，FusionInsight MRS有妙招

    摘要:华为云FusionInsight MRS通过FGL对HDFS NameNode锁机制进行优化,有效提升了NameNode的读写吞吐量,从而能够支持更多数据,更多业务请求访问,从而更好的支撑政企客 ...