Ajax技術

時間 2019-11-26

標籤 ajax 技術欄目 Ajax 简体版

原文原文鏈接

一、什麼是ajaxjavascript

① ajax(asynchronouse javascript and xml) 異步的javascript 和 xmlphp

② 是7種技術的綜合,它包含了七個技術( javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一個粘合劑,css

③ ajax是一個與服務端語言無關的技術. 便可以使用在(php/java ee/.net網站/ asp)html

④ ajax能夠給客戶端返回三種格式數據(文本格式，xml , json格式)java

⑤ 無刷新數據交換技術有如下: flash, java applet, 框架, iframe, ajax)node

二、ajax運行原理：ajax

使用ajax與服務器通訊的的步驟（如上方右圖所示）數據庫

① 建立一個XMLHttpRequest對象json

② 建立url,data,經過 xmlHttpRequest.send()數組

③ 服務器端接收 ajax的請求,作相應處理(操做數據庫)，而後返回結果

④ 客戶端經過xmlHttpRequest的屬性 reponseText , responseXML 取的數據，而後就完成局部刷新當前頁面任務

三、ajax在哪裏用的多

1 動態加載數據，按需取得數據。【樹形菜單、聯動菜單.../省市聯動】

2 改善用戶體驗。【輸入內容前提示、帶進度條文件上傳...】

3 電子商務應用。 【購物車、郵件訂閱...】

4 訪問第三方服務。 【訪問搜索服務、rss閱讀器】

5. 數據的佈局刷新

四、u 經典的案例

1. 使用 ajax完成用戶名的驗證

用戶註冊頁面（register頁面）Gert方式請求

 <script type="text/javascript">
 var xmlhttprequest;
 function sendRequest(){
  var username=document.getElementById("username").value;
  alert(username);
  if(window.ActiveXObject){
      xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
      xmlhttprequest = new XMLHttpRequest();
  }
  if(xmlhttprequest){
   xmlhttprequest.open("GET","/AajxTest/AjaxTest2.do?method=ajaxRequest&name="+username,true)
   xmlhttprequest.onreadystatechange=chuli;
   xmlhttprequest.send();
   
  }
 
 }
 function chuli(){
  if(xmlhttprequest.readyState == 4){
   if(xmlhttprequest.status==200){
    document.getElementById("myres").value=xmlhttprequest.responseText;
     alert(xmlhttprequest.responseText);
   }else{
    document.getElementById("myres").value=xmlhttprequest.responseText;
   }
  }
 }
 
 
 
 </script>
  </head>
  
  <body>
   <form action="#" method="post">
    用戶名字:<input type="text" name="username1" id="username"><input type="button" onclick="sendRequest();" value="驗證用戶名">
    <input style="border-width: 0;color:red" type="text" id="myres">
    <br/>
    用戶密碼:<input type="password" name="password"><br>
    電子郵件:<input type="text" name="email"><br/>
    <input type="submit" value="用戶註冊">
    </form>
  </body>
</html>

Action裏的代碼：

public void ajaxRequest(ActionMapping arg0, ActionForm arg1,

  HttpServletRequest arg2, HttpServletResponse arg3) throws Exception {

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

 String param = arg2.getParameter("name");

 System.out.println(param);

 PrintWriter out = arg3.getWriter();

 if(param != null && !param.equals("cws")){

  out.print("用戶名可用");

 }else{

  out.print("用戶名不可用");

 }

 out.close();

 //return null;

}

u ajax的post方式請求

在前面案例咱們修改一下 ：

關鍵代碼

var url="/ajax/registerProcess.php";
                     //這個是要發送的數據
                     var data="username="+$('username').value;
                     //打開請求.
                     myXmlHttpRequest.open("post",url,true);
                     //還有一句話，這句話必須.
                     myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                     //指定回調函數.chuli是函數名
                     myXmlHttpRequest.onreadystatechange=chuli;
 
                     //真的發送請求,若是是get請求則填入 null便可
                     //若是是post請求，則填入實際的數據
                     myXmlHttpRequest.send(data);
registerPro.php關鍵碼 ：
$username=$_POST['username'];

u ajax如何處理返回的數據格式是xml的狀況

register.php
 
