ajax小结

一）回顾传统Web应用请求和响应特点
【显示当前时间】
1）浏览器发送请求时，会将原来页面的全部数据丢弃，等待服务端的响应结果
2）服务端根据业务逻辑的处理情况，可能会影响速度
3）浏览器接到响应结果后，再次重新整个页面
即使只有一小处地方有变化，其它地方无变化，这时浏览器也需要重新全部加载
传统方式下，浏览器的加载数据的压力会比较大，加载时间相对比较慢

二）什么是AJAX(异步JavaScript和Xml)
（1）同步：当一个请求发送后，必须等待刚刚那个请求的响应；只有响应完毕后，才能发送下一个请求
请求1->响应1->请求1->响应1->... ... 单线程 WEB1.0时代 传统WEB应用 有规律
（2）异步：当一个请求发送后，不必等待刚刚那个请求的响应，就可以发送下一个请求。
请求1->请求2->响应1->请求3->响应2->响应3... ... 多线程 WEB2.0时代 现代WEB应用 有规律
总之，所有请求，最终都会响应
注意：现代WEB项目全是以1.0为主，2.0为辅。
（3）AJAX
就是WEB2.0时代是技术体现，所有的浏览器请求，都是以异步的方式发送到服务器。
（4）AJAX技术体系结构
参见<<AJAX技术体系结构.JPG>>

三）为什么使用AJAX
（1）减轻浏览器和服务器的发送和响应压力与提高速度时，可以使用AJAX技术
（2）让用户休验无刷新的浏览器与服务端交互的话，可以使用AJAX技术
（3）以异步方式提交浏览器的数据时，可以使用AJAX
[本质]：AJAX本质是属于B/S结构的，
效果：C/S结构。

*四）AJAX的特点
1）有些浏览器（例如IE）会缓存上一次发送URL请求和对应的结果，如果第二次请求与第一次一样的话，
这类浏览器直接使用上次缓存的结果，而不会发送到服务器。 因此最好在URL请求后，加上一次时间随机数，
以确保每次请求有不同的URL。
2）对于GET请求，非英文和非数字，都要进行URL编码，服务端也要进行URL解码
3）AJAX技术，只限于WEB页面（jsp，html）, 与服务端技术无关。

*五）AJAX实战
（1）无刷新显示服务器响应的当前时间
（2）基于HTML普通字符串，以GET和POST方式检查注册用户名是否存在
（3）基于XML，二级下拉联动
（4）基于JSON，二级下拉联动
（5）基于第三方工具生成JSON，二级下拉联动

**六）XMLHttpRequest(即：AJAX引擎)对象常用事件，方法和属性
（1）事件：
xhr.onreadystatechange：当AJAX引警的状态一旦改变，由系统触发，不是由程序员触发

（2）属性：
xhr.readyState==0：已创建AJAX引警，但未调用open()方法
xhr.readyState==1：已调用open()方法，但未调用send()方法
xhr.readyState==2：已调用send()方法，请求正发往服务端的路上
xhr.readyState==3：已接收到请求，处理完毕后，正在响应浏览器
*xhr.readyState==4：浏览器已完全彻底接收到了服务端的响应
注意状态4，只强调了浏览器接收到了响应，但并未说明响应是正确的
*xhr.status==200：响应完全正确
xhr.status==404
xhr.status==500
xhr.status==304：服务端要求浏览器找缓存
这些状态码与WEB状态码一样
xhr.responseText：表示接收服务端以普通字符串响应的数据

（3）方法：
xhr.open(method,url,可选的boolean值)
method表示方式请求的方式，常用的GET和POST
url表示方送到哪个地方去，通常是Servlet&Struts2
可选的boolean值：
true:表示以异步的方式发送，默认
false:表示以同步的方式发送，即又回到WEB1.0时代
xhr.send(发送在请求体中的数据)
如果是GET请求：请求体为null,就算带数据，服务端也不能接收到
如果是POST请求：请求体为非null，格式：username=jack&password=123&role=admin
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
如果是POST的请求的话，一定要设置请求头，目的是让浏览器自动进行URL编码
这句话，一定要放在open()和send()之间才有作用

规则：如果无数据传统，才用GET请求；如果有数据传统，才用POST请求

*七）JSON的使用
（1）什么是JSON（JavaScript原始生态的对象）
JSON本质是就一JS的另一种表现形式而言，JS完全可以直接操作JSON，而不需要第三方的jar包
（2）JSON的作用
（3）JSON的语法
（4）使用第三方工具，将JavaBean或集合转成JSON字符串

//-------------------------------------------------------面试题
xhr.open(method,url,TRUE);//多线程，提倡，true小写
xhr.send(null);
xhr.onreadystatechange=function(){}

或

xhr.open(method,url,FALSE);//单线程，false小写
xhr.send(null);
xhr.onreadystatechange=function(){}