ディレクトリ

1.はじめにAJAX

次の以前の知識ベースは、受け入れるようになったAJAXことの洗礼を。

中国語に翻訳AJAX（非同期JavaScriptとXML）は、「非同期JavascriptとXML」です。

JavaScript言語の使用は、XML用のサーバーの非同期データ伝送と対話すること（もちろん、データ伝送は、XMLだけではありません）。

AJAXは、新しいプログラミング言語ではなく、既存の標準を使用する新しい方法。

、次のキーであることに注意してください！！！

栗の場合：

あなたがプルダウンし続けたときに私たちは、多くの場合、サイト上の記事を参照するか、画像を検索し、ページの下部に、突然のすべてを引っ張ります！ページや写真と記事の束をロードし、これは、実際には、職場での私たちのAJAX、そして私の心はポイントがありませんか？

まず、AJAX最大の利点：

ページ全体をリロードせずに、そして（この機能は、知らず知らずの間に、ユーザの要求と応答感に終了した）ページのコンテンツ部分を更新し、サーバーとデータを交換することができます。

第二に、AJAXは動作します：

これは、任意のブラウザプラグインが必要ですが、ブラウザでのJavaScriptの実行を許可するユーザーを必要としません。

一部の人々は絵で、求めることができる「XHR」それが何であるか、心配しないでください、私たちはゆっくり来ます。

呼ばれる「XHR」（「XMLHttpRequestの」構築されたオブジェクトブラウザ）、Ajaxの機能はAJAXがオブジェクトブラウザによって構築され、依存オブジェクトを実装しXHMHttpResquest、非同期要求を送信するために、操作が任意の非同期要求クライアントに干渉しません。

非同期：

XHR相当于是一个通信兵，来负责客户端与服务器之间的通信传输。

举个形象生动的例子：

要打仗了，前方阵地（客服端）不可能只等着通信兵（XHR）传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部（服务器）的命令，指挥部下达命令指挥，通信兵再把命令传到前方阵地，然后前方阵地再执行命令相关的操作（客户端把数据渲染到页面），这也就是Ajax的异步原理。

同步：

所谓的同步就是前方阵地和通信兵一起去向服务器请求数据，直到通信兵请求到数据，我才开始渲染页面，在请求的过程中页面一直是白屏等待的。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

等一下，这个同步异步大家有没有回想起我们之前在学习线程进程的时候，也有同步异步。

其实说得简单点，就是你在烧水，同步就是你啥也不干就等水开，异步则是水壶一丢去干别的事了。

1.1 示例

页面输入两个整数，通过AJAX传输到后端计算出结果并返回。

#HTML部分代码#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1">Ajax Test</button>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    $('#b1').click(function () {
        $.ajax({
            url:'',
            type:'POST',
            data:{i1:$('#i1').val(),i2:$('#i2').val()},
            success:function (data) {
                $('#i3').val(data)
            }
        })
    })

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

#views.py

def ajax_test(request):
    if request.method=='POST':
        i1=request.POST.get('i1')
        i2=request.POST.get('i2')
        ret=int(i1)+int(i2)
        return HttpResponse(ret)
    return render(request,'ajax_test.html')

views.py

#urls.py

from django.conf.urls import url
from app01 import views
urlpatterns=[
    url(r'^ajax_test/',views.ajax_test),
]

1.2 AJAX常见应用情景

其实除了上文提到的页面加载用到的AJAX技术，还有一些常见的例子：

搜索引擎根据用户输入的关键字，自动提示检索关键字。
注册时候的用户名的查重。

当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已（这一特点给用户的感受是在不知不觉中完成请求和响应过程）！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

具体步骤：

当输入用户名后，把光标移动到其他表单项上时
浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在
最终服务器返回true表示名为lemontree7777777的用户已经存在
浏览器在得到结果后显示“用户名已被注册！”
整个过程中页面没有刷新，只是局部刷新了
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作

1.3 AJAX的优缺点

优点

AJAX使用JavaScript技术向服务器发送异步请求
AJAX请求无须刷新整个页面
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高
两个关键点:
- 局部刷新
- 异步请求

缺点：

AJAX干掉了Back和History功能，即对浏览器机制的破坏。
- 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
安全问题技术同时也对IT企业带来了新的安全威胁。
- ajax技术就如同对企业数据建立了一个直接通道。
- 这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
- ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。
- 还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

这缺点也太长了！！！！大家只需要记住AJAX的局部刷新优点就行，缺点在优点面前就显得...你懂的！

2. jQuery实现的AJAX（掌握）

