AJAX

什么是AJAX

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript 语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAJ Asynchronous Javascript And JSON
AJ
Android Java - > 返回的必须是Json/xml --> Android解析 -> 利用Java代码来解析Json
Web js - > 返回的json - 自动解析 eval(“传入js脚本”)
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

​ 与服务器异步交互；
​ 浏览器页面局部刷新；
​ 保留原有响应结果的基础上显示新的响应内容。
​ 请求由ajax对象发送，由ajax对象处理响应内容。

特点：

            1. 无需加载整个页面，能够部分刷新页面

            2. 是一个前端技术
			
			3. ajax代码是先在当前结果页中响应，下次请求触发执行。

​
​
​ 本质：
​ ajax本质是js

同步交互与异步交互

            同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
            异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX的优缺点

优点：
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

ajax的过程

1.创建ajax引擎对象

4.利用请求状态改变触发器获取请求进度
声明监听
判断ajax状态码
判断响应状态码
获取响应数据
处理响应数据

2.创建一个Http请求

3.发送该Http请求

​ ajax引擎对象

属性

			readyState：用0-4这些数字来表示“请求状态”，当该属性的值为4时，一次ajax请求完成

​			status：表示http的状态码

​			statusText：表示http的状态描述文本

​			responseText：获取服务器返回的文本数据

方法

			open(method,url,async)：表示创建一个http的请求，method请求方式、url请求的路径地址、async表示请求是否异步

​			send(body)：发送该http请求，body是post请求的数据

​			setRequestHeader(header, value)：设置请求头，该方法必须在open()和send()方法之间设置方可生效

事件

​ onreadystatechange：请求状态改变事件触发器，当readyState值发送变化时，调用该事件触发器上绑定的函数

使用：
1、创建ajax对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();//火狐 谷歌
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject(“Msxml2.XMLHTTP”);
}
2、创建请求。
ajax.open(method,url,async);
method:请求方式。
get方式:
请求实体数据需要拼接在URL地址上
post方式:
请求实体需要在send中声明,还需要设置请求头，设置请求数据的内容的格式为application/x-www-form-urlencoded
ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
url：请求地址。
async：设置异步和同步。
true:表示异步
false:表示同步
ajax.send();
注意：如果没有请求数据，需要传入null。
get示例：
ajax.open(“get”,“as?uname=张三&pwd=123”);//创建请求
ajax.send(null);//发送
post示例：
ajax.open(“post”,“as”);//创建请求
ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
ajax.send(“uname=张三&pwd=123”);//发送
3、处理响应结果
ajax.onreadystatechange=function(){//声明onreadystatechange的监听函数
//判断响应状态
if(ajax.readystate4){
if(ajax.status200){
//获取响应结果
//将结果显示到当前网页中(js的dom操作)
}
}
}
作用：声明readystate的属性的值改变的监听函数。
注意：
我们使用ajax对象发送请求后，需要等待后台的处理，而不是立马就会有响应结果。
但是我们声明的响应处理代码，需要在响应内容被响应回来后才能执行。而ajax对象
有一个属性叫readystate，该属性的值会根据ajax执行流程进行自动改变：
0：表示ajax对象被创建
1：表示请求被创建
2：表示请求被发送
3：表示请求被处理完成，正在接收响应内容
4：表示响应内容成功接收。
我们给readystate增加监听，监听其值的改变，我们将响应处理代码声明在监听函数中！
注意2：
我们在主函数中声明监听，主函数执行完毕后，但是监听已经声明，等响应回来后会触发监听的函数的执行。

Ajax的响应

注意：
ajax是浏览器发送请求的一种方式，浏览器来区分获得响应数据应该如何处理。从服务器的角度来说，是不区分ajax和非ajax请求的。
但是处理ajax请求的Servlet是由我们程序员编写的，也就说服务器不区分，但是我们在项目开发时，主观意识上应该在后台区分Servlet
处理的是什么类型的请求。
注意2：
ajax的响应内容被浏览器接收后，在原有界面中显示，也就意味页面已经有了，后台就不需要再次响应新的页面数据了。
响应方式：
直接响应。
响应内容：
直接响应数据，无需页面代码。
数据类型：
字符串数据。
XML数据。
数据的格式：
普通字符串数据:直接响应
如果java对象数据:将对象数据拼接成json格式的字符串响应。
总结：
后台处理ajax请求，处理结果需要直接响应，如果是普通数据直接返回，如果是java对象数据则转换为json格式的字符串后响应。

