Ajax入门

一、ajax简介

1.是一种无须加载整个网页的情况下,能够更新部分网页的技术
2.异步的javaScript和XMl
3.改善用户体验，后台与服务器进行少量数据交换，不重新加载整个网页的情况下，对网页的某部分进行更新。

二、ajax原理

页面内容->调用Ajax对象->发送请求->Web服务器检查用户名->返回部分数据->调用事件处理函数->更新部分页面

1.使用XMLHttpRequest对象来向服务器发送异步请求，从服务器获得相应数据
2.js来操作DOM来更新页面，但响应的页面不是整个页面,而是部分数据

三、ajax对象(浏览器的一个内置对象)

1.根据浏览器差异创建不同的Ajax对象

IE浏览器中的是:ActiveXObject
其他浏览器,(1.7以后的IE):XMLHttpRequest

function method1(){
	var xhr;
	//不是IE浏览器
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		//IE浏览器
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
}

2.Ajax对象的属性

①.readyState(表示XMLHttpRequest对象的状态)
0:未初始化,对象已创建,未调用open方法
1:open方法成功调用,send方法还没调用
2:send方法,还没开始接受数据
3:开始接受数据,但还没接收完
4:完成,响应数据完成
②.Onreadystatechange:请求状态改变的事件触发器(readyState变化时会调用这个属性上注册js函数)
③.responseText:服务器响应的文本内容
④.responseXML:服务器响应的XML内容对应的DOM对象
⑤.Status:服务器返回的http状态码.200表示成功,404表示未找到,500表示服务器内部错误
⑥.statusText:服务器返回状态的文本信息

3.Ajax对象的方法

①.Open(string method,string url,boolean asynch,String username,string password):指定http方法,url,及其他请求
method:请求方法,get和post
url:请求的服务器地址
asynch:是否采用异步方法,true为异步,false相反
username,password:可以不指定,用户名和密码
②.Send(content)
将准备好的内容向服务器发送,若采用异步,该方法会立即返回
content可以是null,表示不发送数据,内容可以是DOM对象,输入流,字符串
③.SetRequestHeader(String header,String value)
在post中设置请求头,指定header的值为value
在open方法后调用,一般用在post方法中
④.getAllResponseHeader()
获得所有响应头的信息
⑤.getResponseHeader(String header)
获得指定响应头的信息
⑥.Abort()
停止http请求

四.get请求

1.Ajax编程实现

不论是get还是post请求都是这四步
①.创建Ajax对象
②.通过open()方法设置Ajax对象发送请求前的必要数据
③.指定事件响应的方法
④.调用send()方法发起请求

区别:get发送请求添加数据是在url后面通过?加键值对的方法,然后send直接发送
null.open(‘get’,‘url?username=’+username,true);xhr.send(null);

2.Ajax设置请求响应

1.给onreadystatechange绑定一个事件处理函数
2.当readystatus请求状态发生改变时被触发
3.被触发函数一般对readystate为4，status为200做处理,即保证接收数据是成功响应的数据(服务器端响应的数据)
4.同步和异步
true为异步:当服务器端还没有做出响应时,还可以继续对页面进行操作
false为同步:必须等服务器端做出响应之后,才能继续操作
5.创建一个ajax的Web项目,在WebRoot里面创建一个regist.html
6.在Web项目的src里面创建一个servlet,文件名为RegistServlt.java,引入文件名要改成

<script>
	$(function(){
		//当按钮被点击的时候触发一个函数(编程式点击事件)
		$("#bt").click(function(){
			//1.创建Ajax对象
			var xhr;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			var username=$("#username").val();
			//2.通过open()方法设置Ajax对象发送请求前的必要数据
			xhr.open('get','regist?username='+username,true);
			//3.指定事件响应的方法
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					var txt=xhr.responseText;
					alert(txt);
				}
			}
			//4.调用send()方法发起请求
			xhr.send(null);
		})
	});
</script>

五、post请求

六、用jquery来写ajax

七、json来写ajax

Json是一种轻量级的数据交换格式
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
null
数组和集合（在方括号中）


对象（在花括号中）

对象里面有集合和数组:

Json字符串转换为js对象:JSON.parse(json串);
Js对象转换为Json字符串(需要Fastjson.jar包):(JSON.toJSONString(js对象))