最基本的jQuery发送AJAX请求示例：

2.1 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<p>
    <input type="text" class="user">
    <span class="hide" style="color: red">用户名已存在</span>
</p>

<script src="/static/jquery-3.3.1.min.js"></script>

{#下面这一项是基于jQuery的基础上自动给我们的每一个ajax绑定一个请求头信息，类似于form表单提交post数据必须要有的csrf_token一样#}

{#否则我的Django中间件里面的校验csrf_token那一项会认为你这个请求不是合法的，阻止你的请求#}

<script src="/static/setup_Ajax.js"></script>
<script>
    //给input框绑定一个失去焦点的事件
    $('.user').blur(function () {
        //$.ajax为固定用法，表示启用ajax
        $.ajax({
            //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
            url:'',
            //type为标定你这个ajax请求的方法
            type:'POST',
            //data后面跟的就是你提交给后端的数据
            data:{'username':$(this).val()},
            //success为回调函数，参数data即后端给你返回的数据
            success:function (data) {
                ret=JSON.parse(data);
                if (ret['flag']){
                    $('p>span').removeClass('hide');
                }
            }
        })
    });
</script>
</body>
</html>

2.2 views.py

def index(request):
    if request.method=='POST':
        ret={'flag':False}
        username=request.POST.get('username')
        if username=='JBY':
            ret['flag']=True
            import json
            return HttpResponse(json.dumps(ret))
    return render(request,'index.html')

2.3 $.ajax参数

data参数中的键值对，如果值不为字符串，需要将其转换成字符串类型。

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);kkk
      }
    })
  })

3. JS实现AJAX(了解)

var b2 = document.getElementById("b2");
  b2.onclick = function () {
    // 原生JS
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("POST", "/ajax_test/", true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.send("username=q1mi&password=123456");
    xmlHttp.onreadystatechange = function () {
      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
        alert(xmlHttp.responseText);
      }
    };
  };

4. AJAX请求如何设置`csrf_token`

かどうajaxか、誰が、限り、私がしなければならないとしてDjango提出post要求されたデータを、あなたは確認する必要がありcsrf_token、クロスサイトリクエストフォージェリへ。

それでは、どのよう私の中ajaxでGETこれはcsrf_tokenそれ？？？

私は好きformで内部に形成することができるフォーム{% csrf_token %}アップケリを......

4.1方法1

得ることによって隠さ入力タグcsrfmiddlewaretoken値は、データ送信に配置されます。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Tonny",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

4.2第二の方法

リターンによって取得cookieした文字列を、送信が要求ヘッダーに配置されています。

注意：jquery.cookie.jsは、プラグインを導入する必要があります。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrf_token，并设置ajax请求头
  data: {"username": "Ada", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

4.3 3つの方法

または書き込みに使用するgetCookie方法を：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

たびにあなたが$ .ajaxSetup（）メソッドのAJAX要求の統一セットを使用することができ、あまりにも面倒を書きます。

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

Ajaxは、ポストデータを提出する際、ファイルをインポートすることにより、HTMLページ上の静的ファイル、あなたのDjangoプロジェクトに以下の設定ファイルは自動的に私たちが問題を解決するのに役立つcsrf_token確認してください。

（設定ファイルをインポートする前に、このプロファイルの内容は、達成するためにjQueryのに基づいているため、あなたは、jQueryのをインポートする必要があります）

何回も、それが重要である「のAjax、JSON形式のデータ転送」、次を参照してください節「アヤックスは、ファイルをアップロード」:)

[1029 | Day55] AJAXの紹介とjQuery / JSがAJAXを実装します

1.はじめにAJAX

1.1 示例

1.2 AJAX常见应用情景

1.3 AJAX的优缺点

优点

缺点：

2. jQuery实现的AJAX（掌握）

2.1 html

2.2 views.py

2.3 $.ajax参数

3. JS实现AJAX(了解)

4. AJAX请求如何设置`csrf_token`

4.1方法1

4.2第二の方法

4.3 3つの方法

おすすめ

[1029 | Day55] AJAXの紹介とjQuery / JSがAJAXを実装します

1.はじめにAJAX

1.1 示例

1.2 AJAX常见应用情景

1.3 AJAX的优缺点

优点

缺点：

2. jQuery实现的AJAX（掌握）

2.1 html

2.2 views.py

2.3 $.ajax参数

3. JS实现AJAX(了解)

4. AJAX请求如何设置csrf_token

4.1方法1

4.2第二の方法

4.3 3つの方法

おすすめ

4. AJAX请求如何设置`csrf_token`