AJAX基础

    AJAX :  异步的 JavaScript And XML.

   功能:  完成页面的局部刷新,不中断用户的体验.

传统的get/post异步校验方式:

AJAX的编写的步骤:

* 第一步：创建一个异步对象.

* 第二步：设置对象状态改变触发一个函数.

* 第三步：设置向后台提交的路径

* 第四步：发送请求.

    * GET方式提交请求:

ajax_get.js

function ajax_get() {
	// 1.创建异步对象
	var xhr = createXMLHttp();
	// 2.设置状态改变的监听 回调函数.
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) { // 请求发送成功
			if (xhr.status == 200) { // 响应也成功
				// 获得响应的数据:
				var data = xhr.responseText;
				// 将数据写入到DIV中:
				document.getElementById("d1").innerHTML = data;
			}
		}
	}
	// 3.设置请求路径
	xhr.open("GET", "/day15/ServletDemo1?name=aaa&pass=123", true);
	// 4.发送请求
	xhr.send(null);
}

function createXMLHttp() {
	var xmlHttp;
	try { // Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		try {// Internet Explorer
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
			}
		}
	}

	return xmlHttp;
}

    * POST方式提交请求:

ajax_post.js

function ajax_post(){
	// 创建异步对象:
	var xhr = createXMLHttp();
	// 设置监听:
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				document.getElementById("d1").innerHTML = xhr.responseText;
			}
		}
	}
	
	// 打开路径:
	xhr.open("POST","/day15/ServletDemo1",true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	// 发送请求:
	xhr.send("name=张三&pass=123");
}

function createXMLHttp() {
	var xmlHttp;
	try { // Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		try {// Internet Explorer
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
			}
		}
	}

	return xmlHttp;
}