AJAX核心（XMLHttpRequest）

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。
注意，各个浏览器对XMLHttpRequest的支持也是不同的！
大多数浏览器都支持使用：var xmlHttp = new XMLHttpRequest()来创建对象；
但IE有所不同，IE5.5以及更早版本需要：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)来创建对象；
而IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象；
为了处理浏览器兼容问题，给出下面方法来创建XMLHttpRequest对象：

打开与服务器的连接（open方法）

当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：
open(method, url, async)：
method：请求方式，通常为GET或POST；
url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
async：这个参数可以不给，默认值为true，表示异步请求；
var xmlHttp = createXMLHttpRequest();
xmlHttp.open(“GET”, “/AServlet”, true);

发送请求
当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。
注意：若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

接收服务器响应
当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。
服务器会返回三种数据:
字符串/xml/json

XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：
0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1：请求已开始，open()方法已调用，但还没调用send()方法；
2：请求发送完成状态，send()方法已调用；
3：开始读取服务器响应；
4：读取服务器响应结束。
onreadystatechange事件会在状态为1、2、3、4时引发。但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。其实我们还要关心服务器响应的状态码是否为200，其服务器响应为404，或500，那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。
最后，我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

btn.addMouseMotionListener(new MouserMotionListener(){
	// 重写方法
});
xmlHttp.onreadystatechange = function() {
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		alert(xmlHttp.responseText);	 responseXML
	}
};

xmlhttp:
readyState ： 状态 1234 4:响应结束
state : 状态码 200 404
responseText : 响应数据 json 字符串
responseXML : 响应数据是xml
onreadystatechange: 事件，在不同readyState 的时候会触发不同的方法

案例一：使用AJAX技术异步请求服务器 (GET请求)
步骤:
创建XMLHttpRequest对象；
调用open()方法打开与服务器的连接；
调用send()方法发送请求；
为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1、2、3、4，四种状态时被调用；
XMLHttpRequest对象的5种状态：
0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1：请求已开始，open()方法已调用，但还没调用send()方法；
2：请求发送完成状态，send()方法已调用；
3：开始读取服务器响应；
4：读取服务器响应结束。
通常我们只关心4状态。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在readyState为4时才能获取到！

案例二:使用AJAX技术异步请求服务器 (POST请求)

发送POST请求注意事项

POST请求必须设置ContentType请求头的值为application/x-www.form-encoded。
表单的enctype默认值就是为application/x-www.form-encoded！因为默认值就是这个，所以大家可能会忽略这个值！当设置了的enctype="application/x-www.form-encoded"时，等同与设置了Cotnent-Type请求头。
但在使用AJAX发送请求时，就没有默认值了，这需要我们自己来设置请求头：
当没有设置Content-Type请求头为application/x-www-form-urlencoded时，Web容器会忽略请求体的内容。所以，在使用AJAX发送POST请求时，需要设置这一请求头，然后使用send()方法来设置请求体内容。

响应内容为xml数据

服务器端：
设置响应头：ContentType，其值为：text/xml;charset=utf-8
客户端：
var doc = xmlHttp.responseXML;//得到的是Document对象！

JSON

​ 一、定义：JSON（JavaScript Object Notation）是一种数据交换格式（两种语言相互传递数据使用的格式）

​ 二、结构：JSON有两种结构：

				1. 对象：{k1:v1,k2:v2}

				2. 数组：[v1,v2]

三、JSON的使用：

1.在js中的使用：

            ​将json对象转化为json格式的字符串：JSON.stringify()

            ​将json格式的字符串转化为json对象：JSON.parse()

2.在java中的使用：

​ fastjson

Ajax的封装

method:表示请求方式,get|post
url:请求地址
data:请求数据，没有则传入null
格式:“a=1&b=2”
deal200:需要传入一个函数对象，封装ajax的响应处理代码，该函数必须声明一个形参用来接收ajax对象。

		function myAjax(method,url,data,deal200){
	//1、创建ajax对象
		var ajax;
		if(window.XMLHttpRequest){
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
	//2、创建请求
		if("get"==method.toLowerCase()){
			ajax.open(method,url+(data==null?"":"?"+data));
			ajax.send(null);
		}else if("post"===method.toLowerCase()){
			ajax.open(method,url);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(data);
		}
	//3、声明监听
		ajax.onreadystatechange=function(){
			//判断ajax状态
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					deal200(ajax);
				}
			}
	}
ajax.open(method,url);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(data);
		}
	//3、声明监听
		ajax.onreadystatechange=function(){
			//判断ajax状态
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					deal200(ajax);
				}
			}
	}
}