Ajax基础使用

Ajax：异步js 和 xml

异步刷新： 如果网页中某一个地方需要修改，异步刷新可以使：只刷新该需要修改的地方，而页面中其他地方 保持不变。例如：百度搜索框、视频的点赞

实现：

1、 readystate 表示XMLHttpRequest对象发送的HTTP请求状态 ， 共五种状态

状态值	简介
0	表示XMLHttpRequest 对象没有初始化
1	表示XMLHttpRequest 对象 开始发送请求 ，已执行 open() 方法并完成了相关资源的准备
2	表示XMLHttpRequest 对象已将请求发送完毕 已执行了 send() 方法来发送请求，但还没有收到响应
3	表示XMLHttpRequest 对象 开始读取响应信息，已接收到HTTP响应的头部信息，但是还没有将响应体接收完毕
4	表示XMLHttpRequest 对象 将响应信息读取完毕

2、 status
status 表示HTTP响应中的状态码 ，个状态含义如下

状态码	含义
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问资源不存在
500	服务器内部错误 ， 很可能是服务器代码有错

js: XMLHttpRequest对象

XMLHttpRequest对象的方法：

open(方法名(提交方式get|post),服务器地址,true) :与服务端建立连接
send():
	get:	send(null)
	post:	send(参数值)
setRequestHeader(header,value):
	get:不需要设置此方法
	post:需要设置：
		a.如果请求元素中包含了 文件上传:
			setRequestHeader("Content-Type","multipart/form-data");
		b.不包含了 文件上传
			setRequestHeader("Content-Type","application/x-www-form-urlencoded")

XMLHttpRequest对象的属性：
readyState:请求状态   只有状态为4 代表请求完毕
status:响应状态  只有200 代表响应正常
onreadystatechange:回调函数
responseText：响应格式为String
responseXML：相应格式为XML

案例：

案例功能：手机号查询：

<script type="text/javascript">
	function register(){
		var  mobile = document.getElementById("mobile").value;		
			//通过ajax异步方式请求服务器
		xmlHttpRequest = new XMLHttpRequest();
			//设置XMLHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack ;
			//请求地址
		xmlHttpRequest.open("post","MobileServlet",true);
			//设置post方式头信息
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-from-urlencoded");
		xmlHttpRequest.send("mobile="+mobile);	
	}
	//定义回调函数
	function callBack (){	
		if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
			//接收服务端返回的数据
			var data = xmlHttpRequest.responseText;//服务端还回的是String格式
			if(data == "true"){
				alert("号码已存在");
			}else{
				alert("注册成功");	
			}			
		}
	}
	function registerGet(){
		var mobile = document.getElementById("mobile").value;		
		//通过ajax异步方式请求服务器
		xmlHttpRequest = new XMLHttpRequest();
		//设置XMLHttpRequest对象的回调函数
		xmlHttpRequest.onreadystatechange = callBack ;
		xmlHttpRequest.open("post","MobileServlet?mobile="+mobile,true);
		//设置post方式头信息 	get不需要设置
		//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-from-urlencoded");
		xmlHttpRequest.send(null);	
	}	
	</script>

手机号：<input id = "mobile">
	<input value="注册" type="button" onclick="registerGet()"/>

jquery:推荐

$.ajax

$.ajax({
url:服务器地址,
请求方式:get|post,
data:请求数据,
success:function(result,testStatus){
},
error:function(xhr,errrorMessage,e){
});

例：

function register(){
		var mobile = $("#mobile").val();
		$.ajax({
			url:"MobileServlet",
			请求方式:"post",
			data:"mobile="+ mobile,
			success:function(result,testStatus){
				if(result == "true"){
					alert("已存在");
				}else{
					alert("成功");
				}
			},
			error: function(){
				alert("服务器错误");
			}	
		})
	}

$.get

$.get(
服务器地址,
请求数据,
function (result){

},
预期返回值类型（string\xml）
);

严格要求顺序
预期返回值类型 xml \text\json

例：

function registerGet(){
		var mobile = $("#mobile").val();
		$.get(
			"MobileServlet",
			"mobile="+ mobile,
			function(result){
				if(result == "true"){
					alert("已存在");
				}else{
					alert("成功");
				}
			},
			"text"
			)
	}

$.post

$.post(
服务器地址,
请求数据,
function (result){

},
	"xml" 或 "json" 或 "text" 
);

例：

function registerPost(){
		var mobile = $("#mobile").val();
		$.get(
			"MobileServlet",
			"mobile="+ mobile,
			function(result){
				if(result == "true"){
					alert("已存在");
				}else{
					alert("成功");
				}
			},
			"text"
			)
	}

$(xxx).load

$(xxx).load(
服务器地址,
请求数据
);

load:将服务端的返回值 直接加载到$(xxx)所选择的元素中

例：

//直接放到元素中
	function registerLoad(){
		var mobile = $("#mobile").val();
		$("span").css("color","blue");
		$("span").load(
			"MobileServlet",
			"mobile="+ mobile,
			//建议省略
			function(result){
				/*if(result == "true"){
					alert("已存在");
				}else{
					alert("成功");
				}*/
			}	
		)
	}

$.getJSON

$.getJSON(
服务器地址,
JSON格式的请求数据,
function (result){

}

);

例1：

	//json 数组
	var student=[{"name":"zs","age":"24"}];
	function registerJSON(){
		var mobile = $("#mobile").val();
		$.getJSON(
			"MobileServlet",
			{"mobile":mobile},
			function(result){
			alert(result.msg);
				if(result.msg == "true"){
					alert("已存在");
				}else{
					alert("成功");
				}
			}
		)
	}	

例2：

$.getJSON(
	"MobileServlet2",
	//一个json
	{"name":"zs","age":24},
	//解json
	//json 有多个对象
	function(result){
		var json = eval(result);
		$.each(json,function (i,element){
		alert(this.name+"===="+ this.age);
		});			
	)

后台：

主要是通过此对象传值

PrintWriter out = response.getWriter();