JavaWeb_AJAX_简介

本博文为子墨原创，转载请注明出处！

http://blog.csdn.net/zimo2013/article/details/9150943

1.AJAX介绍
        AJAX=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,不是新的编程语言，而是一种使用现有标准的新方法。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.实例过程

<script type="text/javascript">
  	//ajax实例过程 Strawberry2013
 	function ajax() {
		var xmlHttpRequest = null;
		//new xmlHttpRequest object
		if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlHttpRequest = new XMLHttpRequest();
		} else {
			// code for IE6, IE5
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		//onreadystatechange事件详细分析看本页后面的解释
		xmlHttpRequest.onreadystatechange = function() {
			if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
				document.getElementById("myDiv").innerHTML = xmlHttpRequest.responseText;
			}
		}
		
		xmlHttpRequest.open("GET", "/Test", true);
		/*
			open(method,url,async)
			method：请求的类型；GET 或 POST  url：文件在服务器上的位置  async：true（异步）或 false（同步）
		*/
		
		xmlHttpRequest.send();
		/*
			send(string)
			string：仅用于 POST 请求
		*/
	}
</script>

3.GET 与 POST
        (1).下面情况使用POST请求：
                1).无法使用缓存文件（更新服务器上的文件或数据库）(GET 可能得到缓存数据)
                2).向服务器发送大量数据（POST 没有数据量限制）
                3).发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
        (2).GET 请求
                1).避免缓存
                       xmlHttpRequest.open("GET","/Test?t=" + Math.random(),true);
                2).URL 携带参数
                       xmlHttpRequest.open("GET","/Test?fname=Bill&lname=Gates",true);
        (3).POST 请求
                如果需要像 HTML 表单那样 POST 数据，应使用 setRequestHeader() 来添加 HTTP 头。
                       xmlhttp.open("POST","/Test",true);
                       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                       xmlhttp.send("fname=Bill&lname=Gates");
4.服务器响应
        如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText(字符串形式)或responseXML(XML)属性。
5.onreadystatechange事件
        当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState(存有XMLHttpRequest的状态信息)改变时，就会触发 onreadystatechange 事件。
        (1).readyState的值
                 •0: 请求未初始化
                 •1: 服务器连接已建立
                 •2: 请求已接收
                 •3: 请求处理中
                 •4: 请求已完成，且响应已就绪
 
        (2).status的值
                 200: "OK"
                 404: 未找到页面
 
        (3).正确处理就绪响应
                当readyState等于 4 且状态为 200 时，表示响应已就绪：
                       xmlhttp.onreadystatechange=function(){
                               if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                        //code
                               }
                       }