原生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);
     }

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