AjaxDjango-Ajax

Ajax准备知识

一、什么是json

(1)、定义:

 

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

 

讲json对象,不得不干JS对象:

 

Ajax 1

合格的json对象:

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["张三", "李四"] }

[ { "name": "张三"}, {"name": "李四"} ]

勿过关的json对象:

{ name: "张三", 'age': 32 }                     // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined }            // 不能使用undefined

{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函数和日期对象
}

二、stringify与parse方法

 

JSON.parse():     用于将一个 JSON 字符串转换为 JavaScript 对象 
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 错误
console.log(JSON.parse('[12,undefined]')) ;   // 错误

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。 
eg:  console.log(JSON.stringify({'name':"egon"})) ;

 

三、ajax简介

 

AJAX(Asynchronous Javascript And XML)翻译成中文即是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据也XML(当然,传输的数不只是XML)。

 

  • 一块交互:客户端有一个求后,需要等服务器响应了晚,才会出第二独请求;
  • 异步交互:客户端起一个请求后,无需等待服务器响应了,就得生第二独请求。

 

AJAX除了异步的表征外,还有一个便是:浏览器页面局部刷新;(这无异于表征给用户的感想是在潜意识被落成请求与应过程)

js实现的组成部分刷新:

 

Ajax 2Ajax 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>
    <p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery-3.1.1.js"></script>

<script>

    $(".Form :submit").click(function(){

        flag=true;

        $("Form .v1").each(function(){

            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("");
                 $span.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;

            }
        });
        return flag
    });


</script>


</body>
</html>

View Code

四、ajax优缺点

 

优点:

 

  • AJAX使用Javascript技术为服务器发送异步请求;
  • AJAX无须刷新整个页面;
  • 因为服务器响应内容不再是整套页面,而是页面被的片,所以AJAX性能强;

五、$.ajax

(1)、请求参数:

     
 

######################------------data---------################

       data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认地把它编码成某种格式
             (urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。

             function testData() {
               $.ajax("/test",{     //此时的data是一个json形式的对象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;if为false,
             那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString()
             ,最后得到一个[object,Object]形式的结果。

######################------------contentType---------################

contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,
             比如contentType:"application/json",即向服务器发送一个json字符串:
               $.ajax("/ajax_get",{

                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",

               });                          //{a: 22, b: 33}

             注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象

             views.py:   json.loads(request.body.decode("utf8"))


######################------------traditional---------################

traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代;

 

(2)响应参数:

 

/*

dataType:  预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。
            默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;
            比如我们的服务器响应的content Type为json格式,这时ajax方法就会对响应的内容
            进行一个json格式的转换,if转换成功,我们在success的回调函数里就会得到一个json格式
            的对象;转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用
            data Type。
            dataType的可用值:html|xml|json|text|script
            见下dataType实例

*/

 

六、csrf跨站请求伪造

方式一:

 

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

 

方式二:

<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").
}<br>})

方式三:

<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})

七:js实现ajax

发送ajax

** 
1、  
获 取
XMLHttpRequest对象**

     
   xmlHttp = new XMLHttpRequest();

 
2、连接服务器

     
get:

 

     xmlHttp.open("get","/sendAjax/?a=1&b=2");
   post:

    xmlHttp.open("post","/sendAjax/");

 设置请求头的Content-Type
 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

3、发送数据
   xmlHttp.send(null);
4、回调函数 success

使用流程:

Ajax 4Ajax 5

步骤1:  打开与服务器的连接(open方法)
当得到XMLHttpRequest对象后,就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下:

open(method, url, async):

method:请求方式,通常为GET或POST;
url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为GET请求,还可以在URL后追加参数;
async:这个参数可以不给,默认值为true,表示异步请求;
1
2
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true); 
步骤2:  发送请求
当使用open打开连接后,就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数,即对应HTTP协议的请求体内容,若是GET请求,需要在URL后连接参数。

注意:若没有参数,需要给出null为参数!若不给出null为参数,可能会导致FireFox浏览器不能正常发送请求!

1
xmlHttp.send(null);
步骤3:  接收服务器响应
当请求发送出去后,服务器端就开始执行了,但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

XMLHttpRequest对象有一个onreadystatechange事件,它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态:

