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

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

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

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

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

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

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

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

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

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

//——————————————————-面试题 @H_403_2@ xhr.open(method,TRUE);//多线程，提倡，true小写 @H_403_2@ xhr.send(null);

xhr.onreadystatechange=function(){}

或

xhr.open(method,FALSE);//单线程，false小写 @H_403_2@ xhr.send(null);

xhr.onreadystatechange=function(){}