[AJAX]:入門小實例,走進AJAX

時間  2021-08-12
標籤 javascript css html java ajax 瀏覽器 服務器 app 異步 ide 欄目 Ajax 简体版
原文   原文鏈接

因爲考研，一段時間不摸鍵盤了，今天覆習一下AJAX。寫在51CTO，記錄個人生活點滴。javascript

實例說明：經過一步刷新的方式，將頁面輸入的內容返回到頁面並顯示。固然js很容易實現。css

一：代碼部分：       html

  1. html:部分java

 <html>ajax

 <head>瀏覽器

   <title>測試界面</title>服務器

   <meta http-equiv="pragma" content="no-cache">app

   <meta http-equiv="cache-control" content="no-cache">異步

   <meta http-equiv="expires" content="0">    ide

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

   <meta http-equiv="description" content="This is my page">

   <!--

   <linkrel="stylesheet" type="text/css" href="styles.css">

   -->

 </head>

 

 <body>

    <div id="data">

      <label for="username">用戶名：</label>

      <input type="text"id="username" size="10"name="username" />

      <br />

        <label for="psw">密碼：</label>

        <input type="password"id="psw" size="10"name="psw" />

        <br/>

        <input type="submit"id="submit" name="submit"alt="提交" onclick="javascript:submit()"/>

    </div>

    <div id="show">

               數據顯示區

    </div> 

   </script>

 </body>

</html>


2.js腳本部分


 <script type="text/javascript">

    var xmlHttp = null;

    function submit() {

       

       if(window.ActiveXObject){

          xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");

       }

       else if(window.XMLHttpRequest){

          xmlHttp = new window.XMLHttpRequest();

       }

       var userName = document.getElementById("username").value;

       var psw = document.getElementById("psw").value;

       alert(userName);

       alert(psw);

         xmlHttp.onreadystatechange= dealData;

         xmlHttp.open("post","./servlet/first",true);

         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         xmlHttp.send("username="+userName+"&psw="+psw);

   }

    function dealData(){

      if(xmlHttp.readyState == 4){

         if(xmlHttp.status == 200){

            alert("已經進入200");

            var datass =  xmlHttp.responseText;

            document.getElementById("show").innerHTML = datass;

         }

         else{

            alert("錯誤");

         }

      }

      else{

         alert("round");

      }

    </script>


3.servlet部分

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

publicclassFirst extendsHttpServlet{

 

   /**

    *

    */

   privatestaticfinallongserialVersionUID= 1L;

    @Override

   protectedvoiddoPost(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException,IOException {

       process(req, resp);

   }

    @Override

   protectedvoiddoGet(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException,IOException {

       process(req, resp);

   }

    protectedvoidprocess(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException,IOException {

       String userName = req.getParameter("username");

       String psw = req.getParameter("psw");

       System.out.println("usename:"+userName);

       PrintWriter pw = resp.getWriter();

       pw.write("username:"+userName+";psw="+psw);

       pw.flush();

      }

}

2、解釋：

   

  1. XMLHttpRequest對象是ajax異步實現的精髓，XmlHttpRequest使你可使用JavaScript向服務器提出請求並處理響應，而不阻塞用戶，使頁面不刷新便可實現更新；


2.    由於各公司對其實現不同，主要分微軟IE和非微軟IE瀏覽器（尤爲是早期的IE5,IE6，IE5 和    IE6 使用 ActiveXObject）

首先，這些對象都是內嵌在瀏覽器中，屬於window所屬，因此在獲取時應對其進行獲取，固然獲取時先進行IE版本的判斷

Var xmlHttp =null;

<!—進行IE5,ie6的判斷--->

If(window.ActiveXObject){//如果該版本，則

     XmlHttp = newwindow.ActiveXObject(「Microsoft.XMLHTTP」);

}

Else if(window.XMLHttpRequest){//如果非IE5,IE6版本

   xmlHttp = newwindow.XMLHttpRequest();

}

Else{

    Alert(「您的瀏覽器暫不支持ajax技術，請升級」);

}


3.  獲取完成，固然是使用了，先設置好所需屬性，例：

返回處理的函數（回調函數），以及須要訪問的url，傳值方式，以及所傳值的獲取等。

正如上述：

<!—獲取所需傳到後臺的參數-->

Var username = document.getElementById(「username」).value;

Var password = document.getElementById(「psw」).value;

<!—設置回調函數--->

xmlHttp.onreadystatechange = 回調函數（注意：不帶括號）;

<!—設置傳值方式以及url-->

調用xmlHttp對象去訪問地址，或後臺內容獲取數據

首先，設置get方式傳值：

Var url = 「./servlet/first?username =」+userName+「&password=」+password;

xmlHttp.open(「get」,url,true);

//發送參數值：固然get方式自己將參數拼接到url後面了，因此此處設置爲null便可

xmlHttp.send(null);

   設置爲POST傳值方式：

Var url = 「./servlet/first」;

xmlHttp.open(「post」,url,true);

可是還比get方式多了一步操做:設置http數據報文的頭部格式:即http報文中得屬性，根據須要設置便可

XmlHttp.setRequestHeader(「Content-Type」,」application/x-www-form-urlencoded」);

Post方式須要經過send(進行傳值)，因此須要將屬性值放入send()中：

Var value =」username=」+username+」&password=」+password;

xmlHttp.send(value);


4: 編寫回調函數：XMLHttpRequest函數返回類型有幾種：responseText,responseXML,responseUrl.

下面章節會分類講解，如今主要演示responseText:以幫助讀者理解ajax的整個處理過程

XMLHttpRequest類擁有一個顯示XMLHttpRequest對象狀態的屬性，即：readyState:

 When：

XMLHttpRequest.readyState = 0: 表示「XMLHttpRequest」對象的一種未初始化狀態，即：已經建立了它的對象，但未進行初始化

XMLHttpRequest.readyState = 1: 表示一種「未發送」狀態：即：XMLHttpRequest.open()方法已經調用，但還未發送。而且XMLHttpRequest已經準備好把一個請求發送到服務器

XMLHttpRequest.readyState =2: 表示一種「已發送」狀態，即：XMLHttpRequest.send()方法

                           已經調用，而且已經經過send()方法把一個請求發送到服務器端，可是尚未收到一個響應。

XMLHttpRequest.readyState=3: 表示一種「正在接收，未解析完」的狀態，即：瀏覽器已經接收完目標服務器發來的HTTP報文的相應頭部部分，但HTTP報文的消息體部分還未接收加載完

XMLHttpRequest.readyState= 4: 表示一種「已接收而且解析加載完」的狀態，可是此時因爲服務器會在返回的HTTP響應報文中 添「響應碼」以代表請求資源當前的狀態，因此這種狀況下須要再分類進行解析

 

單獨解析XMLHttpRequest.readyState= 4時的各類狀況

根據XMLHttpRequest.status屬性進行解析：

When:

XMLHttpRequest.status = 404:說明請求資源不存在

XMLHttpRequest.status = 200：表示已經順利完成訪問服務器後，順利返回未發生異常

其餘響應碼錶明的含義：請參見http協議

 

代碼書寫：

function dealMethod(){

 if(xmlHttp.readyState == 4){

       if(xmlHttp.status == 200){

      var responseData = xmlHttp.responseText；

      <!—對前臺進行操做 -->

       document.getElementById(「show」).innerHTML = responseData;

}

}

}


小弟排版不大好，請見諒哈。  

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程