b/s(浏览器与服务器)通信-ajax篇,从入门到放弃


简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

什么是ajax:

AJAX不是一种编程语言。AJAX只使用以下组合:

  • 浏览器内置XMLHttpRequest对象(用于从Web服务器请求数据)
  • JavaScript和HTML DOM(显示或使用数据)

ajax能干嘛

前后端做数据交互

特点

  • 异步
    • 异步和同步的区别:
      • 同步是请求发过去,要等着回应;
      • 异步:不需要等回应,可以进行其他操作
  • 局部刷新:
    • 页面元素不改变,只改变请求数据
    • 案例
      ajax百度案例
  • 更加快的响应能力。
  • 减少冗余请求,减轻了服务器负担
  • 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序

缺点

  • ajax干掉了back按钮,即对浏览器后退机制的破坏。
  • 存在一定的安全问题。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 无法用URL直接访问

使用场景

  • 场景 1. 数据验证
  • 场景 2. 按需取数据
  • 场景 3. 自动更新页面

    JavaScript ajax

    XMLHttpRequest对象

    AJAX的基石是XMLHttpRequest对象。
    所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于在幕后与Web服务器交换数据。这意味着可以更新网页的各个部分,而无需重新加载整个页面。

XMLHttpRequest属性

XMLHttpRequest对象的方法

普通get请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send()

带参数get请求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

普通post请求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

带参post请求

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

xmlhttprequest 对象get demo

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <script>
            window.onload = function() {
                var btn = document.querySelector("button");
                btn.onclick = function() {
                    var ajax;

                    /*1.创建XMLHttpRequest对象*/
                    if(window.XMLHttpRequest) {
                        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                        ajax = new XMLHttpRequest();
                    } else {
                        // IE6, IE5 浏览器执行代码
                        ajax = new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    /*设置请求方式和地址  默认是异步*/
                    ajax.open("GET", "http://rap2.taobao.org:38080/app/mock/247071/example/1584090851227");
                    /*发送请求*/
                    ajax.send();

                    /*注册回调函数*/
                    ajax.onreadystatechange = function() {
                        if(ajax.readyState == 4 && ajax.status == 200) {
                            document.querySelector("h1").innerHTML = ajax.responseText;
                            console.log(ajax.response);
                        }
                    }
                }
            }
        </script>
    </head>

    <body>

        <h1>这里是ajax显示的地方</h1>

        <button>ajax请求</button>
    </body>

</html>

xmlhttprequest 对象post demo

var xhr = new XMLHttpRequest();
var data = 'email='
  + encodeURIComponent(email)
  + '&password='
  + encodeURIComponent(password);

xhr.open('POST', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data);

总体流程

function ajax(url, success, fail){
    // 1. 创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 连接服务器
    xhr.open('get', url, true)
    // 3. 发送请求
    xhr.send(null);
    // 4. 接受请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
}

参数说明

XMLHttpRequest.status

  • 200, OK,访问正常
  • 301, Moved Permanently,永久移动
  • 302, Move temporarily,暂时移动
  • 304, Not Modified,未修改
  • 307, Temporary Redirect,暂时重定向
  • 401, Unauthorized,未授权
  • 403, Forbidden,禁止访问
  • 404, Not Found,未发现指定网址
  • 500, Internal Server Error,服务器发生错误

send方法

send方法的参数就是发送的数据。多种格式的数据,都可以作为它的参数

  • void send();
  • void send(ArrayBufferView data);
  • void send(Blob data);
  • void send(Document data);
  • void send(String data);
  • void send(FormData data);

    readyState

  • 0:请求未初始化(还没有调用 open())。
  • 1:请求已经建立,但是还没有发送(还没有调用 send())。
  • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
  • 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
  • 4:响应已完成;您可以获取并使用服务器的响应了。

Jquery ajax

语法:

$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名(回调函数)。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$get

<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("button").eq(0).on("click", function() {
                    $.get("http://rap2.taobao.org:38080/app/mock/247071/example/1584090851227", function(data) {
                        console.log(data);
                    })
                })
            });
</script>

$post

        <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

        <script>
            $(function() {
                $("#btn").on("click", function() {

                    $.post("http://rap2.taobao.org:38080/app/mock/247071/aa1", {
                        username: $("#userName").val()
                    }, function(data, status) {

                        $("h1").eq(0).html(data);
                        console.log(data);
                        console.log(status);
                    });
                });
            });
        </script>
    </head>

    <body>

        <h1></h1>
        <input type="text" id="userName" placeholder="输入用户名" />

        <input type="button" id="btn" value="提交" />
    </body>

