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. Windows任务计划的设置

    需求:因为要定时跑一些exe的小程序,来定时执行项目内的某段代码.所以需要建一个任务计划 1. 2. 3.

  2. iOS 8 AutoLayout与Size Class自悟

    前言 iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了…但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—> ...

  3. 教你写gulp plugin

    前端开发近两年工程化大幅飙升.随着Nodejs大放异彩,静态文件处理不再需要其他语言辅助.主要的两大工具即为基于文件的grunt,基于流的gulp.简单来说,如果需要的只是文件处理,gulp绝对首选. ...

  4. AppScan扫描建议 问题集

    1.1        AppScan扫描建议 若干问题的补救方法在于对用户输入进行清理. 通过验证用户输入未包含危险字符,便可能防止恶意的用户导致应用程序执行计划外的任务,例如:启动任意 SQL 查询 ...

  5. python 读取一个目录下的所有目录和文件

    #!/usr/bin/python # -*- coding:utf8 -*- import os allFileNum = 0 def printPath(level, path): global ...

  6. POJ_3616_Milking Time

    Milking Time Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10841   Accepted: 4564 Des ...

  7. cocoapods卸载与安装

    引用自:https://www.aliyun.com/jiaocheng/389907.html 一.首先卸载pod which pod 得到pod的路径 sudo rm -rf <pod的路径 ...

  8. ArcGIS API for javascript开发笔记（六）——REST详解及如何使用REST API调用GP服务

    感谢一路走来默默支持和陪伴的你~~~ -------------------欢迎来访,拒绝转载-------------------- 一.Rest API基础 ArcGIS 平台提供了丰富的REST ...

  9. 多态设计 zen of python poem 显式而非隐式 延迟赋值

    总结 1.python支持延迟赋值,但是给调用者带来了困惑: 2.显式而非隐式,应当显式地指定要初始化的变量 class Card: def __init__(self, rank, suit): s ...

  10. linux系统java的安装

    (一)下载java8 下载链接:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...