0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法;
1:请求已开始,open()方法已调用,但还没调用send()方法;
2:请求发送完成状态,send()方法已调用;
3:开始读取服务器响应;
4:读取服务器响应结束。 
onreadystatechange事件会在状态为1、2、3、4时引发。

  下面代码会被执行四次!对应XMLHttpRequest的四种状态!

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };
但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };
其实我们还要关心服务器响应的状态码是否为200,其服务器响应为404,或500,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

最后,我们还需要获取到服务器响应的内容,可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

View Code

JS实现ajax小结

/*
    创建XMLHttpRequest对象;
    调用open()方法打开与服务器的连接;
    调用send()方法发送请求;
    为XMLHttpRequest对象指定onreadystatechange事件函数,这个函数会在
    XMLHttpRequest的1、2、3、4,四种状态时被调用;
    XMLHttpRequest对象的5种状态,通常我们只关心4状态。
    XMLHttpRequest对象的status属性表示服务器状态码,它只有在readyState为4时才能获取到。
    XMLHttpRequest对象的responseText属性表示服务器响应内容,它只有在
    readyState为4时才能获取到!

*/

八、jQuery.serialize():

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化,以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。

语法:

 
  jQueryObject.serialize( )

返回值:

  serialize()函数的返回值为String类型,返回将说明单元素编码后底而是用于表单提交的文本字符串。

 

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />

 

本着<form>元素进行序列化可以直接序列化其中间的富有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

咱们啊足以直接指向有些表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

serialize()函数通常用于将表单内容序列化,以便通过AJAX方式交给。

$("#btn").click( function(){

    // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );       
    } );

} );

九、上传文件

form表单上传文书

 

html
<h3>form表单上传文件</h3>
<form action="/upload_file/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>

 

views
def index(request):

    return render(request,"index.html")


def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

十、Ajax(FormData)

XMLHttpRequest Level
2添加了一个新的接口FormData.利用FormData对象,我们可以经过JavaScript用部分键值对来拟一层层表单控件,我们尚好动用XMLHttpRequest的send()道来异步的付者”表单”.比打普通的ajax,使用FormData的极充分长就是是咱们好异步上污染一个二进制文件.

富有主流浏览器的比较新本子都早已支撑此目标了,比如Chrome 7+、Firefox
4+、IE 10+、Opera 12+、Safari 5+。

html

<h3>Ajax上传文件</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];

        var formData=new FormData();
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,
            contentType:false,
            processData:false,

            success:function(){
                alert("上传成功!")
            }
        });


    })
</script>

views
def index(request):

    return render(request,"index.html")


def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

十一、充Ajax上污染文书

 

<iframe> 标签规定一个内联框架。

 

一个内联框架让用来在当下 HTML 文档中放到另一个文档。

<h3>伪造Ajax上传文件</h3>
<form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
    <p>
        <iframe name="ifr" id="ifr"></iframe></p>
    <p><input type="file" name="upload_file"></p>
    <p><input type="text" name="user"></p>

    <input type="button" value="提交" id="submitBtn">
</form>

<script>



    $("#submitBtn").click(function(){

        $("#ifr").load(iframeLoaded);
        $("#form2").submit();


    });

    function iframeLoaded(){
        alert(123)
    }

</script>

views

def index(request):

    return render(request,"index.html")

def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

同源策略与Jsonp

同源策略:

同源策略(Same origin
policy)是一模一样栽约定,它是浏览器最中心吧最好核心的安全力量,如果缺失了同源策略,则浏览器的正常功能或都见面中震慑。可以说Web是构建以同源策略基础之上的,浏览器就是本着同源策略的一样种实现。

同源策略,它是由于Netscape提出的一个举世闻名的安全策略。现在具有支持JavaScript
的浏览器还见面用此政策。所谓同源是凭借,域名,协议,端口相同。当一个浏览器的有数只tab页中分别打开来
百度和谷歌的页面当浏览器的百度tab页执行一个本子的时段会检讨这个脚论是属哪个页面的,即检查是不是同源,只有与百度同源的本子才会为执行。如果非同源,那么当请数据常常,浏览器会于控制台中报一个很,提示拒绝访问。

 

示例:

项目1:

Ajax 6

Ajax 7

==================================http://127.0.0.1:8001项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>ajax</button>
{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"http://127.0.0.1:7766/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(123);
                alert(data)
            }
        })
    })
