澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

js day01

生机勃勃)什么是JavaScript【以下简单的称呼JS】

如何是AJAX【Asynchronous异步的JS和XML】,工作规律与特性

    JS是

   (1)什么是生机勃勃道:

   (1)基于对象

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

        JS本身就有部分现有的对象可供程序猿使用,比如:Array,Math,String。。。

        Web1.0时代

        JS并不拔除你能够自已按自然的准绳创设对象

 

   (2)事件驱动

   (2)什么是异步:

        JS代码写好后,供给外界接触后,方可运营,譬如:单击事件,定时实行,。。。

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

   (3)解释性

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

            每一次运转JS代码时,得必要将原代码一行意气风发行的表明实践

    Web2.0时代

        绝对编写翻译型语言(举例:Java、C++)试行进程相对一点也不快

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

   (4)基于浏览器的动态人机联作网页本事

 

            假诺JS嵌入到HTML中,能够无需服务器帮衬,间接由浏览器解释施行

   (3)什么是AJAX

            即便JS嵌入到JSP或Servlet中,必定要服务器扶持,直接由浏览器解释奉行

顾客端(特指PC浏览器)与服务器,能够在【不必刷新整个浏览器】的场所下,与服务器进行异步通信的才能

   (5)嵌入在HTML标签中

    即,AJAX是三个【局地刷新】的【异步】通讯技巧

            JS必得置于到多个叫做<script src="引进外界js文件"></script>的竹签中,方可运转

    AJAX不是崭新的言语,是二零零七年Google公司生产的生机勃勃种崭新【编制程序方式】,不是新的编制程序语言

    脚本语言

 

 

   (4)不用刷新整个页面便可与服务器通信的不二秘诀有:

 

       (A)Flash/ActionScript

二)JS中的三种类型

       (B)框架Frameset

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

       (C)iFrame(内停放框架卡塔尔(قطر‎

        number饱含正数,负数,小数

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

            string由''或""定界

         背景:中午IE5时,微软就支付出了第二个异步通信对象,叫ActiveXObject对象,

                 boolean由true或false,但js中的boolean也蕴藏更加的多景况,比如:存在表示true,不设有表示false

         Firefox等其他浏览器厂家也逐步引进异步通信对象,叫XMLHttpRequest对象,

      var num = 100;

      var str = "哈哈";

      var flag = false;

      window.alert(num);

      window.alert(str);

      window.alert(flag);

         IE的高版本,也将以此异步对象取名称为XMLHttpRequest对象,但IE有向下宽容难点,

 

         也足以使用ActiveXObject对象。

   (2)特殊类型:null,undefined

不要第三方jar包,今世中高版本浏览器中放置了这么些异步通信对象,只需经过JavaScript就可以成立

            null表示一个变量指向null

        留意:全部浏览器中都置于了异步对象,在暗中认可境况下,该异步对象并未开更创来

            undefined代表一个变量指向的值不鲜明

function createAJAX(){

var ajax = null;

try{

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

}catch(e1){

ajax = new XMLHttpRequest();

}

return ajax;

}

      var array = null;

      var student;

      alert(array);

      alert(student);

 

 

 

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

   (5)AJAX职业规律

            对象富含内置对象和自定义的靶子

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

 

 

 

   (6)AJAX满含的本领

js day01。三)JS中有两种概念函数的点子

        参见<<AJAX富含的技能.JPG>>

   (1)符合规律艺术:function mysum(num1,num2卡塔尔(قطر‎{return num1+num2;}

 

        function mysum(num1,num2){

          return num1 + num2;

      }

      var myresult = mysum(100,200);

      alert("myresult="+myresult);

   (7)AJAX开拓步骤

 

    步生机勃勃:创立AJAX异步对象,举例:createAJAX(卡塔尔

   (2)结构器方式:new Function("num1","num2","return num1+num2;"卡塔尔国

    步二:筹算发送异步央浼,举个例子:ajax.open(method,url卡塔尔(英语:State of Qatar)

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

      alert( youresult(1000,2000) );

    步三:借使是POST央求的话,必定要设置AJAX需要头,举个例子:ajax.setRequestHeader(卡塔尔国

 

          假如是GET乞求的话,没有必要设置设置AJAX央浼头

   (3)直接量或佚名或默默情势:var mysum = function(num1,num2卡塔尔(英语:State of Qatar){return num1+num2;}

    步四:真正发送央浼体中的数据到服务器,比如:ajax.send(卡塔尔

var theyresult = function(num1,num2){

                       return num1 + num2;

                    }

      alert( theyresult(10000,20000) );

步五:AJAX不断的监听服务端响应的事态变化,比方:ajax.onreadystatechange,前面写一个默默管理函数

 

    步六:在默默管理函数中,获取AJAX的多寡后,根据DOM准绳,用JS语言来操作Web页面

 

 

四)JS中有三种对象

   (8)AJAX符合用在怎么着地点

   (1)内置对象 :Date,Math,String,Array,。。。

    AJAX【适合】不用来传递多量多少,而只用来【传递少些数据】,在客户的【体验】上,【特别人性化】

      var str = new Date().toLocaleString();

      window.document.write("<font size='44' color='red'>"+str+"</font>");

    AJAX是二个和服务器无关的才能,即服务器可选用:JavaEE,.NET,PHP,。。。那一个技巧都可

 

    AJAX只管向服务器发送伏乞,同期只管接纳服务器的HTML或XML或JSON载体响应

   (2)自定义对象:Person,Card,。。。 

        服务端不能够采取转载或重定向到web页面,因为那样会起浏览器周详刷新

      function Student(id,name,sal){

          //this指向s引用

          this.id = id;

          this.name = name;

          this.sal = sal;

      }

      var s = new Student(1,"波波",7000);

      document.write("编号:" + s.id + "<br/>");

      document.write("姓名:" + s.name + "<br/>");

      document.write("薪水:" + s.sal + "<br/>");

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

 

 

   (3)浏览器对象: window,document,status,location,history。。。

 

function myrefresh(){

           window.history.go(0);

        }

AJAX应用

 

   (1)不须要刷新整个Web页面展现服务器响应的近来时间

   (4)ActiveX对象:ActiveXObject("Microsoft.XMLHTTP"),。。。

 (text/html;charset=UTF-8)

 

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

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

 

 

五)演示JS对象的本性,方法和事件的利用

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

   (1)window.location.href

 

          var url = "04_array.html";

          window.location.href = url;

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)form.submit()

   (2)基于HTML,以GET或POST形式,检查登记顾客名是还是不是在数据库中已存在(text/html;charset=UTF-8)

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

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

<hr/>

<div></div>

 

         

   (3)inputElement.onblur = 函数

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

}

}

   (4)document.createElement(“img”)

 

   (5)imgElement.style.width/height

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

 

 (text/xml;charset=UTF-8)

六)回想守旧Web应用央浼和响应特点【彰显当前时光】

<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)央浼:浏览器以HTTP公约的法子提交伏乞到服务器

 

   (2)响应:服务器以HTTP公约的措施响应内容到浏览器

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

                  注意:HTTP是WEB大众化非安全协议       

 

             HTTPS是WEB安全左券,是依赖HTTP公约的,且加了大器晚成都部队分加密等新鲜意义,常用于在线支付,或许是索要安全性较高的网址中,譬喻:12306网址    

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

}

}

                  HTTP诉求有四个部份组成:央浼行,央浼头,伏乞体

 

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

   (4)验证码检查

   (3)状态栏:有显明的进程条刷新现象,即使服务器响应一点也不快的话,进程条刷新也会变慢,IE9等中高版本浏览器,有明确转圈圈Logo

        (text/html;charset=UTF-8)

   (4)历史栏:会搜罗原本已寻访过的web页面,举办缓存

