原生Ajax详解

来源：cnblogs　　作者：bignewbie　　时间：2019/4/12 9:05:15　　对本文有异议

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

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

原文链接：http://www.cnblogs.com/CGWTQ/p/10693413.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章