欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生Ajax详解

程序员文章站 2022-04-09 17:37:04
原生Ajax发送请求: 1.创建XMLhttpRequest对象 ie中为ActiveXobject("Microsoft.XMLHTTP") 早期的ie浏览器 2.准备发送 3.执行发送动作 4.指定回调函数 案例: 1.html文件 2.PHP文件 1.get get请求参数在url中传递 2. ......

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

 

 

原生Ajax详解原生Ajax详解

  1.get

    get请求参数在url中传递

  2.post

    post请求参数在请求体重传递

 

原生Ajax详解

  原生Ajax详解

 

 原生Ajax详解

  原生Ajax详解

原生Ajax详解

原生Ajax详解

 

原生Ajax详解

原生Ajax详解

 

原生Ajax详解

  案例:

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}';
    }
?>

 

 

原生Ajax详解

原生Ajax详解

 

原生Ajax详解

原生Ajax详解

 

 

原生Ajax详解

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

 

 

 

 

 

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