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. 数据结构_C语言_单链表

    # include <stdio.h> # include <stdbool.h> # include <malloc.h> typedef int DataTyp ...

  2. 《计算机组成原理/CSAPP》网课总结（一）

    现在是2022年4月17日晚10点,本月计划的网课<csapp讲解>视频课看到了第八章"异常"第三讲,视频讲的很好但更新很慢,暂时没有最新的讲解,所以先做一个简单总结. ...

  3. 最新 x86_64 系统调用入口分析 (基于 5.7.0)

    最新 x86_64 系统调用入口分析 (基于5.7.0) 整体概览 最近的工作涉及系统调用入口,但网上的一些分析都比较老了,这里把自己的分析过程记录一下,仅供参考. x86_64位系统调用使用 SYS ...

  4. 北航内核操作系统-lab0

    1.lab0环境介绍. 2.进入实验界面. 3.进入实战测试. 任务要求: 3.1编写斐波那契数列. 3.2编写Makefile脚本. Makefile介绍: make命令执行时,需要一个 Makef ...

  5. 如何在 pyqt 中解决启用 DPI 缩放后 QIcon 模糊的问题

    问题描述 如今显示器的分辨率越来越高,如果不启用 DPI 缩放,软件的字体和图标在高分屏下就会显得非常小,看得很累人.从 5.6 版本开始,Qt 便能支持 DPI 缩放功能,Qt6 开始这个功能是默认 ...

  6. How to fetch data with React Hooks

    Where can I make API call with hooks in react? Async useEffect is pretty much unreadable How to fetc ...

  7. 11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件

    一.RTCDataChannel WebRTC 不但可以让你进行音视频通话,而且还可以用它传输普通的二进制数据,比如说可以利用它实现文本聊天.文件的传输等 WebRTC 的数据通道(RTCDataCh ...

  8. unity---射线

    射线 Ray ray= Camera.main.ScreenPointToRay(Input.mousePosition);//获得鼠标射向的射线 RaycastHit hit;//射线碰撞物体 if ...

  9. 每天一个 HTTP 状态码 206

    206 Partial Content 206 Partial Content 是当客户端请求时使用了 Range 头部,服务器端回复的响应,表示只响应一部分内容. 实例 请求: GET /favor ...

  10. 使用Nginx中遇到的一个小问题思考

    我们知道在现在的网站开发中,随着请求量的快速增长,我们经常会用到负载均衡 以便使用多个网站共同支撑网络的请求,为了能让请求按照一定的规律分配给各个支撑服务器,我们会使用一些负载均衡来对请求进行分发 最 ...