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. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之五：安装SQL Server

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  2. expect 知识与示例说明

    expect 知识与示例说明 2012/04/10 chenxin 2019/07/07 update Chenxin 参考 https://www.cnblogs.com/yinghao1991/p ...

  3. TP5 ajax请求报500错误

    场景:几个站点从阿里云迁移到腾讯云,然后 TP5项目 ajax请求报500错误 数据返回成功,但是http状态码是500,不走success,一直走error 如下图: 原因分析: 服务器centos ...

  4. Linux第一章-目录初识

    一.Linux基本介绍: Linux 是一种自由和开放源码的类 UNIX 操作系统,使用 Linux 内核.目前存在着许多不同的 Linux 发行版,可安装在各种各样的电脑硬件设备,从手机.平板电脑. ...

  5. 【5】Android Service 与 AIDL

    前言:本系列仅介绍基本大体的使用步骤,而不对每个步骤进行细致的讲解.读者可作为已经对相关内容有所了解后的快速查阅. 一.单应用内Service的使用 Service组件与Activity以IBinde ...

  6. MongoDB学习笔记（二、MongoDB查询）

    目录: MongoDB数据类型 MongoDB新增语法 MongoDB查询语法 MongoDB查询选择器 MongoDB关联查询 MongoDB数据类型: MongoDB新增语法: 语法:db.col ...

  7. Best Cow Line <挑战程序设计竞赛> 习题 poj 3617

    P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Goldpoj 3617 http://poj.org/problem?id=3617 题目描述FJ is about ...

  8. dom0、dom2、dom3事件

    https://www.jianshu.com/p/3acdf5f71d5b addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用. removeEven ...

  9. Codeforces Round #603 (Div. 2) B. PIN Codes 水题

    B. PIN Codes A PIN code is a string that consists of exactly 4 digits. Examples of possible PIN code ...

  10. golang数据结构之双链表

    目录结构: doubleLink.go package link import ( "fmt" ) //HerosNode 链表节点 type HerosNode struct { ...