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. PlayJava Day013

    今日所学: /* 2019.08.19开始学习,此为补档. */ 1.BufferedImage:是Image的一个子类,两者的主要作用就是将一副图片加载到内存中,即图像缓冲区. 对于本地图片: Fi ...

  2. Selenium模块的安装

    Selenium模块 1.安装selenium python2:pip install selenium python3:pip install selenium 2.设置浏览器驱动 解压后必须与浏览 ...

  3. python 对字典分别按照key值、value值进行排序

    1.sorted函数首先介绍sorted函数,sorted(iterable,key,reverse),sorted一共有iterable,key,reverse这三个参数. 其中iterable表示 ...

  4. javaWeb核心技术第三篇之JavaScript第一篇

    - 概述 - JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 ...

  5. 使用adb命令操控Android手机（adb命令）

    1) 手机连接电脑之前 首先,查看安卓手机是否已经连接上电脑 adb devices 让adb一直查找安卓设备,找到后才停止 adb wait-for-device 2) 手机连接电脑后的操作 2.0 ...

  6. YARN HA部署架构

    hadoop001: zk rm(zkfc线程) nm hadoop002: zk rm(zkfc线程) nm hadoop003: zk nm RMStateStore: 存储在ZK的/rmstor ...

  7. Azkaban(3.x)编译安装使用

    官网地址:https://azkaban.readthedocs.io Azkaban 有三种部署方式:单服务模式.2个服务模式.分布式多服务模式 简单实用仅需单服务模式即可 2个服务模式,需要配置m ...

  8. ORA-29861: 域索引标记为 LOADING/FAILED/UNUSABLE

    解决方法:select idx_name,idx_status from ctxsys.ctx_indexes;需要重建同步全文索引:alter index  索引名  rebuild online ...

  9. 【CentOS7】CentOS7各个版本镜像下载地址（转）

    链接:https://www.cnblogs.com/caidingyu/p/10679422.html # CentOS7.6 下载地址       # CentOS-7-x86_64-DVD-18 ...

  10. 基于Django的Rest Framework框架的分页组件

    本文目录 一 简单分页(查看第n页,每页显示n条) 二 偏移分页(在第n个位置,向后查看n条数据) 三 CursorPagination(加密分页,只能看上一页和下一页,速度快) 回到目录 一 简单分 ...