<html>
<head>
<title>用戶註冊</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
 
       //建立ajax引擎
       function getXmlHttpObject(){
              
              var xmlHttpRequest;
              //不一樣的瀏覽器獲取對象xmlhttprequest 對象方法不同
              if(window.ActiveXObject){
                     
                     xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
                     
              }else{
 
                     xmlHttpRequest=new XMLHttpRequest();
              }
 
              return xmlHttpRequest;
 
       }
       var myXmlHttpRequest="";
 
       //驗證用戶名是否存在
       function checkName(){
              
              myXmlHttpRequest=getXmlHttpObject();
 
              //怎麼判斷建立ok
              if(myXmlHttpRequest){
                     
                     //經過myXmlHttpRequest對象發送請求到服務器的某個頁面
                     //第一個參數表示請求的方式, "get" / "post"
                     //第二個參數指定url,對哪一個頁面發出ajax請求(本質仍然是http請求)
                     //第三個參數表示 true表示使用異步機制,若是false表示不使用異步
                     var url="/ajax/registerProcess.php";
                     //這個是要發送的數據
                     var data="username="+$('username').value;
                     //打開請求.
                     myXmlHttpRequest.open("post",url,true);
                     //還有一句話，這句話必須.
                     myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                     //指定回調函數.chuli是函數名
                     myXmlHttpRequest.onreadystatechange=chuli;
 
                     //真的發送請求,若是是get請求則填入 null便可
                     //若是是post請求，則填入實際的數據
                     myXmlHttpRequest.send(data); 
 
 
              }
       }
 
       //回調函數
       function chuli(){
              
              //window.alert("處理函數被調回"+myXmlHttpRequest.readyState);
              //我要取出從registerPro.php頁面返回的數據
              if(myXmlHttpRequest.readyState==4){
                     
                     //取出值,根據返回信息的格式定.text
                     //window.alert("服務器返回"+myXmlHttpRequest.responseText);
 
                     //$('myres').value=myXmlHttpRequest.responseText;
 
                     //看看若是取出 xml格式數據
                     //window.alert(myXmlHttpRequest.responseXML);
              
                     //獲取mes節點
                     var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
 
                     //取出mes節點值
                     //window.alert(mes.length);
                     //mes[0]->表示取出第一個mes節點
                     //mes[0].childNodes[0]->表示第一個mes節點的第一個子節點
                     var mes_val=mes[0].childNodes[0].nodeValue;
 
                     $('myres').value=mes_val;
              }
       }
 
       //這裏咱們寫一個函數
       function $(id){
              return document.getElementById(id);
       }
</script>
</head>
<body>
       <form action="???" method="post">
    用戶名字:<input type="text"    name="username1" id="username"><input type="button" onclick="checkName();"  value="驗證用戶名">
    <input style="border-width: 0;color: red" type="text" id="myres">
    <br/>
    用戶密碼:<input type="password" name="password"><br>
    電子郵件:<input type="text" name="email"><br/>
    <input type="submit" value="用戶註冊">
    </form>
     <form action="???" method="post">
    用戶名字:<input type="text" name="username2" >
   
    <br/>
    用戶密碼:<input type="password" name="password"><br>
    電子郵件:<input type="text" name="email"><br/>
    <input type="submit" value="用戶註冊">
    </form>
 
</body>
</html>
 
 
regisgerProcess.php
 
<?php
       
       //這裏兩句話很重要,第一講話告訴瀏覽器返回的數據是xml格式
       header("Content-Type: text/xml;charset=utf-8");
       //告訴瀏覽器不要緩存數據
       header("Cache-Control: no-cache");
 
       //接收數據(這裏要和請求方式對於 _POST 仍是 _GET)
       $username=$_POST['username'];
 
       //這裏咱們看看如何處理格式是xml
       $info="";
       if($username=="shunping"){
              $info.="<res><mes>用戶名不能夠用,對不起</mes></res>";//注意，這裏數據是返回給請求的頁面.
       }else{
              $info.="<res><mes>用戶名能夠用,恭喜</mes></res>";
       }
 
       echo $info;
       
 
?>   
 
u  ajax如何處理json數據格式
 
①    json的格式以下 ：
 
"{屬性名:屬性值,屬性名:屬性值,.... }"
由於json數據是原生態數據，所以這種數據格式很穩定，並且描述能力強,咱們建議你們使用json格式
 
②    json數據格式的擴展
 
若是服務器返回的json 是多組數據，則格式應當以下:
 
$info="[{"屬性名":"屬性值",...},{"屬性名":"屬性值",...},....]";
 
在xmlhttprequest對象接收到json數據後，應當這樣處理
 
 
//轉成對象數組
 
var reses=eval("("+xmlHttpRequest.responseText+")");
 
//經過reses能夠取得你但願的任何一個值
 
reses[?].屬性名
 
 
③    更加複雜的json數據格式
 
<script language="JavaScript">
     var people ={
            "programmers":
              [
                {"firstName": "Brett", "email": "brett@newInstance.com" },
                {"firstName": "Jason", "email": "jason@servlets.com" }
              ],
            "writer":
                     [
                            {"writer":"宋江","age":"50"},
                            {"writer":"吳用","age":"30"}
                     ],
                     "sex":"男"
                      
};
 
 
window.alert(people.programmers[0].firstName);
window.alert(people.programmers[1].email);
 
window.alert(people.writer[1].writer);
window.alert(people.sex);
 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。