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. Oracle数据库之第三篇

    /* 起别名使用双引号 处理特殊字符使用 数据库里的字符串都是使用单引号 */ /* DDL语句 是数据定义语言 使用语句创建数据库的对象 表空间 是实例分配的一块空间 用于开发使用 创建语法: cr ...

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

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

  3. DOM CSS

    DOM CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElemen ...

  4. Android开发与Sequoyah的安装问题

    首次接触Android开发,在搭建开发环境时遇到困难,写出来和大家分享分享. 使用的ide为捆绑了adt插件和android sdk的eclipse adt bundle,无需安装android sd ...

  5. Oracle 两个逗号分割的字符串，获取交集、差集的sql实现过程解析

    Oracle数据库的两个字段值为逗号分割的字符串,例如:字段A值为“1,2,3,5”,字段B为“2”.想获取两个字段的交集(相同值)2,获取两个字段的差集(差异值)1,3,5. 一.最终实现的sql语 ...

  6. ThinkPHP数据库驱动之mysql事物回滚

    1.开启事务方法 startTrans()2.事务提交方法 commit()3.事务回滚方法 rollback() 用法例子: $order = M(‘order’); $allAdded = tru ...

  7. Python爬虫（学习准备）

    编码格式的认识: 字符:各种文字和符号的统称 字符集:多个字符的集合 字符集包括:ASCII字符集,GB2312字符集,GB18030,Unicode字符集等 1个字符ASCII编码占1个字节,用Un ...

  8. 机器学习--支持向量机 （SVM）算法的原理及优缺点

    一.支持向量机 (SVM)算法的原理 支持向量机(Support Vector Machine,常简称为SVM)是一种监督式学习的方法,可广泛地应用于统计分类以及回归分析.它是将向量映射到一个更高维的 ...

  9. ora-12505报错解决方法（转）

    用oracle数据库新建连接时遇到ora-12505,此问题解决后又出现ora-12519错误,郁闷的半天,经过一番折腾问题解决,下面小编把我的两种解决方案分享给大家,仅供参考. 解决方案一: 今天工 ...

  10. jq Sortable的使用

    本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...