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-6-24)（废弃 仅参考）

    扩展代码如下: Ext.define('ux.BMap', { alternateClassName: 'bMap', extend: 'Ext.Container', xtype: 'bMap', ...

  2. jvisualvm连接远程应用终于成功，附踩大坑记录！！（一：jstatd方式）

    一.问题概述 连接远程java应用除了jstatd方式,还有jmx方式.不必拘泥于一种,一种不行可以果断尝试另一种,兴许就行了. 姊妹篇在这: jvisualvm连接远程应用终于成功,附踩大坑记录!! ...

  3. PHP内置安全函数一览

    内置安全函数 filter_var函数 根据参数中的过滤类型进行过滤,如过滤Email类型的,则符合的字符串返回字符串,不符合的返回False. urldecode函数 写这个函数是特别为了提醒注意, ...

  4. java读取写入oracle的blob字段工具类

    import com.hzunitech.fxgk.sys.model.UtFileData;import com.jfinal.kit.PathKit;import com.jfinal.plugi ...

  5. SqlServer数据库查询表信息/列信息(列ID/列名/数据类型/长度/精度/是否可以为null/默认值/是否自增/是否是主键/列描述)

    查询表信息(表名/表描述) Value ) AS value FROM sysobjects a Where a.xtype = 'U' AND a.name <> 'sysdiagram ...

  6. 170822、解决PLSQL记录被另一个用户锁住的问题

    1.查看数据库锁,诊断锁的来源及类型: select object_id,session_id,locked_mode from v$locked_object; 或者用以下命令: select b. ...

  7. Myers–Briggs_Type_Indicator 迈尔斯布里格斯类型指标（MBTI）

    Myers–Briggs Type Indicator - Wikipedia https://en.wikipedia.org/wiki/Myers%E2%80%93Briggs_Type_Indi ...

  8. Docker,docker-machine,docker-composer

    https://docs.docker.com/engine/installation/mac/ Docker值得关注的特性文件系统隔离:每个进程容器运行在一个完全独立的根文件系统里.资源隔离:系统资 ...

  9. JS security

    下文本文将结合代码向读者展示常见这些 JavaScript 安全漏洞,以便读者在实际编码过程中注意到这些安全问题,及早规避这些风险. 基于 DOM 的跨站点脚本编制 我们都听说过 XSS(Cross ...

  10. Linux上Oracle 11g安装步骤图解

    Oracle 11g下载地址: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 选 ...