ajax的使用

Ajax是什么？
Asynchronous javascript and xml 异步的js和xml
它能使用js访问服务器 而且是异步访问
服务器给客户端的响应一般是整个页面 一个html完整页面 但在ajax中 因为是局部刷新 那么服务器就不用再响应整个页面 而只是数据

text: 纯文本
xml
json 它是js提供的数据交换格式 它在ajax中最受欢迎

异步交互和同步交互：
同步：
发一个请求 就要等待服务器的响应结束 然后才能发第二个请求 中间这段时间就是一个字卡
刷新的是整个页面
异步:
发一个请求后 无需等待服务器的响应 然后就可以发第二个请求
可以使用js接受服务器的响应 然后使用js来局部刷新

Ajax应用场景:
百度的搜索框
用户注册时(校验用户名是否被注册)

AJAX的优缺点:
优点:
异步交互 增强了用户的体验
性能:因为服务器无需再响应整个页面 只需要响应部分内容 所以服务器的压力就减轻了

缺点:
ajax不能够应用在所有场景
Ajax无端的增多了对服务器的访问次数 给服务器带来了压力

AJAX发送异步请求:
1.第一步:(得到XMLHttpRequest)
ajax其实只需要学习一个对象 XMLHttpRequest 如果掌握了它 就掌握了ajax
得到XMLHttpRequest

大多数浏览器都支持 var xmlHttp = new XmlHttpRequest
IE6.0如何得到XMLHttpRequest: var xmlHttp = new ActiveXObject(“Msxm12.XMLHTTP”);
IE5.5及更早版本的IE: var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

编写创建XMLHttpRequest对象(异步对象)的函数:
Function createXMLHttpRequest(){
Try{
Retrun new XmlHttpRequest();
}catch(e){
Try{
Return new ActiveXObject(“Msxm12.XMLHTTP”);
}catch(e){
Try{
Return new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(e){
Alert(“哥们你用的什么浏览器啊”);
Throw e;
}
}
}
}

2.第二步(打开与服务器的连接)
xmlHttp.open(): //用来打开与服务器的连接 它需要三个参数

请求方式 可以是get或者post
请求的url 指定的服务端资源
请求是否为异步 如果是true表示发送异步请求 否则同步请求

xmlHttp.open(“GET”,”url路径”,true);

3.第三步(发送请求)
XmlHttp.send(null);// 如果不给可能会造成部分浏览器无法发送

参数: 就是请求体内容! 如果是GET请求 必须给出null

4.第四步（得到响应）

在xmlHttp对象的一个事件上注册监听器: onreadystatechange （当状态发生改变时）
XmlHttp对象一共有5个状态

0状态：刚创建 还没有调用open方法
1状态：请求开始 调用了open 没有调用send
2 状态: 调用完了send方法
3 状态: 服务器已经开始响应 但不表示响应结束了
4 状态: 服务器响应结束 （通常我们只关心这个状态）

得到xmlHttp对象的状态:

var state = xmlHttp.readyState; //可能是 0 1 2 3 4

得到服务器响应的状态码:
Var status = xmlHttp.status; // 例如为 200 404 500

得到服务器响应的内容:

var content = xmlHttp.responseText; //得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML; //得到服务器的响应的xml格式的内容 xmlHttp会自动将xml解析为dodument对象

XmlHttp.onreadystatechange = function(){ //xmlHttp的5种状态都会调用本方法
If( xmlHttp.readyState == 4 && xmlHttp.status == 200) { //双重判断 是否为4状态 而且还要判断是否为200
//获取服务器的响应内容
Var text = xmlHttp.responseText;
}
}

代码如下:

第一例:

$(function(){

	var bth = document.getElementById("btn"); //给按钮的点击时间注册监听

	bth.onclick = function() {
		//创建对象
		var xmlHttp =  new XMLHttpRequest();
		//打开与服务器的连接
		xmlHttp.open("get","aServlet",true);
		//send 发送请求
		xmlHttp.send(null);
		//获取响应
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var text = xmlHttp.responseText;
				document.getElementById("text").innerHTML = text;
			}
		}
	}
})

第二例: 发送Post请求（如果发送请求时需要带有参数 一般都用Post请求）
发送post请求:
Content-Type:默认值为: application/x-www-form-urlencoded

Open : xmlHttp.open(“POST”)

添加一步 设置COntent-Type请求头:

xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
Send: xmlHttp.send(“username=zhangSan&&password=123”)
$(function(){

var bth = document.getElementById("btn"); //给按钮的点击时间注册监听

bth.onclick = function() {
	//创建对象
	var xmlHttp =  new XMLHttpRequest();
	//打开与服务器的连接
	xmlHttp.open("POST","aServlet",true);
	//设置请求头:
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
	//send 发送请求
	xmlHttp.send("username=张三&&password=1323");
	//获取响应
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			var text = xmlHttp.responseText;
			document.getElementById("text").innerHTML = text;
		}
	}
}

})

第三例 响应内容为xml:
服务器端:
>设置响应头: ContenType: 其值为:text/xml;charset=utf-8
客户端:
Var doc = xmlHttp.responseXML; //得到document对象

前台代码

$(function(){

var bth = document.getElementById("btn"); //给按钮的点击时间注册监听

bth.onclick = function() {
	//创建对象
	var xmlHttp =  new XMLHttpRequest();
	//打开与服务器的连接
	xmlHttp.open("get","bServlet",true);
	//设置请求头:
	//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
	//send 发送请求
	xmlHttp.send(null);
	//获取响应
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			var doc = xmlHttp.responseXML;
			//获取student的所有元素 得到数据 再获取下标0元素
			var ele = doc.getElementsByTagName("student")[0];
			//获取名字为number的属性值
			var number = ele.getAttribute("number");
			//var name = ele.getElementsByTagName("name")[0].text; //IE支持
			var name;
			//处理浏览器差异
			if(window.addEventListener){ //这个东西存在说明不是ie
				name = ele.getElementsByTagName("name")[0].textContent;// 谷歌可以用
			}else{
				name = ele.getElementsByTagName("name")[0].text;// 谷歌可以用
			}
			
 			//name = ele.getElementsByTagName("name")[0].textContent;// 谷歌可以用
			
			alert(name);	
		}
	}
}

})

后台代码:

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String xml = “” + “” +
“zhangsan” + “18/” +
“” + “”;
System.out.println(xml);
//text/xml;charrset:utf-8
response.setContentType(“text/xml;charrset:utf-8”);
response.getWriter().print(xml);

}

JSON

1.Json是什么?

它是js提供的一种转换格式 （数据交换格式）!

把一种语言转换为另一种语言
2.Json的语法:
{}:是对象！
属性必须使用双引号括起来 单引号不行
属性值:
Null
数值
字符串
数组 []
Boolean值 true:false
3.应用json
Var person = {“name”:”张三”,”age”:18};

例1: 正常形式
var json = {“name”:“耿晓”,“age”:18};
alert(json.name + " " + json.age);
例2: 字符串形式
var str = “{“name”:“耿晓”,“age”:18}”;
var json = eval("(" + str + “)”)
alert(json.name + " " + json.age);