AJAX学习笔记
1.什么是AJAX? 为什么要使用AJAX?
1)传统的Web应用，客户端请求->等待服务器响应->客户端请求->等待服务器响应->重复过程(同步/Web1.0时代)(类似单线程运行)
2)现代的Web应用，客户端请求->客户端请求->等待服务器响应->等待服务器响应(导步/Web2.0时代) )(类似多线程运行)
3)Web2.0的核心技术是AJAX(异步JavaScript和Xml)
Ajax被认为是(AsynchronousJavaScript And Xml的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
4)客户端的异步请求，先发送到AJAX引擎，然后AJAX引擎再将请求发送到服务端，经过服务端处理后，服务端将响应发送到AJAX引擎，最后AJAX引擎异步的发送到页面。
(注意：这里的异步是指浏览器和Ajax引擎之间异步，Ajax引擎和服务器之间还是同步的，我们只是向Ajax引擎发送请求，可以不用等它响应就可以再发送下一次请求，Ajax引擎在每个浏览器中都内置了，要使用的话需要通过代码创建它的对象，即XMLHttpRequest对象，大多数浏览器的Ajax引擎都有缓存功能，会缓存上一次请求的内容，当接收到请求的时候，先根据请求的url到缓存中查看是否已经有该url对象的内容了，有的话就直接返回给浏览器，而不再去服务器请求最新的内容了。要想每次都获取最新的内容，可以让每次请求的url都不一样，如var ulr = “/city?time=” + new Date().getTime()，通过在url后加上当前时间作为参数再请求，这样就可以解决缓存带来的问题了)
5)之所以要使用AJAX
>>减轻服务端的压力
>>客户端的体验效果较佳
2.AJAX的特点
1)使用AJAX技术的页面，给人桌面应用(C/S)的感觉，其实其本质还是B/S结构。
2)AJAX也存在不足：
>>AJAX引擎早期IE和非IE的创建方式不统一
//创建ajax引擎
functioncreateXMLHttpRequest() {
var xhr = null;
try{
//IE
xhr= new ActiveXObject("microsoft.xmlhttp");
}catch(e) {
try{
//非IE
xhr= new XMLHttpRequest();
}catch(e) {
alert("您的浏览器不支持AJAX,请更换浏览器再使用!");
}
}
return xhr;
}
>>AJAX是属于浏览器内置对象异步对象，浏览器功能不同，也会导至AJAX某些功能不同。
>>AJAX应用不会刷新状态拦，"前进"和"后退"按钮无效。
3)使用HTML和XML作为数据的载体的特点：
>>HTML：无需解析，配合innerHTML属性非常方便。
>>XML：一定要按照DOM规则解析xml文件。
>>JSON：无需像XML一样大规模解析，但服务端传过来的是String类型，需要通过eval()函数转成JavaScript的string类型，这样才能被JavaScript直接解析。
3. AJAX开发步骤及详解
1)早期AJAX引擎的创建方式不同，分为IE版和非IE版,现代创建AJAX引擎的方式得到统一，都直接使用XMLHttpRequest就可以了。
2)AJAX会对每次异步请求的结果缓存，如果下一次请求和上一次请求的URL完全相同的话，AJAX会直接从缓存中将数据取出，响应给页面，因此，必须确每次URL请求的路径都不同。 可以在url后加上 ？time=new Date（）.getTime();
3)AJAX的开发步骤：
>>创建AJAX引擎对象
>>设置AJAX引擎监听服务端状态
>>准备发送异步请求
>>如果是POST请求的话，得设置AJAX引擎以POST方式提交，同时自动编码；GET无需设置
>>真正发送异步请求
二级菜单联动实例：
<select id="provinceID">
<option>选择省份option>
<option>吉林省option>
<option>辽宁省option>
<option>山东省option>
select>
<select id="cityID"style="width: 110px">
<option>选择城市option>
select>
<script type="text/javascript">
//定位省份下拉列表并设置监听
document.getElementById("provinceID").onchange = function() {
//得到城市下拉列表
var citySelectElement= document.getElementById("cityID");
var size =citySelectElement.options.length;
if(size > 1) { //删除原来的选项
for(var i = size - 1; i > 0; i--) {
citySelectElement.removeChild(citySelectElement.options[i]);
}
}
//创建ajax引擎
var xhr =createXMLHttpRequest();
//监听服务器端的响应,异步执行的。
xhr.onreadystatechange= function() {
if(xhr.readyState ==4) { //执行完成
if(xhr.status == 200){//请求成功
//获取服务器响应的内容 //[{"id":1,"name":"长春[吉林省]"},{"id":2,"name":"吉林市[吉林省]"},{"id":3,"name":"松原[吉林省]"},{"id":4,"name":"通化[吉林省]"}]
var jsonStr =xhr.responseText; //此时的字符串是java的String类型的，要转为js的string类型那个，js才能解析
var json =eval(jsonStr);
size= json.length;
for(var i = 0; i < size; i++) {
//创建节点,赋值，添加到父节点下
var optionElement =document.createElement("option");
optionElement.innerHTML= json[i].name; //取出json中name属性的值并赋给option几点
citySelectElement.appendChild(optionElement);
}
}
}
}
var province = this[this.selectedIndex].innerHTML;
//POST方式提交
var method = "POST";
var url = "/cityjson?time=" + new Date().getTime();
var sendData = "province=" + province; //要发送的数据，放在请求体中
xhr.open(method,url);
//要用post方式提交，该方法必须有，并且只能在open方式和send方式之间
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //设置请求头内容的类型，会自动将中文编码
xhr.send(sendData);
/*
//GET提交的参数中有中文，要手动编码
province= encodeURI(province);
//请求的方式，大小写不敏感
varmethod = "GET";
//发送请求给这个地址,每次请求的地址都要不同，否则会由于浏览器的缓存导致没有刷新
varurl = "/cityjson?time=" + new Date().getTime() +"&province=" + province;
//准备发送请求
xhr.open(method,url);
//真正发送请求
xhr.send(null);//GET方式提交请求，请求体的内容为空，所以这里用null
*/
}
//创建ajax引擎
functioncreateXMLHttpRequest() {
var xhr = null;
try{
//IE
xhr= new ActiveXObject("microsoft.xmlhttp");
}catch(e) {
try{
//非IE
xhr= new XMLHttpRequest();
}catch(e) {
alert("您的浏览器不支持AJAX,请更换浏览器再使用!");
}
}
return xhr;
}
script>
4.XMLHttpRequest(AJAX引擎)方法或属性的小结
属性：
>>xhr.readyState
0:表示AJAX引擎才创建好，尚未初始化完毕，即open()未调用
1:表示AJAX引擎正在初始化，即调用了open()方法，尚未调用send()方法
2:表示AJAX引擎发送请求，即调用了send()方法
3:表示AJAX引擎正在接收服务端的响应，尚未接收完毕
[4]:表示AJAX引擎已经成功接收到了服务端的响应
>>xhr.status
服务端执行的响应状态码，例如：404/500/[200]/。。。
>>xhr.responseText
AJAX引擎读取服务端响应的html代码，接收服务器返回的json格式的数据也是用这个属性。
>>xhr.responseXML
AJAX引擎读取服务端响应的xml代码，
方法：
//准备发送请求
>>xhr.open(method[异步请求的方式,常用get或post，大小写不敏感],url[异步发送请求的目标端])
//真正发送请求
>>xhr.send(null[请求体的数据，如果请求体无数据，用null表示，get请求都写null])
如果对于GET请求，强行在send()方法中输入值，AJAX引擎会忽略期中的值，即服务端取不到信息
//AJAX引擎监听服务端的状态变化，该方法由服务触发，不是程序员触发
>>xhr.onreadystatechange = 匿名处理函数
//设置AJAX引擎以POST方法提交到服务端，同时对中文进行自动编码
>>xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//该代码只能在POST请求中有效，而且必须放置在open()和send()之间才有效。
5.JSON的使用
1）AJAX技术，只限于客户端，与服务端使用语言无关。
2）服务端只需要使用以下三种技术之一，就可以将数据传递到AJAX引擎中
>>HTML
>>XML
>>JSON
3)JSON和JavaScript是同一种语言的不同形式而以，JavaScript可以无需第三方jar支持，而直接解析JSON
4)使用第三方的jar包，将Java对象，转成JSON对象，再由JavaScript操作
5)将Java语言的String类型转换JavaScript的string类型，通过eval()函数
var json = eval(jsonString);
6)三种数据载体的对比：
>>XML，远程应用程序未知的情况下，[首选]XML。
>>JSON，多个Web应用需要共享数据时，[首选]JSON。
>>HTML，在当前Web应用中使用数据时，[首选]HTML。
首选，不表示只能选择。