js实现AJAX与JQuery实现AJAX

1.AJAX

1.1.AJAX概述

异步的js和xml

1.2.异步交互和同步交互

同步：
浏览器向服务器发送一个请求，必须等待响应结束，才能发送第二个请求，在服务器处理期间，浏览器不能干别的事,通常刷新整个页面

异步：
浏览器向服务器发送一个请求，无须等待响应结束，就能发送第二个请求，在服务器处理期间，浏览器可以干别的事,通常刷新局部页面

1.3.AJAX使用场景

百度搜索框
注册时用户名校验
…

1.4.AJAX优缺点

优点：
异步交互，提高了用户的体验
服务器只是响应了部分数据，而不是整个页面，因此降低了服务器的压力

缺点：
ajax不适用所有场景
ajax会无端的增加服务器的访问次数，从而增加服务器的压力

1.5.js实现ajax（了解）

第一步, 获取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
		}
	}
}

2.jQuery实现AJAX

$.get
$.post
$.get(url,data,callback)
url：请求的路径
data：可选参数，请求的数据，json格式
callback：可选参数，请求成功后执行的函数

2.1.load方法

$(selector).load(url,data,callback)
$(selector)：选择器，服务器返回的数据可以之间存入这个选择器选中的元素中
url：请求的路径
data：可选参数，请求的数据，json格式
callback：可选参数，请求成功后执行的函数

2.3.$.ajax方法

$.ajax(url,data,async,type,success)
url：请求的路径
data：可选参数，请求的数据，json格式
async：可选参数，表示是否异步，默认true表示异步
type：可选参数，请求方式，get、post
success：可选参数，请求成功后执行的函数

2.4.用户名ajax校验

需求:用户名失去焦点时发起ajax请求

$("input[name='username']").blur(function(){
		$(this).nextAll("span").html("")
		if($(this).val().trim()==""){
		$(this).nextAll("span").html("用户名不能为空").css("color","red")
		return
		}

	//获取用户名
	varusername=$(this).val()

		//调用ajax
		$.post("<%=request.getContextPath()%>/AjaxCheckUnServlet",
		{"username":username},function(result){
			//result代表服务器响应的数据
			$("#u_span").html(result).css("color","red")
			})
		})
创建AjaxCheckUnServlet，根据业务逻辑查询用户名是否存在并响应