AJAX 的操做和調用

時間 2019-11-11

標籤 ajax 調用欄目 Ajax 简体版

原文原文鏈接

AJAX(異步數據處理): Asynchronous （異步）的JavaScript And XML ( 局部刷新技術 )php

　　ajax能作什麼:html

　　　　頁面實現的效果是局部刷新，這種效果都是ajax操做的java

　　　　用戶名在線監測，搜索提示等等ajax

　　　　無刷新分頁,滾動分頁加載，微博異步數據發佈數據庫

　　　　ajax聊天室瀏覽器

　　ajax優勢：緩存

　　　　速度快：ajax引擎緩存了重複提交的數據服務器

　　　　體驗好app

　　　　減小了服務器和數據庫的讀寫壓力dom

　　ajax數據處理流程：

　　　　服務器端: PHP+MYSQL+EMAIL(.net,java....) m=news

　　　　中間：xmlhttp協議

　　　　瀏覽器端：JavaScript + CSS +HTML

ajax數據處理流程:

　　JavaScript 獲得表單中的數據，將須要提交的數據傳遞給ajax引擎（xmlhttp協議的解析器）ajax引擎會緩存用戶提交的數據，而且將須要提交的數據進行提交。

　　數據提交服務器，服務器處理完畢後，會將數據經過xmlhttp協議對象返回到瀏覽器中，ajax引擎會將返回的數據和提交的數據匹配，而後緩存到ajax引擎中，而後js從ajax引擎中獲取數據.

　　數據第二次提交時，若是提交的數據已經提交過，ajax引擎有匹配的返回數據，那麼ajax引擎則不會再向服務器提交數據，而會從ajax引擎直接將原來緩存的數據直接返回。

ajax操做步驟:

　　建立xmlhttp協議對象:

　　IE: activeXobject插件 IE8上用的是FF系列的xmlhttprequest對象

　　FF: xmlhttprequest對象(類)

var http_request= false;
    if(window.XMLHttpRequest) { //FF Chrome 瀏覽器  
        http_request = new XMLHttpRequest(); 
    }else if (window.ActiveXObject) { // IE瀏覽器  IE9 如下
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");  
        } catch (es) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");  
            } catch (es) {}
        }
    }
IETester

　　設置監視句柄:監控整個的ajax數據處理流程

　　　　readyState: 獲取當前ajax的處理狀態

　　　　　　不一樣的瀏覽器狀態不一樣，有的是1,4有的是1234

　　　　　　0 未建立ajax對象

　　　　　　1 ajax對象建立成功，尚未準備發送的數據

　　　　　　2 ajax發送的數據已經準備完畢，尚未發送

　　　　　　3 ajax已經發送數據，尚未接受完數據

　　　　　　4 ajax接受完畢數據

　　　　readyState的狀態數值，每更改一次，都會觸發一次的onreadystatechange

　　　　ajax對象.onreadystatechange = 方法名;

　　準備發送的數據:

　　　　ajax對象.open(「提交的方式」,」提交頁面和數據」,同步/異步)

　　　　提交方式: GET/POST

　　　　提交的頁面和數據:

　　　　　　GET: 好比 index.php?m=news&username=tom

　　　　　　POST: 提交的頁面

　　　　同步/異步: true：異步 false：同步

　　　　　　同步：數據一次性提交，一次性接收(多個ajax挨個提交接收)

　　　　　　異步：數據一邊提交，一邊接收（多個ajax可能一塊兒提交）

　　發送數據:

　　　　ajax對象.send([數據]);

　　　　GET: send無參數

　　　　POST: send中放置的時post提交的數據，而且提交的是字符串

　　監視代碼中:

　　　　發送和接受過程當中不能有錯誤

　　　　ajax對象.status = 200

　　　　200:數據發送和接受無錯誤

　　接受數據:

　　　　ajax對象.responseText; #返回的是服務器返回的數據#

　　【user.html】 #用戶名在線監測user.html user.php user表 pdo操做數據庫#

<html>
    <head>
    <script>
            // ajax封裝函數
        function ajax(method,url,data,asyc,success){
            // 建立xmlhttp協議對象
            var http_request= false;
            if(window.XMLHttpRequest) { //Mozilla 瀏覽器   
                http_request = new XMLHttpRequest();
            }else if (window.ActiveXObject) { // IE瀏覽器 
                try {   
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");   
                } catch (es) {   
                    try {   
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");   
                    } catch (es) {}   
                }   
            }
            http_request.onreadystatechange = check;
            // GET方式提交
            if(method.toUpperCase() == "GET"){
                http_request.open(method,url+"?random="+Math.random()+"&"+data,asyc);
                http_request.send();
            }
            // POST方式提交
            if(method.toUpperCase() == "POST"){
                http_request.open(method,url,asyc);
                // 設置xmlhttp請求的頭信息  變量=值&變量=值
                http_request.setRequestHeader("content-Type","application/x-www-form-urlencoded");
                http_request.send("random="+Math.random()+"&"+data);
            }
            
            function check(){
                if(http_request.readyState == 4 && http_request.status ==200){
                    var text = http_request.responseText;
                    
                    if(text == "1"){
                        var text = "用戶名已存在";
                        var color = "red";
                    }else{
                        var text = "用戶名可用";
                        var color = "green";
                    }
                    info.innerHTML = text;
                    info.style.color = color;
                }
            }
        }
    </script>
    </head>
    <body>
    </body>
</html>