ajax()方法

  • async 布尔值,表示请求是否异步处理。默认是 true。
  • beforeSend(xhr) 发送请求前运行的函数。
  • cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
  • complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
  • contentType 发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。
  • context 为所有 AJAX 相关的回调函数规定 “this” 值。
  • data 规定要发送到服务器的数据。
  • dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
  • dataType 预期的服务器响应的数据类型。
  • error(xhr,status,error) 如果请求失败要运行的函数。
  • global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
  • ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
  • jsonp 在一个 jsonp 中重写回调函数的字符串。
  • jsonpCallback 在一个 jsonp 中规定回调函数的名称。
  • password 规定在 HTTP 访问认证请求中使用的密码。
  • processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
  • scriptCharset 规定请求的字符集。
  • success(result,status,xhr) 当请求成功时运行的函数。
  • timeout 设置本地的请求超时时间(以毫秒计)。
  • traditional 布尔值,规定是否使用参数序列化的传统样式。
  • type 规定请求的类型(GET 或 POST)。
  • url 规定发送请求的 URL。默认是当前页面。
  • username 规定在 HTTP 访问认证请求中使用的用户名。
  • xhr 用于创建 XMLHttpRequest 对象的函数。

登录

 <body>
<form>
    <p>用户名:<input type="text" name="user" id="name"></p>
    <p>密码:<input type="password" name="pwd" id="pwd"></p>
</form>
<button id="btn">提交</button>
<p class="test"></p>
</body>
<script>
    $('#btn').click(function () {
        var dic = {'name':$('#name').val(),'pwd':$('#pwd').val()};
        var msg = JSON.stringify(dic);
        var $test = $('.test');
        $.ajax({
            url:'/login/',
            type:'post',
            //指定请求的数据格式为json
            contentType:'application/json',
            data:msg,
            //指定响应的格式为json,注意如果后台没有放回json类型的数据格式下方的success不会执行
            dataType:'json',
            success:function (res) {
                data = JSON.parse(res);
                if (data == '2'){
                    $test.text('登录失败!')
                } else if (data == '1'){
                    location.href='https://www.baidu.com/'
                }
            }
        });
    });
</script>

ajax提交注册

$("#btn_submit").click(function () {
        // 生成提交对象
        let form_data = new FormData();
        let sub = $("#form_reg").serializeArray();
        $.each(sub, function (index, val) {
            form_data.append(val.name, val.value)
        });
        form_data.append("myfile", $("#up_myhead")[0].files[0]);
        console.log('留空1');
        $.ajax({
            url: "/register/",
            type: "post",
            contentType: false, //告诉jQuery不要去设置Content-Type请求头
            processData: false, //告诉jQuery不要去处理发送的数据
            data: form_data,
            success: function (data) {
                if (data.status == 100) {
                    window.location.href = '/login/'
                } else {
                    $.each(data.msg, function (index, val) {
                        $("#id_" + index).next().text(val).parent().addClass("has-error");
                        // 提示两次密码不一致
                        if (index == "__all__") {
                            $("#id_re_pwd").next().text(val).parent().addClass("has-error");
                        }
                    });
                    // 三秒后清除错误提示和error效果
                    setTimeout(function () {
                        let form = $(".form-group");
                        form.removeClass("has-error").children("span").empty();
                        form.children("input").val("");
                    }, 3000)
                }
            }
        })
    });

文章作者: Lee Sun
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Lee Sun !
评论
 上一篇
菜鸡的Webug之路 菜鸡的Webug之路
WeBug名称定义为"我们的漏洞"靶场环境 ,基础环境是基于PHP/mysql制作搭建而成,中级环境与高级环境分别都是由互联网漏洞事件而收集的漏洞存在的操作环境。在webug3.0发布后的四百多天226安全团队终于在大年初二发布了webug的4.0版本。
2019-10-24
下一篇 
Git安装,国内加速,使用技巧,常用命令 Git安装,国内加速,使用技巧,常用命令
git最初的开发动力来自于BitKeeper和Monotone。git最初只是作为一个可以被其他前端(比如Cogito或Stgit)包装的后端而开发的,但后来git内核已经成熟到可以独立地用作版本控制。 很多著名的软件都使用git进行版本控制,其中包括Linux核心、X.Org服务器和OLPC内核等项目的开发流程。
2019-09-07
  目录