<form>

验证码:

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

<img src="image.jsp"/>

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

<span></span>

</form>

   (5)劣点:不需改换的汪洋数据,也全体刷新,造成浏览器加载和管理担当       

        

   (6)可改过的地点:让不需调换的大气数据,稳如泰山,不用缓存到历史栏中,无需任何刷新,只刷新有个别须求转移的数据区域,举例:当前时光的区域

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

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

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

        

       

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

}

}

   <script type="text/javascript">

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

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

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

          window.location.href = url; 

      }

   </script>

 

       

 

public class TimeServlet extends HttpServlet {

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

      System.out.println("TimeServlet::doGet");

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

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

      request.setAttribute("str",str);

      request.getRequestDispatcher("/06_time.jsp").forward(request,response);

   }

}

XMLHttpRequest(即:AJAX卡塔尔国对象常用事件,方法和总体性

 

   (1)事件:

七)什么是AJAX【Asynchronous异步的JS和XML】,职业规律与特征

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

   (1)什么是七只:

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

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

 

        Web1.0时代

   (2)属性:

 

    ajax.readyState==0:表示AJAX异步对象已开立好,但还尚未调用open(卡塔尔方法

澳门官方指定唯一网站,   (2)什么是异步:

 

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

    ajax.readyState==1:表示AJAX异步对象已调用open(卡塔尔(قطر‎方法,但还没调用send(卡塔尔(قطر‎方法

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

 

            Web2.0时代

    ajax.readyState==2:表示AJAX异步对象已调用send(卡塔尔国方法,但央浼尚未到达服务器端

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

 

 

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

   (3)什么是AJAX

 

                 顾客端(特指PC浏览器)与服务器,能够在【不必刷新整个浏览器】的景观下,与服务器进行异步通信的能力   

ajax.readyState==【4】:表示AJAX异步对象已经完完全全接纳到了服务器的响应信             息,但选用到的数额不明确都无庸置疑

            即,AJAX是三个【局地刷新】的【异步】通信技能

上述5种状态不是享有浏览器都风度翩翩律,但气象4每个浏览器都风华正茂致

            AJAX不是崭新的语言,是二〇〇六年Google集团推出的意气风发种崭新【编制程序格局】,不是新的编制程序语言

 

 

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

   (4)不用刷新整个页面便可与服务器通信的秘诀有:

 

       (A)Flash/ActionScript

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

       (B)框架Frameset

 

       (C)iFrame(内放置框架卡塔尔国

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

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

 

                 背景:早晨IE5时,微软就付出出了第三个异步通信对象,叫ActiveXObject对象,

   (3)方法:

                 Firefox等其他浏览器厂家也日益引进异步通信对象,叫XMLHttpRequest对象,

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

                 IE的高版本,也将以此异步对象取名称叫XMLHttpRequest对象,但IE有向下包容难题,

    AJAX异步对象思忖发送异步央浼

             也得以选拔ActiveXObject对象。

    参数风华正茂:以什么方式发送,常用的用GET或POST,大小写不灵动

                           无需第三方jar包,现代中高版本浏览器中放到了这么些异步通讯对象,只需经过JavaScript就能够创立

    参数二:发送到哪个地方去,常用Servlet或Struts2或SpringMVC来收纳,

                   注意:全数浏览器中都停放了异步对象,在暗中同意景况下,该异步对象并未开再创来

此处仅限于JavaEE学科

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:js day01

相关阅读