初学Ajax

Posted xykbg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学Ajax相关的知识，希望对你有一定的参考价值。

封装一个简单的Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="ajax.js"></script>
    <script>
       window.onload = function(){
           var btn = document.getElementById(‘btn‘);
           btn.onclick = function(){
                ajax(‘ab.txt‘,function(str){
                    alert(str);
                },function(failed){
                    alert(failed);
                })
           }
       }
    </script>
</head>
<body>
    <button id="btn">发送</button>
</body>
</html>
function ajax(url,fnSucc,fnFaild){
            // 1.创建ajax对象
            if(window.XMLHttpRequest){
                var ajax = new XMLHttpRequest();
            }
            else{
                // IE6, IE5 浏览器执行代码
                var ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.连接服务器
            // open(方法，文件名，异步传输)
            ajax.open(‘GET‘,url,true);
            // 3.发送请求
            ajax.send();
            // 4.接收返回值
            ajax.onreadystatechange = function(){
                // 有0,1,2,3,4值
                if(ajax.readyState==4){
                    // 请求成功
                    if(ajax.status==200)
                    {
                        fnSucc(ajax.responseText);
                    }
                    else{
                        if(fnFaild){
                            fnFaild(ajax.status);
                        }
                    }
                }
            }
        }

 

以上是关于初学Ajax的主要内容，如果未能解决你的问题，请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

Javascript代码片段在drupal中不起作用

PHP必用代码片段

初学者必读原生AJAX-异步的javaScript和XML

前端面试题之手写promise

初学JSON和AJAX心得透过解惑去学习