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. SpringBoot学习之Helloworld

    1. 如果使用Spring开发一个"HelloWorld"的web应用 创建一个web项目并且导入相关jar包.SpringMVC Servlet 创建一个web.xml 编写一个 ...

  2. openstack 中镜像状态详解 Image Statuses

    Images in Glance can be in one the following statuses: queued The image identifier has been reserved ...

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

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

  4. 【咸鱼教程】BitmapLabel位图字体使用

    引擎版本3.2.6 教程目录一 为什么要使用位图字体二 如何使用位图字体2.1 TextureMerger制作位图字体2.2 exml中使用位图字体三 Demo源码 一  为什么要使用位图字体egre ...

  5. windows桌面通知区域不显示音量图标的解决方法

    在windows系统桌面通知区域一般都是显示的输入法.电源.网络.音量及托盘的应用程序等内容 通知区域图标显示与否与控制面板的通知区域图标的设置有关,我们有时会遇到通知区域不显示个别图标的情况,如不显 ...

  6. 【CF903G】Yet Another Maxflow Problem 线段树

    [CF903G]Yet Another Maxflow Problem 题意:一张图分为两部分,左边有n个点A,右边有m个点B,所有Ai->Ai+1有边,所有Bi->Bi+1有边,某些Ai ...

  7. OSI互联数据包封装与解封装过程

    当我们在七层协议最上层,主机A想和其它主机通信, 比如telnet到主机B,各层都为数据打包后再封装上自己能识别的数据标签,现在我们只说四层以下的通信过程. .当一个高层的数据包到达传输层,由于tel ...

  8. ubuntu怎么安装下载工具uget+aria2 for firefox

    Windows下的下载工具--迅雷,之所以下载速度快,乃是它能搜索资源.为己所用,而不是仅仅从原始地址这单一资源处下载. Ubuntu下也有类似的工具,那就是aira2. aira2是一个命令行下载工 ...

  9. 500 status http status code 状态码

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Status Server error responses 500 Internal Server ...

  10. docker daemon configuration

    于 Docker的分层镜像,除了 aufs,docker还支持btrfs, devicemapper和vfs,你可以使用 -s 或 –storage-driver= 选项来指定相关的镜像存储.在Ubu ...