Ajax的使用

什么是AJAX【Asynchronous异步的JS和XML】，工作原理与特点

   （1）什么是同步：

    请求1->响应1->请求2->响应2->

        Web1.0时代

   （2）什么是异步：

    请求1->请求2->请求3->响应1->响应2->响应3->

    请求1->响应1->请求2->请求3->响应2->响应3->

    Web2.0时代

        项目中：Web1.0为主（整个浏览器刷新），Web2.0为辅（浏览器局部刷新）

   （3）什么是AJAX

客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

    即，AJAX是一个【局部刷新】的【异步】通讯技术

    AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言

   （4）不用刷新整个页面便可与服务器通讯的办法有：

       （A）Flash/ActionScript

       （B）框架Frameset

       （C）iFrame（内嵌入框架)

       （D）XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

         背景：早上IE5时，微软就开发出了第一个异步通讯对象，叫ActiveXObject对象，

         Firefox等其它浏览器厂商也慢慢引入异步通讯对象，叫XMLHttpRequest对象，

         IE的高版本，也将这个异步对象取名叫XMLHttpRequest对象，但IE有向下兼容问题，

         也可以使用ActiveXObject对象。

无需第三方jar包，现代中高版本浏览器中内置了这个异步通讯对象，只需通过JavaScript就可以创建

        注意：所有浏览器中都内置了异步对象，在默认情况下，该异步对象并没有创建出来

function createAJAX(){

var ajax = null;

try{

ajax = new ActiveXObject("microsoft.xmlhttp");

}catch(e1){

ajax = new XMLHttpRequest();

}

return ajax;

}

   （5）AJAX工作原理

        参见<<AJAX工作原理.JPG>>

   （6）AJAX包含的技术

        参见<<AJAX包含的技术.JPG>>

   （7）AJAX开发步骤

    步一：创建AJAX异步对象，例如：createAJAX()

    步二：准备发送异步请求，例如：ajax.open(method,url)

    步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

          如果是GET请求的话，无需设置设置AJAX请求头

    步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

    步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

   （8）AJAX适合用在什么地方

    AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】

    AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP，。。。这些技术都可

    AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应

        服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新

    即只能以流的方式响应给浏览器

AJAX应用

   （1）无需刷新整个Web页面显示服务器响应的当前时间

 （text/html;charset=UTF-8）

当前时间:<span></span><br/>

<input type="button" value="异步方式提交"/>

<script type="text/javascript">

//定位button按钮，同时添加单击事件

document.getElementsByTagName("input")[0].onclick = function(){

//NO1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包）

var ajax = createAJAX();//0

//NO2)AJAX异步对象准备发送请求

var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime();

var method = "GET";

ajax.open(method,url);//1

//NO3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示

var content = null;

ajax.send(content);//2

//----------------------------------------等待

//NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数

//0-1-2-3-4,这些是可以触发函数的

//4-4-4-4-4，这些是不可以触发函数的

//以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的

ajax.onreadystatechange = function(){

//如果AJAX状态码为4

if(ajax.readyState == 4){

//如果服务器响应码是200

if(ajax.status == 200){

//NO5）从AJAX异步对象中获取服务器响应的结果

var str = ajax.responseText;

//NO6）按照DOM规则，将结果动态添加到web页面指向的标签中

document.getElementsByTagName("span")[0].innerHTML = str;

}

}

}

}

</script>

public class TimeServletAjax extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String str = sdf.format(new Date());

//注意：在Web2.0时代，即异步方式下，不能用转发或重定向

//因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新

//所以得用以输出流的方式将服务器的结果输出到浏览器

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(str);

pw.flush();

pw.close();

}

}

   （2）基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在（text/html;charset=UTF-8）

输入用户名[POST]：<input type="text" maxlength="8"/>光标移出后，立刻显示结果

<hr/>

<div></div>

         

public class RegisterServletPost extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String username = request.getParameter("username");

String tip = "images/MsgSent.gif";

if("杰克".equals(username)){

tip = "images/MsgError.gif";

}

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(tip);

pw.flush();

pw.close();

}

}

（3）基于XML，以POST方式，完成省份-城市二级下拉联动

 （text/xml;charset=UTF-8）

<select id="province" style="111px">

<option>选择省份</option>

<option>广东</option>

<option>湖南</option>

<option>湖北</option>

</select>

<select id="city" style="111px">

<option>选择城市</option>

</select>

<script type="text/javascript">

//定位省份下拉框，同时添时内容改变事件

