原生 js 实现ajax

最新推荐文章于 2021-03-25 18:50:20 发布

一个耕耘在后端的前端

最新推荐文章于 2021-03-25 18:50:20 发布

阅读量185

点赞数

原生 js 实现ajax的方法：

var ajax= {
    get: function(url,fn) {
        // XMLHttpRequest 对象用于 后台与服务器交换数据
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);//true异步请求，false同步
        xhr.onreadystatechange = function () {
            //readyState 等于4 说明 请求完成
            if (xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304){
                fn.call(this,xhr.responseText);
            }
        };
        xhr.send();
    },
    
    // data 的格式为：‘name=usename&age=13’,在jq中 如果data为对象，会自动将对象转化成这种字符串
    post: function(url,data,fn){
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);//true异步请求，false同步
        //post 请求需要手动设置下请求头
        xhr.setRequestHeader('content-type','application/x-www.form-urlcoded');
        xhr.onreadysatatechange = function () {
            if(xhr.readySate === 4 && xhr.status === 200 || xhr.status === 304) {
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send(data);
    }
}

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

下面是一个实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax登录</title>
</head>
<body>
<div>
    <div id="showInfo"></div>
    <form id="form">
        用户名：<input type="text" name="username" id="username"><br>
        密码：<input type="password" name="password" id="password">
        <input type="button" id="btn" value="登录">
    </form>

</div>
    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick  = function(){
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            //第一步：创建对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //初始化
            //准备好了
            var url = './check.php?username='+username+"&password="+password;
            xhr.open('post',url,false);

            //这段代码在xhr.send();执行完之后才能执行
            //这件事做完了怎么办
            //事情办完之后干什么
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert(1);
                        var data = xhr.responseText;
                        if(data == 1){
                            document.getElementById('showInfo').innerHTML = '用户名或者密码错误';
                        }else if(data == 2){
                            document.getElementById('showInfo').innerHTML = '登录成功';
                        }
                    }
                };
            }
            //实际的去做这件事
            //去做这件事情
            xhr.send(null);
            alert(2);
        }
    }

    </script>
</body>
</html>

<?php 
$username = $_GET['username'];
$password = $_GET['password'];

if($username == 'admin' && $password == '123'){
    echo 2;
}else{
    echo 1;
}


?>

转自：https://blog.csdn.net/chengqunbin/article/details/78076294 和 https://www.cnblogs.com/colima/p/5339227.html

一个耕耘在后端的前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 js 实现ajax

原生 js 实现ajax的方法：var ajax= { get: function(url,fn) { // XMLHttpRequest 对象用于后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true);//true异步请求，false同步 ...
复制链接

扫一扫