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. JVM工具jcmd实践

    暂时参考以下链接,后续补充自己的实践. https://www.jianshu.com/p/388e35d8a09b

  2. jquery中event对象属性与方法小结

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...

  3. jquery scroll()滚动条事件

    最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...

  4. windows中安装pip,setuptools,django等

    1,安装Python3.6 (下载exe文件,双击安装)      注意设置环境变量,让Python的在任意位置都可以执行 .Python 下载地址:https://www.python.org/do ...

  5. 微信小游戏 交互接口的使用 wx.showToast wx.showLoading

    在小游戏中,会有如下图的提示窗口,这些可以使用微信提供的交互接口实现. 使用loading等待的接口.mask=true表示遮罩,防止等待时点击其他按钮触发其他操作导致异常. wx.showLoadi ...

  6. 【OOP】C++ const成员函数

    预备知识 1.代码转换分析技巧 在早期某些编译器会将C++代码翻译为C代码,然后使用C编译器生成可执行文件.其中翻译的一个转化就是:将this指针显式添加到成员函数的第一个参数位置上,并在成员函数调用 ...

  7. STM8L外部中断 为何 死循环 寄存器操作

    STM8L 系列单片机是 ST公司推出的低功耗单片机,与STM8S系列相比功耗降低了很多,但内部结构也删减了很多,使用时一定要仔细阅读手册.  这是第一次使用STM8,实现功能不是很复杂就没想研究库函 ...

  8. Instrumentation 两种方法 premain Agent

    由于jvm内部的限制Instrumentation 只能修改方法体 不能动态添加删除方法(安全第一吧!!!!) Premain 对于使用命令行接口的实现,可以将以下选项添加到命令行来启动代理: -ja ...

  9. 8.17 一个博客demo

    2018-8-17 18:13:27 明天周末准备整理一下看看我的博客!!! 说一下思路 1.先搭建框架 1.1 大体分成两块div 左右两部分 <div class="left&qu ...

  10. mvc 实现超时弹窗后跳转

    为了实现保持登录状态,可以用cookie来解决这一问题 假设过期时间为30分钟,校验发生在服务器,借助过滤器,可以这样写 public class PowerFilter : AuthorizeAtt ...