AJAX技术的出现使得javascript技术大火。不懂AJAX的同学百度一下，了解AJAX能做什么就可以了。

代码：

　　　　

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Ajax</title>

<script type="text/javascript">

	window.onload=init;

	function init(){

		var btn = document.getElementById("getData");

		btn.onclick = getData;

	}

	function getData(){

		//利用ajax获取数据步骤

		//1:创建XMLHttpRequest对象,在IE浏览器中版本低于7的情况获取的这个对象不是XMLHttpRequest,我们可以用一个工程的函数来实现(屏蔽不同浏览器之间的对象的创建)

		var xhr = createXMLHttpRequest();

	    alert(xhr);

		//2：检测XMLHttpRequest对象的状态，在合适的地方处理

		//通过open方法确定要访问的页面1个参数请求类型，2提交路劲，3个参数是是否异步

		xhr.open("GET","AjaxServlet",true);

		//在onreadystatechange事件中处理请求

		xhr.onreadystatechange = function(){

			//onreadystatechange在每个阶段都进行响应，在状态等于4的时候请求结束并且state=200

			if (xhr.readState == 4 && xhr.status == 200) {

				//获取相应的文本信息通过xhr的resposeText可以获取文本信息，包括xml的标签

				//通过responseXML可以获取xml的信息，只能xml对象

				document.getElementById("saveData").innerHTML = xhr.responseText;

			}

		}

		//3:发送请求,send函数可以传入相应的参数，这个参数必须是post请求的方式才有效，get请求直接在请求地址中拼接比如send("id=XXX & name=XXX")

		xhr.send();

	}

	function createXMLHttpRequest(){

		if (window.ActiveXObject) {

			//针对ie5,6

			return new ActiveXObject("Microsoft.XMLHTTP");

		} else if (window.XMLHttpRequest){

			//其他主流浏览器

			return new XMLHttpRequest();

		}else {

			alert("你使用的浏览器不支持XMLHttpRequest");

			return null;

		}

	}

</script>

</head>

<body>

	<input type="button" value="获取数据" id= "getData">

	<div id="saveData"></div>

</body>

</html>

后台代码：

package com.study.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

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

		this.doPost(request, response);

	}

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

		System.out.println("ajax come");

		response.getWriter().write("AJAX");

	}

}

Ajax学习整理笔记的更多相关文章

  1. Ajax学习整理

    什么是ajax?W3School中给ajax的定义是: 1.AJAX = 异步 JavaScript 和 XML. 2.AJAX 是一种用于创建快速动态网页的技术. 3.通过在后台与服务器进行少量数据 ...

  2. Easyui学习整理笔记

    目录 (1) 表格双击事件 (2) treegrid传参更新 (3) 设置列表checkbox单选 (4) Easyui实现单行选择和取消选择 @ 对工作中遇到的easyui做一下笔记,不定时更新 ( ...

  3. ajax学习摘抄笔记

    2019独角兽企业重金招聘Python工程师标准>>> AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). A ...

  4. C#泛型(C#_编程指南)CSDN学习整理笔记

    1.1. 泛型概述 2.0版C#语言和公共语言运行时(CLR)中增加了泛型.泛型将类型参数的概念引入.NETFramework,类型参数使得设计如下类和方法成为可能:这些类和方法将一个或多个类型的指定 ...

  5. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  6. canvas学习之API整理笔记（二）

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. 学习ReactNative笔记整理一___JavaScript基础

    学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...

  9. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

随机推荐

  1. Sencha Touch 实战开发培训 视频教程 第二期 第八节 (完结)

    2014.4.23 晚上8:00左右开课. 本节课耗时超长,因为演示过程中出现了一些小错误,所以耗时接近2小时. 本期培训一共八节,前两节免费,后面的课程需要付费才可以观看. 本节内容: 开发cord ...

  2. mongodb gridfs基本使用

    Mongodb GridFS图片文件存储解决方案 之前解决方案是接收图片数据后,将图片直接存储到盘阵,然后通过Apache做服务器,将图片信息存储到数据库,并且存储一个Apache的访问路径. 目前需 ...

  3. Android 基于 Speex 的高度封装语音库，0 耦合,没三方jar包

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. github使用密钥登录

    注册github之后 初次使用git的用户要使用git协议大概需要三个步骤: 一.生成密钥对 二.设置远程仓库(本文以github为例)上的公钥     一.生成密钥对 再window系统中可以通过x ...

  5. AES加密工具类（对称加密算法）

    import java.nio.charset.Charset; import java.security.Key; import javax.crypto.Cipher;import javax.c ...

  6. Java开发之上帝之眼系列教程前言&目录

    前言 如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝的角度去观察(了解)Java体系. ...

  7. centos6.9环境下JDK安装部署

    1.准备jdk安装文件: 这里我使用的是 jdk-7u79-linux-x64.tar.gz 2.在 /usr/local 目录下创建 sotfware目录,并上传JDK文件: 解压文件并修改文件夹为 ...

  8. Navicat 同步数据库中数据

     Navicat工具同步两个数据库中的数据 第一步在我们的电脑里面打开navicat软件,打开要复制表的数据库,如下图所示:   第二步点击上方的“工具->数据传输”,如下图所示:   第三步进 ...

  9. jquery 1.9 1.8 判断 浏览器（IE11,IE8,IE7,IE6）版本

    1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...

  10. FZU 2092 收集水晶(记忆化搜索)

    Problem 2092 收集水晶 Accept: 101 Submit: 439 Time Limit: 5000 mSec Memory Limit : 32768 KB Problem Desc ...