Ajax原理及使用

一、ajax是什麼 javascript

ajax(asynchronouse javascript and xml) 異步的javascript xml php

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

二、ajax 的運行原理分析 數據庫

ajax更詳細的原理圖 json


三、使用ajax與服務器通訊的的步驟 服務器

  • 建立一個XMLHttpRequest對象
  • 建立url,data,經過 xmlHttpRequest.send()
  • 服務器端接收 ajax的請求,作相應處理(操做數據庫),而後返回結果
  • 客戶端經過xmlHttpRequest的屬性 reponseText , responseXML 取的數據,而後就完成局部刷新當前頁面任務

四、使用ajax完成用戶名是否存在驗證 app

registerProcess.jsp

<%@ page contentType="text/html" pageEncoding="utf-8"%>
<%
  String username = request.getParameter("username");
  if("dahao".equals(username)){ //3號線
	  out.print("用戶名不可用");
  }
  else out.print("用戶名可用");
%>
register_get.html

使用get方式向服務器提交請求

<html>
<head>
    <title>用戶註冊</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript">
        //建立ajax引擎
        function getXmlHttpObject(){

            var xmlHttpRequest;
            if(window.ActiveXObject){
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else{
                xmlHttpRequest = new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }

        function $(id) {
            return document.getElementById(id);
        }

        //驗證用戶名是否存在
        var myXmlHttpRequest = "";
        function checkUser() {
            myXmlHttpRequest = getXmlHttpObject(); //1號線

            //判斷是否建立成功
            if (myXmlHttpRequest) {
                //經過myXmlHttpRequest對象發送請求到服務器的某個頁面
                //第一個參數表示請求的方式,「get」/「post」
                //第二個參數指定URL,對哪一個頁面發出ajax請求(本質仍然是http請求)
                //第三個參數true表示使用異步機制,false即不使用
                var url = "/ajax/registerProcess.jsp?username=" + $("username").value;
                //打開請求
                myXmlHttpRequest.open("get", url, true);

                //指定回調函數,process是函數名
                myXmlHttpRequest.onreadystatechange = process;

                //發送請求,若是是get請求,填入null便可;若是是post請求,則填入實際的數據
                myXmlHttpRequest.send(null);  //2號線
            }
        }

        //回調函數
        function process() {
            //window.alert("函數被調用" + myXmlHttpRequest.readyState);
            if(myXmlHttpRequest.readyState == 4) {  //4號線
                //取出服務器返回的值
                //window.alert("服務器返回:" + myXmlHttpRequest.responseText);

                $("myres").value = myXmlHttpRequest.responseText;
            }
        }
    </script>
</head>

<body>
<form action="???" method="post">
    用戶名字:<input type="text" onblur="checkUser();" name="username1" id="username">
    <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>
register_post.html

使用post方式向服務器提交請求

<html>
<head>
    <title>用戶註冊</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript">
        //建立ajax引擎
        function getXmlHttpObject(){

            var xmlHttpRequest;
            if(window.ActiveXObject){
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else{
                xmlHttpRequest = new XMLHttpRequest();
            }
            return xmlHttpRequest;
        }

        function $(id) {
            return document.getElementById(id);
        }

        //驗證用戶名是否存在
        var myXmlHttpRequest = "";
        function checkUser() {
            myXmlHttpRequest = getXmlHttpObject(); //1號線

            //判斷是否建立成功
            if (myXmlHttpRequest) {
                //經過myXmlHttpRequest對象發送請求到服務器的某個頁面
                //第一個參數表示請求的方式,「get」/「post」
                //第二個參數指定URL,對哪一個頁面發出ajax請求(本質仍然是http請求)
                //第三個參數true表示使用異步機制,false即不使用
                var url = "/ajax/registerProcess.jsp";
                //這個是要發送的數據
                var data = "username="+$("username").value;
                //打開請求
                myXmlHttpRequest.open("post", url, true);
                //使用post方式發送時,這句話是必需的
				myXmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //指定回調函數,process是函數名
                myXmlHttpRequest.onreadystatechange = process;

                //發送請求,若是是get請求,填入null便可;若是是post請求,則填入實際的數據
                myXmlHttpRequest.send(data);  //2號線
            }
        }

        //回調函數
        function process() {
            //window.alert("函數被調用" + myXmlHttpRequest.readyState);
            if(myXmlHttpRequest.readyState == 4) {  //4號線
                //取出服務器返回的值
                //window.alert("服務器返回:" + myXmlHttpRequest.responseText);

                $("myres").value = myXmlHttpRequest.responseText;
            }
        }
    </script>
</head>

<body>
<form action="???" method="post">
    用戶名字:<input type="text" onblur="checkUser();" name="username1" id="username">
    <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>
運行結果以下:
相關文章
相關標籤/搜索