document.getElementById("province").onchange = function(){

//清除城市下拉框中的内容除第一项外

var citySelectElement = document.getElementById("city");

citySelectElement.options.length = 1;

//获取选中的省份

var i = this.selectedIndex;

var optionElement = this[i];

var province = optionElement.innerHTML;

//如果不是"选择省份"的话

if("选择省份" != province){

//NO1)

var ajax = createAJAX();

//NO2）

var method = "POST";

var url = "${pageContext.request.contextPath}/ProvinceCityServlet?id="+new Date().getTime();

ajax.open(method,url);

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

//NO3)

var content = "province="+province;

ajax.send(content);

//-------------------------------------------------

//NO4）

ajax.onreadystatechange = function(){

if(ajax.readyState == 4){

if(ajax.status == 200){

//NO5)

var xmlDocument = ajax.responseXML;

//NO6）按照dom规则，解析xml文件中的所有内容

var cityElementArray = xmlDocument.getElementsByTagName("city");

var size = cityElementArray.length;

for(var i=0;i<size;i++){

var cityElement = cityElementArray[i];

//innerHTML只能用于html和jsp页面，不能用于xml页面

//在xml页面我们通常用firstChild.nodeValue去替代innerHTML

var city = cityElement.firstChild.nodeValue;

//<option></option>

var optionElement = document.createElement("option");

//<option>广州</option>

optionElement.innerHTML = city;

//<select id="city" style="111px"><option>广州</option></select>

citySelectElement.appendChild(optionElement);

}

}

}

}

}

}

</script>

public class ProvinceCityServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

this.doPost(request,response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

String province = request.getParameter("province");

response.setContentType("text/xml;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write("<?xml version='1.0' encoding='UTF-8'?>");

pw.write("<root>");

if("广东".equals(province)){

pw.write("<city>广州</city>");

pw.write("<city>深圳</city>");

pw.write("<city>中山</city>");

pw.write("<city>珠海</city>");

}else if("湖南".equals(province)){

pw.write("<city>长沙</city>");

pw.write("<city>株洲</city>");

pw.write("<city>张家界</city>");

}else if("湖北".equals(province)){

pw.write("<city>武汉</city>");

pw.write("<city>黄岗</city>");

}

pw.write("</root>");

pw.flush();

pw.close();

}

}

   （4）验证码检查

        （text/html;charset=UTF-8）

<form>

验证码：

<input type="text" maxlength="4" size="4"/>

<img src="image.jsp"/>

<input type="button" value="看不清" size="2"/>

<span></span>

</form>

        

<script type="text/javascript">

//定位按钮，同时添加单击事件

document.getElementsByTagName("input")[1].onclick = function(){

//定位img标签，修改src属性

document.images[0].src = "image.jsp?id="+new Date().getTime();

//清空span标签中的内容

var spanElement = document.getElementsByTagName("span")[0];

spanElement.innerHTML = "";

//清空文本框中的内容

document.getElementsByTagName("input")[0].value = "";

}

</script>

<script type="text/javascript">

//定位文本框，同时添加键盘弹起事件

document.getElementsByTagName("input")[0].onkeyup = function(){

//获取输入的验证码

var checkcode = this.value;

//去空格

checkcode = trim(checkcode);

//获取验证码的长度

var size = checkcode.length;

//如果长度为4

if(size == 4){

//NO1)

var ajax = createAJAX();

//NO2)

var method = "POST";

var url = "${pageContext.request.contextPath}/CheckcodeServlet?id="+new Date().getTime();

ajax.open(method,url);

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

//NO3)

var content = "checkcode=" + checkcode;

ajax.send(content);

//--------------------------------------------

//NO4)

ajax.onreadystatechange = function(){

if(ajax.readyState == 4){

if(ajax.status == 200){

//NO5)

var imagePath = ajax.responseText;

//NO6)

var imgElement = document.createElement("img");

imgElement.src = imagePath;

imgElement.style.width = "14px";

imgElement.style.height = "14px";

var spanElement = document.getElementsByTagName("span")[0];

spanElement.innerHTML = "";

spanElement.appendChild(imgElement);

}

}

}

}else{

//清空span标签中的内容

var spanElement = document.getElementsByTagName("span")[0];

spanElement.innerHTML = "";

}

}

</script>

        

public class CheckcodeServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

//获取客户端输入的验证码

String checkcodeClient = request.getParameter("checkcode");

//获取服务端产生的验证码

HttpSession httpSession = request.getSession();

String checkcodeServer = (String) httpSession.getAttribute("CHECKNUM");

//二个验证码进行比较

String tip = "images/MsgError.gif";

if(checkcodeClient!=null && checkcodeServer!=null && checkcodeClient.equals(checkcodeServer)){

tip = "images/MsgSent.gif";

}

//以流的方式输出tip变量

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(tip);

pw.flush();

pw.close();

}

}

XMLHttpRequest(即：AJAX)对象常用事件，方法和属性

   （1）事件：

        ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，

        是由服务器程序触发，不是程序员触发

   （2）属性：

    ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法

    ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法

    ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端

    ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。

ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信             息，但接收到的数据不一定都正确

上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同

        ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常

        ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据

    ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据

   （3）方法：

    ajax.open(method,url,可选的boolean值)

    AJAX异步对象准备发送异步请求

    参数一：以什么方式发送，常用的用GET或POST，大小写不敏感

    参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，

这里只限于JavaEE学科

    参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端

            如果设置为false，表示AJAX对象以【同步】的方式提交到服务端

        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")

    表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效

    ajax.send(content)

    AJAX异步对象真正发送异步请求

    参数一：表示HTTP【请求体】中的内容

如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL

如果是POST方式：content != null，例如：username=jack&password=123&role=admin