原生Ajax詳解

本文轉載自查看原文 2019-04-12 08:05 503 jQuery/ jsonp/ 跨域/ PHP/ Ajax請求發送/ Ajax/ 同步異步

　　原生Ajax發送請求：

　　　　1.創建XMLhttpRequest對象

　　　　　　ie中為ActiveXobject("Microsoft.XMLHTTP") 早期的ie瀏覽器

　　　　2.准備發送

　　　　3.執行發送動作

　　　　4.指定回調函數

　　案例：

　　1.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初識 Ajax</title>
        <script>
            window.onload = function(){
                var btn = document.getElementById('btn');
                btn.onclick = function(){
                    var uname = document.getElementById('username').value;
                    var pw = document.getElementById('password').value;
                    //使用Ajax
                    //1.創建XMLhttpRequest對象
                    var xhr = new XMLHttpRequest();
                    //2.准備發送
                    xhr.open('GET','./check.php?username='+uname+'&password='+pw,true);
                    //3.執行發送動作
                    xhr.send(null);
                    //4.指定回調函數
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4){
                            if(xhr.status == 200){
                                var data = xhr.responseText;
                                var info = document.getElementById('info');
                                if(data == 'ture'){
                                    info.innerHTML = 'success';
                                }else if(data == 'false'){
                                    info.innerHTML = 'false';
                                }
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <form >
            用戶名:<input type="text" id="username" /><span id="info"></span><br />
            密   碼:<input type="text" id="password" />
            <input type="button" value="登錄" id="btn" />
        </form>
    </body>
</html>

　　2.PHP文件

<?php
    $uname = $_GET['username'];
    $pw = $_GET['password'];
    if($uname == 'admin' && $pw == '123'){
        echo 'ture';
    }else{
        echo "false";
    }
?>

　　1.get

　　　　get請求參數在url中傳遞

　　2.post

　　　　post請求參數在請求體重傳遞

　　案例:

1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #dv{
                width: 360px;
                height: 100px;
                background-color: green;
                position: absolute;
                left: 50%;
                top: 10px;
                margin-left: -180px;
            }
        </style>
        <script src="../jquery-1.12.2.js"></script>
        <script>
            /*
             *功能：
             *頁面輸入圖書編號，查詢服務器端的圖書信息並解析 
             * 
             */
            $(function(){
                
                $('#btn1').click(function(){
                    var code = $('#code').val();
                    $.ajax({
                        type:'get',
                        url:'02.php',
                        data:{code:code},
                        dataType:'json',
                        success:function(data){
                            var info = document.getElementById('info');
                            if(data.flag == 0){
                            info.innerHTML = 'NOT FIND BOOK';
                            }else{
                                var tag = '<ul><li>BookName:'+data.bookname+'</li><li>Autor:'+data.autor+'</li></ul>';
                                info.innerHTML = tag;
                            }
                        },
                        error:function(){
                            $('#info').html('Server Error');
                        };
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="dv">
            <div>
                BookNumber：<input type="text" name="code" id="code"/>
                <input type="button" value="Select" id="btn1"/>
            </div>
            <div id="info"></div>
        </div>
    </body>

</html>

2.php

<?php
    $code = $_GET['code'];
    $books = array();
    $books['sgyy'] = array('bookname'=>'三國演義','autor'=>'羅貫中');
    $books['shz'] = array('bookname'=>'水滸傳','autor'=>'施耐庵');
    $books['xyj'] = array('bookname'=>'西游記','autor'=>'吳承恩');
    $books['hlm'] = array('bookname'=>'紅樓夢','autor'=>'曹雪芹');
    
    if(array_key_exists($code, $books) == 1){//判斷非空
        $book = $books[$code];
        echo json_encode($book);
    }else{
        echo '{"flag":0}';
    }
?>

1.靜態script標簽src屬性進行跨域請求
　　-<script type="text/javascript" src="文件地址"></script>
　　-默認為同步請求，加異步請求輸入無法加載
　　　　-1.必須保證加載的順序
　　　　-2.不方便通過程序傳遞參數

2.動態創建script標簽，通過標簽的src屬性發送請求(jsonp本質)
　　-1.動態創建script標簽是異步請求
　　　　-利用函數調用解決
　　　　-服務端響應的內容是函數調用

例如：

　　　var script = document.createElement('script');
     script.src = 'http://www.snake.com/ajax/demo/Ajax20190403/test.php';
     var head = document.getElementsByTagName('head')[0];
     head.appendChild(script);
     //服務器響應的內容調用
     function foo(data){
        console.log(data);
     }

特此聲明：如需轉載請注明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生ajax詳解前后端數據交互(二)——原生 ajax 請求詳解 js實現原生Ajax的封裝及ajax原理詳解原生Ajax 和Jq Ajax AJAX請求和跨域請求詳解（原生JS、Jquery）什么是Ajax與Ajax原生的實現方式 Js原生Ajax和Jquery的Ajax 原生js實現Ajax 原生ajax寫法原生ajax請求的五個步驟