AJAX

AJAX

1.AJAX是什么

- asynchronous js and xml：异步的js和xml
- 利用js访问服务器，而且是异步访问
- 通常服务器给浏览器响应一个完整页面，而在AJAX中，由于利用  
  访问服务器，再由js接受响应，局部刷新页面，所以服务器不用
  给浏览器响应整个页面，而只是数据
- 服务器响应的数据：

2.同步交互与异步交互

- 同步
	- 向服务器发送一个请求，必须等待响应结束，才能发起第二个请求，在服务器处理期间，浏览器不能干别的事
	- 刷新整个
- 异步
	- 向服务器发送一个请求，不用等待响应结束，可以发送第二个请求，服务器处理期间，浏览器可以干别的事
	- 可以使用js接受服务器响应，再利用js局部刷新页面

3.AJAX的应用场景

- 类似百度的搜索框
- 注册用户时，校验用户是否被注册过

4.AJAX的优缺点

- 优点
	- 异步交互，提高用户体验
	- 服务器只响应部分数据，而不是整个页面，所以降低了服务器的压力
- 缺点
	- ajax不能应用所有的场景
	- ajax会武断增加访问服务器次数，给服务器带来压力

5.ajax的实现

第一步 获取XMLHttpRequest对象：

	获取XMLHttpRequest对象  
	var XMLHttp = ajaxFunction（）；  
	function ajaxFunction(){  
		var xmlHttp;
		try{
				//现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
				xmlHttp = new XMLHttpRequest();
			}catch(e){
				try{
					//IE6.0
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						//IE5.0及更早版本
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						alert("...");
						throw e;
					}
				}
			}
			return xmlHttp;
	} 

第二步.打开服务器连接

xmlHttp.open(method, url, async);
			> method: 请求方式, 可以是GET或POST
			> url: 所要访问的服务器中资源的路径 如: /Day10/servlet/AServlet
			> async: 是否为异步传输, true 表示为异步传输 一般都是true

第三步.发送请求

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	//通知服务器发送的数据是请求参数
		xmlHttp.send("xxxx"); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
		xmlHttp.send("username="+username+"&psw="+)
		> 参数: 
			如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面
			如果是POST请求, 传入的就是请求参数
				"username=张飞&psw=123"

第四步.注册监听

> 在XMLHttpRequest对象的一个事件上注册监听器: 	
			onreadystatechange
		> 一共有五个状态:(xmlHttp.readyState)
			0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
			1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求 
			2状态: 调用完了send()方法了, 请求已经开始
			3状态: 服务器已经开始响应, 但是不代表响应结束 
			4状态: 服务器响应结束!(通常我们只关心这个状态) 
		> 获取xmlHttp对象的状态:
			var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4 
		> 获取服务器响应的状态码
			var status = xmlHttp.status;
		> 获取服务器响应的内容
			var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据  

			readyState 
			0 --> 1
			/* 注册监听, 时刻监听服务器处理请求的状态 */
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.readyState == 4){
				//状态为4表示服务器已经处理完成, 但是不代表处理成功
					if(xmlHttp.status == 200){//当状态码为200, 表示服务器成功的处理了请求
						var result = xmlHttp.responseText();
						//xxx
					}
				}
			}

JQuery实现AJAX

load方法

$(selector).load(url,data,callback)

selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
			url -- 发送请求的URL地址
			data -- 可选, 向服务器发送的数据 key/value数据 如:{"username" : "张飞", "psw" : "123"}
			callback -- 可选, load方法完成后所执行的函数


		示例:
			$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});

$.get方法

$.get(url,[data],[callback])

url -- 发送请求的URL地址
			data -- 可选, 向服务器发送的数据
			callback -- 可选, 请求成功后所执行的函数


		示例:
			$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
				$("#username_msg").html("<font style='color:red'>"+result+"</font>");
			});

$post方法

$.post(url,[data],callback)

url -- 发送请求的URL地址
			data -- 可选, 发送至服务器的key/value数据
			async -- 可选, 默认为true, 表示异步交互
			type -- 可选, 请求方式 , 默认为"GET"。
			success -- 可选, 请求成功后执行的函数, 函数参数:
				result -- 服务器返回的数据


		示例: 
			$.ajax({
				"url" : "<%= request.getContextPath() %>/AjaxCheckUsernameServlet",
				"data" : {"username": username},
				"async" : true,
				"type" : "POST",
				"success" : function(result){
					$("#username_msg").html("<font style='color:red'>"+result+"</font>")
				}
			});