</script>
</body>
</html>


==================================http://127.0.0.1:8001项目的views

def index(request):


    return render(request,"index.html")


def ajax(request):
    import json
    print(request.POST,"+++++++++++")
    return HttpResponse(json.dumps("hello"))

Ajax 8

项目2:

Ajax 9

Ajax 10

==================================http://127.0.0.1:8002项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>sendAjax</button>

{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(data)
            }
        })
    })
</script>

</body>
</html>


==================================http://127.0.0.1:8002项目的views

def index(request):

    return render(request,"index.html")

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")

    return HttpResponse(json.dumps("hello2"))

Ajax 11

 当点击项目1底按钮时,发送了请求,但是会发觉报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

不过注意,项目2着之造访已经发出了,说明是浏览器对非同源请求返回的结果召开了阻碍。

Jsonp

jsonp是json用来跨域的一个物。原理是经script标签的跨域特性来绕了同源策略。

思:这算怎么回事?

1
<script src="http://code.jquery.com/jquery-latest.js"></script>

 借助script标签,实现跨域请求,示例:

Ajax 12

# =============================http://127.0.0.1:8001/index


<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:7766/SendAjax/"></script>


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")
    # dic={"k1":"v1"}
    return HttpResponse("func('yuan')")  # return HttpResponse("func('%s')"%json.dumps(dic))

Ajax 13

及时实质上就是是JSONP的略实现模式,或者说是JSONP的原型:创建一个回调函数,然后于远距离服务达到调用这个函数并且将JSON
数据形式作参数传递,完成回调。

以JSON数据填充进回调函数,这虽是JSONP的JSON+Padding的意思。

     
一般情况下,我们盼望是script标签能够动态的调用,而休是比如说面盖固定于html里面所以没当页面显示就推行了,很不灵便。我们好透过javascript动态的创导script标签,这样咱们即便可以灵活调用远程服务了。

Ajax 14

<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

Ajax 15

为了进一步灵敏,现在以公协调在客户端定义之回调函数的函数名传送给服务端,服务端则会回来以你定义之回调函数曰之点子,将抱的json数据传这个主意就回调:

将8001的f()改写为:

1
2
3
function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

8002的views改为:

1
2
3
4
5
6
7
8
9
10
def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))
    callbacks=request.GET.get("callbacks")
 
    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP,可以采用$.getJSON(url,[data],[callback])方法

8001的html改为:

Ajax 16

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });
    }

</script>

Ajax 17

8002的views不改动。

结果是同样的,要注意的是以url的背后总得上加一个callback参数,这样getJSON方法才会分晓是故JSONP方式去看服务,callback后面的充分问号是其中自动生成的一个回调函数曰。

     
此外,如果说咱们想指定自己之回调函数称呼,或者说服务达标规定了一定回调函数誉为该怎么惩罚为?我们得以用$.ajax方法来贯彻

 $.ajax

8001的html改为:

Ajax 18

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks',
                jsonpCallback:"SayHi"
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>

Ajax 19

8002的views不改动。

当,最简易的款型或经过回调函数来处理:

Ajax 20

 

重点:
<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必须有,告诉server,这次访问要的是一个jsonp的结果。
               jsonp: 'callbacks',          //jQuery帮助随机生成的:callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

Ajax 21

  jsonp: ‘callbacks’就是概念一个存放回调函数的键,jsonpCallback是前者定义好之回调函数方法名’SayHi’,server端接受callback键对应值后哪怕可以以里头填充数据打包返回了; 

jsonpCallback参数可以无定义,jquery会自动定义一个即兴名发过去,那前端就得用回调函数来处理相应数据了。利用jQuery可以十分便宜的贯彻JSONP来展开跨域访问。  

注意
JSONP一定是GET请求

 应用

Ajax 22

