Ajax学习整理笔记

    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");
	}

}
原文地址:https://www.cnblogs.com/airycode/p/4823083.html