Ajax介绍

Asynchronous JavaScript And XML(异步的JavaScript和XML)；

Ajax可以在不刷新页面的前提下，进行页面局部更新；

Ajax不是新的技术，Ajax并不是W3C的标准；

Ajax的使用流程

  • 创建XmlHttpRequest对象
  • 发送Ajax请求
  • 处理服务器响应

处理服务器响应

  • xmlhttp.onreadystatechange()事件用于监听AJAX的执行过程
  • xmlhttp.readyState属性说明XMLHttpRequest当前状态
  • xmlhttp.status属性服务器响应状态码，200：成功、404：未找到...
readyState值 说明
readyState = 0 请求未初始化
readyState = 1 服务器连接已建立
readyState = 2 请求已被接收
readyState = 3 请求正在处理
readyState = 4 响应文本已被接收

实例代码

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

	<input id="btnLoad" type="button" value="加载">

	<div id="divContent"></div>

	<script>

		document.getElementById("btnLoad").onclick = function(){

			//1.创建XmlHttpRequest对象

			var xmlhttp;

			if(window.XMLHttpRequest){

				xmlhttp = new XMLHttpRequest(); //新版本浏览器

			}else{

				xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); //老版本浏览器

			}

			//2.发送Ajax请求

			xmlhttp.open("GET", "/ajax/content", true);//创建请求，true为异步执行

			xmlhttp.send(); //发送请求

			console.log(xmlhttp);

			//3.处理服务器响应

			xmlhttp.onreadystatechange = function(){

				//响应已被接收并且服务器处理成功

				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

					var responseText = xmlhttp.responseText;

					document.getElementById("divContent").innerHTML = responseText;

				}

			}

		}

	</script>

</body>

</html>

ContentServlet.java

package demo;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class ContentServlet

 */

@WebServlet("/content")

public class ContentServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public ContentServlet() {

        super();

        // TODO Auto-generated constructor stub

    }

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

	 */

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

		response.getWriter().println("<b>I'm server content</b>");

	}

}

网页显示

【JavaWeb】Ajax基础的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  4. JavaWeb:JavaBean基础

    JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) 2.与JSP配合,可以简化JSP代码. ...

  5. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  6. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  7. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  8. jQuery基础---Ajax基础教程（二）

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

  9. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  10. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

随机推荐

  1. Spring Boot 2.2.2.RELEASE 版本中文参考文档【3.2 - 3.10】

    Spring Boot 2.2.2.RELEASE版本中文文档持续更新中~如有需要获取参考文档文件,关注公众号JavaSo,回复“参考文档”即可. 3.2 结构化代码 Spring Boot不需要任何 ...

  2. Format a Property Value 设置属性值的格式

    In this lesson, you will learn how to set a display format and an edit mask to a business class prop ...

  3. 需要知道的jQuery对象和DOM对象之间的转换

    jQuery对象和DOM对象之间的转换 jQuery对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换. 两者都无法 ...

  4. 测试环境部署之填坑记录-Expected one result (or null) to be returned by selectOne(), but found: 2

    最近在部署性能测试环境的时候,环境 部署好以后,部分功能出现接口查询异常,问题现象: 拿到错误,肯定要先判断是前端还是后端代码的问题,最简单的方式是抓包查看: 以上是报错页面捕获的接口报错,很明显的接 ...

  5. nginx——keepalived

    nginx--keepalived 1.keepalived高可用基本概述 什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...

  6. 一个驱动导致的内存泄漏问题的分析过程(meminfo->pmap->slabtop->alloc_calls)

    关键词:sqllite.meminfo.slabinfo.alloc_calls.nand.SUnreclaim等等. 下面记录一个由于驱动导致的内存泄漏问题分析过程. 首先介绍问题背景,在一款嵌入式 ...

  7. acwing 23. 矩阵中的路径

    习题地址 https://www.acwing.com/problem/content/description/21/ 题目描述请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路 ...

  8. RMAN详细教程(四)：备份脚本实战操作

    RMAN详细教程(一):基本命令代码 RMAN详细教程(二):备份.检查.维护.恢复 RMAN详细教程(三):备份脚本的组件和注释 RMAN详细教程(四):备份脚本实战操作 1.为了安全起见,先将数据 ...

  9. ROS下多雷达融合算法

    有些小车车身比较长,如果是一个激光雷达,顾前不顾后,有比较大的视野盲区,这对小车导航定位避障来说都是一个问题,比如AGV小车, 所有想在小车前后各加一个雷达,那问题是ROS的建图或者定位导航都只是支持 ...

  10. PHP面试常考之设计模式——建造者模式

    建造者模式 介绍 建造者模式又名生成器模式,是一种对象构建模式.它可以将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象. 建造者模式是一步一步创建 ...