Ajax的使用澳门新葡亰赌995577:

       (B)
缺点:如果需要更新WEB页面中的很多处地方,HTML不太方便,同时innerHTML属性不是DOM的标准,不能操作XML

<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="width:111px"><option>广州</option></select>

citySelectElement.appendChild(optionElement);

}

}

}

}

}

}

</script>

 

 

   (3)复合类型:函数,对象,数组

这里只限于JavaEE学科

 

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

 

 

       

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

 (text/html;charset=UTF-8)

 

 

 

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

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

   (6)AJAX包含的技术

<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>

        相对编译型语言(例如:Java、C++)执行速度相对较慢

        项目中:Web1.0为主(整个浏览器刷新),Web2.0为辅(浏览器局部刷新)

   (7)AJAX开发步骤

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

                  HTTP请求有三个部份组成:请求行,请求头,请求体

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();

}

}

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

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

 

 

  
(5)缺点:不需变化的大量数据,也全部刷新,造成浏览器加载和处理负担       

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

 

         

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

   (5)AJAX工作原理

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

 

 

 

       

 

   (4)验证码检查

    步一:创建AJAX异步对象,例如:createAJAX()

 

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

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

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

      var youresult = new Function("num1","num2","return num1+num2");

      alert( youresult(1000,2000) );

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

                 
注意:innerHTML在xml中不能使用,用firstChild.nodeValue替代

        

 

   (6)AJAX包含的技术

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

当前时间:<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>

 

 

 

       

AJAX应用

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

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

    JS是

 

        (text/html;charset=UTF-8)

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

                  HTTP响应有三个部份组成:响应行,响应头,响应体 
                            

 

   (2)响应:服务器以HTTP协议的方式响应内容到浏览器

 

  
(6)可改进的地方:让不需变化的大量数据,原封不动,不用缓存到历史栏中,无需全部刷新,只刷新某些需要变化的数据区域,例如:当前时间的区域

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

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

 

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

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

 

function createAJAX(){

var ajax = null;

try{

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

}catch(e1){

ajax = new XMLHttpRequest();

}

return ajax;

}

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();

   }

}

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

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

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();

}

}

           
如果JS嵌入到HTML中,可以不需要服务器支持,直接由浏览器解释执行

 (text/xml;charset=UTF-8)

  
(3)状态栏:有明显的进度条刷新现象,如果服务器响应较慢的话,进度条刷新也会变慢,IE9等中高版本浏览器,有明显转圈圈图标

       (A)Flash/ActionScript

       

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

   (5)imgElement.style.width/height

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

 

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

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

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

 

        Web1.0时代

   (2)事件驱动

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

  
(A)优点:是种通用的普通字符串格式,任何技术都能解析,标签名可以任意,使用DOM标准规则能够解析XML的任何部分

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

            
HTTPS是WEB安全协议,是基于HTTP协议的,且加了一些加密等特殊功能,常用于在线支付,或者是需要安全性较高的网站中,例如:12306网站    

 

二)JS中的三种类型

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

 

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

   (1)请求:浏览器以HTTP协议的方式提交请求到服务器

<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>

          var url = "04_array.html";

          window.location.href = url;

   (7)AJAX开发步骤

            ajax.send(content)

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

   (5)嵌入在HTML标签中

 

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

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

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

    Web2.0时代

   当前时间:<span>${requestScope.str}</span><br/>

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

 

 

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

<form action="/js-day01/04_array.html" method="POST">

      <input type="button" value="提交到服务端" onclick="doSubmit()"/>

   </form>

   <script type="text/javascript">

      function doSubmit(){

          //表单提交

          document.forms[0].submit();

      }

   </script>

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

 

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

       
JS本身就有一些现成的对象可供程序员使用,例如:Array,Math,String。。。

 

 

 

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

   (4)验证码检查

 

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

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

   (8)AJAX适合用在什么地方

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

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

       (B)框架Frameset

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

            每次运行JS代码时,得需要将原代码一行一行的解释执行

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

       

 

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

      <option>选择省份</option>

      <option>广东</option>

      <option>湖南</option>

      <option>湖北</option>

   </select>

  

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

      <option>选择城市</option>

   </select>

 

function createAJAX(){

   var ajax = null;

   try{

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

   }catch(e1){

      ajax = new XMLHttpRequest();

   }

   return ajax;

}

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

<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="width:111px"><option>广州</option></select>

                          citySelectElement.appendChild(optionElement);

                       }

                   }

                }

             }

          }

      }

   </script>

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

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

 

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

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

   (2)XML

   (1)什么是同步:

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

(3)基于XML,以POST方式,完成省份-城市二级下拉联动

            对象包含内置对象和自定义的对象

   (2)属性:

   (4)不用刷新整个页面便可与服务器通讯的办法有:

       (C)iFrame(内嵌入框架)

 

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

 

       (B)框架Frameset

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

   (2)什么是异步:

 

        

三)JS中有三种定义函数的方式

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

   (3)解释性

 

   (3)inputElement.onblur = 函数

         也可以使用ActiveXObject对象。

一)什么是JavaScript【以下简称JS】

   (3)方法:

 (text/xml;charset=UTF-8)

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

<option>选择省份</option>

<option>广东</option>

<option>湖南</option>

<option>湖北</option>

</select>

 

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

<option>选择城市</option>

</select>

   (1)事件:

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

 

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

<hr/>

<div></div>

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

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

   (8)AJAX适合用在什么地方

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

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

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

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

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

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

   (3)什么是AJAX

   (1)基本类型:number,string,boolean

        (text/html;charset=UTF-8)

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

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

      
(B)缺点:XML文件格式相当严格,出错后,responseXML属性返回NULL,如果XML文件过长,导致解析效率低下

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

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

<form>

验证码:

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

<img src="image.jsp"/>

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

<span></span>

</form>

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

 

      var num = 100;

      var str = "哈哈";

      var flag = false;

      window.alert(num);

      window.alert(str);

      window.alert(flag);

    ajax.send(content)

 

 

 

   (1)事件:

   (4)document.createElement(“img”)

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

       
项目中:Web1.0为主(整个浏览器刷新),Web2.0为辅(浏览器局部刷新)

 

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

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

 

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();

}

}

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

 

 

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