Ajax 23

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>


    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function (data) {

                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>

同源策略(Same origin
policy)是一致种植约定,它是浏览器最核心吧最好核心的平安力量,如果缺了同源策略,则浏览器的正常职能可能都见面中震慑。可以说Web是构建以同源策略基础之上的,浏览器就是针对性同源策略的同栽实现。

同源策略,它是由Netscape提出的一个响当当的安全策略。现在持有支持JavaScript
的浏览器还见面采用是策略。所谓同源是凭,域名,协议,端口相同。当一个浏览器的星星点点只tab页中分头打开来
百度和谷歌的页面当浏览器的百度tab页执行一个剧本的下会检讨这个脚论是属哪个页面的,即检查是不是同源,只有和百度同源的本子才会被实施。如果非同源,那么当求数据时,浏览器会于控制台中报一个百般,提示拒绝访问。

 

示例:

项目1:

Ajax 24

Ajax 25

==================================http://127.0.0.1:8001项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>ajax</button>
{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"http://127.0.0.1:7766/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(123);
                alert(data)
            }
        })
    })
</script>
</body>
</html>


==================================http://127.0.0.1:8001项目的views

def index(request):


    return render(request,"index.html")


def ajax(request):
    import json
    print(request.POST,"+++++++++++")
    return HttpResponse(json.dumps("hello"))

Ajax 26

项目2:

Ajax 27

Ajax 28

==================================http://127.0.0.1:8002项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>sendAjax</button>

{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(data)
            }
        })
    })
</script>

</body>
</html>


==================================http://127.0.0.1:8002项目的views

def index(request):

    return render(request,"index.html")

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")

    return HttpResponse(json.dumps("hello2"))

Ajax 29

 当点击项目1底按钮时,发送了央,但是会发现报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

只是注意,项目2遭受的访问已经产生了,说明是浏览器对非同源请求返回的结果召开了挡。

Jsonp

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕了同源策略。

思:这算怎么回事?

1
<script src="http://code.jquery.com/jquery-latest.js"></script>

 借助script标签,实现跨域请求,示例:

Ajax 30

# =============================http://127.0.0.1:8001/index


<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:7766/SendAjax/"></script>


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")
    # dic={"k1":"v1"}
    return HttpResponse("func('yuan')")  # return HttpResponse("func('%s')"%json.dumps(dic))

Ajax 31

这实在就算是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后以长距离服务达到调用这个函数并且以JSON
数据形式作参数传递,完成回调。

用JSON数据填充进回调函数,这就算是JSONP的JSON+Padding的含义。

     
一般情形下,我们意在以此script标签能够动态的调用,而休是如面盖固定于html里面所以无当页面显示就实施了,很无利索。我们好透过javascript动态的创导script标签,这样咱们就可灵活调用远程服务了。

Ajax 32

<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

Ajax 33

为更加灵敏,现在用你协调当客户端定义的回调函数的函数名传送给服务端,服务端则会回来以你定义的回调函数名叫之方,将抱的json数据传这个法成功回调:

将8001的f()改写为:

1
2
3
function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

8002的views改为:

1
2
3
4
5
6
7
8
9
10
def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))
    callbacks=request.GET.get("callbacks")
 
    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP,可以运用$.getJSON(url,[data],[callback])方法

8001的html改为:

Ajax 34

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });
    }

</script>

Ajax 35

8002的views不改动。

结果是均等的,要小心的凡在url的后面总得补偿加一个callback参数,这样getJSON方法才见面懂是为此JSONP方式去顾服务,callback后面的酷问号是内自动生成的一个回调函数誉为。

     
此外,如果说咱们怀念指定自己之回调函数叫作,或者说服务达标规定了稳回调函数名该怎么收拾呢?我们得以以$.ajax方法来贯彻

 $.ajax

8001的html改为:

Ajax 36

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks',
                jsonpCallback:"SayHi"
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>

Ajax 37

8002的views不改动。

当然,最简便易行的款型要经过回调函数来拍卖:

Ajax 38

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必须有,告诉server,这次访问要的是一个jsonp的结果。
               jsonp: 'callbacks',          //jQuery帮助随机生成的:callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

Ajax 39

  jsonp: ‘callbacks’就是概念一个存回调函数的键,jsonpCallback是前者定义好之回调函数方法名’SayHi’,server端接受callback键对应值后就是足以当内部填充数据打包返回了; 

jsonpCallback参数可以无定义,jquery会自动定义一个随意名发过去,那前端就得用回调函数来拍卖相应数据了。利用jQuery可以好便利的贯彻JSONP来进行跨域访问。  

注意
JSONP一定是GET请求

 应用

Ajax 40

Ajax 41

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>


    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function (data) {

                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>

相关文章