您的位置:新葡亰496net > 奥门新萄京娱乐场 > 新葡亰496net实例讲解

新葡亰496net实例讲解

发布时间:2019-09-22 11:04编辑:奥门新萄京娱乐场浏览(147)

    一、什么是AJAX

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

    特点:

    • 与服务器异步交互
    • 浏览器页面局部刷新(不知不觉中完成请求和相应过程,用户体验更好)

    同步交互与异步交互:

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

    新葡亰496net 1新葡亰496net 2

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 
     7 <script type="text/javascript">
     8 window.onload = function() {//当文档加载完毕时执行本函数
     9     var form = document.getElementById("form1");//获取表单元素对象
    10     form.onsubmit = function() {//给表单元素添加一个监听,监听表单被提交事件
    11         var usernameValue = form.username.value;//获取表单中名为username的表单元素值
    12         if(!usernameValue) {//判断该值是否为空
    13             var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的元素
    14             usernameSpan.innerText = "用户名不能为空!";//设置span元素内容!
    15             return false;//返回false,表示拦截了表单提交动作
    16         }
    17         return true;//不拦截表单提交动作
    18     };
    19 };
    20 </script>
    21 </head>
    22  <body>
    23 <h1>注册页面</h1>
    24 <form action="" method="post" id="form1">
    25 用户名:<input type="text" name="username"/>
    26 
    27 <br/>
    28 密 码:<input type="password" name="password"/>
    29 
    30 <br/>
    31 <input type="submit" value="注册"/>
    32 
    33 </form>
    34   </body>
    35 </html>
    36 
    37 js实现的局部刷新
    

    Demo

    Ajax准备知识:json

    Ajax准备知识:json

    JS实现的ajax和同源策略(实例讲解),ajax实例讲解

    一、回顾jQuery实现的ajax

    首先说一下ajax的优缺点

    优点:

    AJAX使用Javascript技术向服务器发送异步请求;

    AJAX无须刷新整个页面;

    因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

    jquery 实现的ajax

    index.html

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
    </head>
    <body>
    
    <button class="send_Ajax">send_Ajax</button>
    
    <script>
     //$.ajax的两种使用方式:
    
     //$.ajax(settings);
     //$.ajax(url,[settings]);
    
    
     $(".send_Ajax").click(function(){
    
      $.ajax({
      url:"/handle_Ajax/",
      type:"POST",
      data:{username:"Yuan",password:123},
    
      success:function(data){
       alert(data)
      },
    
       //=================== error============
    
      error: function (jqXHR, textStatus, err) {
    
       // jqXHR: jQuery增强的xhr
       // textStatus: 请求完成状态
       // err: 底层通过throw抛出的异常对象,值与错误类型有关
       console.log(arguments);
       },
    
       //=================== complete============
    
      complete: function (jqXHR, textStatus) {
       // jqXHR: jQuery增强的xhr
       // textStatus: 请求完成状态 success | error
       console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
       console.log('textStatus: %s', textStatus);
      },
    
      //=================== statusCode============
      statusCode: {
       '403': function (jqXHR, textStatus, err) {
       console.log(arguments); //注意:后端模拟errror方式:HttpResponse.status_code=500
       },
    
       '400': function () {
       }
      }
    
      })
    
     })
    
    </script>
    </body>
    </html>
    

    Views.py

    import json,time
    
    def index(request):
    
     return render(request,"index.html")
    
    def handle_Ajax(request):
    
     username=request.POST.get("username")
     password=request.POST.get("password")
    
     print(username,password)
     time.sleep(10)
    
     return HttpResponse(json.dumps("Error Data!"))
    

    $.ajax参数

    请求参数

    ######################------------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会对数据进行深层次迭代;
    

    响应参数

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

    小练习:计算两个数的和

    方式一:这里没有指定contentType:默认是urlencode的方式发的

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width">
     <title>Title</title>
     <script src="/static/jquery-3.2.1.min.js"></script>
     <script src="http://www.paidtyping.com/uploads/allimg/190922/1104141358-2.jpg"></script>
    </head>
    <body>
    <h1>计算两个数的和,测试ajax</h1>
    <input type="text" class="num1"> <input type="text" class="num2">=<input type="text" class="ret">
    <button class="send_ajax">sendajax</button>
    
    <script>
     $(".send_ajax").click(function () {
       $.ajax({
       url:"/sendAjax/",
       type:"post",
       headers:{"X-CSRFToken":$.cookie('csrftoken')}, 
       data:{
        num1:$(".num1").val(),
        num2:$(".num2").val(),
       },
       success:function (data) {
        alert(data);
        $(".ret").val(data)
       }
      })
     })
    
    </script>
    </body>
    </html>
    

    views.py

    def index(request):
     return render(request,"index.html")
    
    def sendAjax(request):
     print(request.POST)
     print(request.GET)
     print(request.body) 
     num1 = request.POST.get("num1")
     num2 = request.POST.get("num2")
     ret = float(num1) float(num2)
     return HttpResponse(ret)
    

    方式二:指定conentType为json数据发送:

    index2.html

    <script>
     $(".send_ajax").click(function () {
       $.ajax({
       url:"/sendAjax/",
       type:"post",
       headers:{"X-CSRFToken":$.cookie('csrftoken')}, //如果是json发送的时候要用headers方式解决forbidden的问题
       data:JSON.stringify({
        num1:$(".num1").val(),
        num2:$(".num2").val()
       }),
       contentType:"application/json", //客户端告诉浏览器是以json的格式发的数据,所以的吧发送的数据转成json字符串的形式发送
       success:function (data) {
        alert(data);
        $(".ret").val(data)
       }
      })
     })
    
    </script>
    

    views.py

    def sendAjax(request):
     import json
     print(request.POST) #<QueryDict: {}>
     print(request.GET) #<QueryDict: {}>
     print(request.body) #b'{"num1":"2","num2":"2"}' 注意这时的数据不再POST和GET里,而在body中
     print(type(request.body.decode("utf8"))) # <class 'str'>
     # 所以取值的时候得去body中取值,首先得反序列化一下
     data = request.body.decode("utf8")
     data = json.loads(data)
     num1= data.get("num1")
     num2 =data.get("num2")
     ret = float(num1) float(num2)
     return HttpResponse(ret)
    

    新葡亰496net 3

    二、JS实现的ajax

    1、AJAX核心(XMLHttpRequest)

    其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

    var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

    注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

    function createXMLHttpRequest() {
        var xmlHttp;
        // 适用于大多数浏览器,以及IE7和IE更高版本
        try{
          xmlHttp = new XMLHttpRequest();
        } catch (e) {
          // 适用于IE6
          try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
            // 适用于IE5.5,以及IE更早版本
            try{
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){}
          }
        }      
        return xmlHttp;
      }
    

    2、使用流程

    1、打开与服务器的连接(open)

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

    open(method, url, async):

    method:请求方式,通常为GET或POST;

    url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为GET请求,还可以在URL后追加参数;

    async:这个参数可以不给,默认值为true,表示异步请求;

    var xmlHttp = createXMLHttpRequest();

    xmlHttp.open("GET", "/ajax_get/?a=1", true); 

    2、发送请求

    当使用open打开连接后,就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数,即对应HTTP协议的请求体内容,若是GET请求,需要在URL后连接参数。

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

    xmlHttp.send(null);

    3、接收服务器的响应(5个状态,4个过程)

    当请求发送出去后,服务器端就开始执行了,但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

    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');  
          }
        };
    

    其实我们还要关心服务器响应的状态码xmlHttp.status是否为200,其服务器响应为404,或500,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

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

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

    需要注意的:

    如果是post请求:

    基于JS的ajax没有Content-Type这个参数了,也就不会默认是urlencode这种形式了,需要我们自己去设置
    <1>需要设置请求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
    注意 :form表单会默认这个键值对不设定,Web服务器会忽略请求体的内容。
    
    <2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)
    
    基于jQuery的ajax和form发送的请求,都会默认有Content-Type,默认urlencode,
    
    Content-Type:客户端告诉服务端我这次发送的数据是什么形式的
    dataType:客户端期望服务端给我返回我设定的格式
    

    如果是get请求:

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

    小练习:和上面的练习一样,只是换了一种方式(可以和jQuery的对比一下)

    <script>
    方式一=======================================
      //基于JS实现实现用urlencode的方式
      var ele_btn = document.getElementsByClassName("send_ajax")[0];
      ele_btn.onclick = function () { //绑定事件
        alert(5555);
        //发送ajax:有一下几步
        //(1)获取XMLResquest对象
        xmlhttp = new XMLHttpRequest();
        //(2)连接服务器
        //get请求的时候,必用send发数据,直接在请求路径里面发
    {#    xmlhttp.open("get","/sendAjax/?a=1&b=2");//open里面的参数,请求方式,请求路径#}
        //post请求的时候,需要用send发送数据
        xmlhttp.open("post","/sendAjax/");
        //设置请求头的Content-Type
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //(3)发送数据
        var ele_num1 = document.getElementsByClassName("num1")[0];
        var ele_num2 = document.getElementsByClassName("num2")[0];
        var ele_ret = document.getElementsByClassName("ret")[0];
        var ele_scrf = document.getElementsByName("csrfmiddlewaretoken")[0];
    
    
        var s1 = "num1=" ele_num1.value;
        var s2 = "num2=" ele_num2.value;
        var s3 = "&csrfmiddlewaretoken=" ele_scrf.value;
        xmlhttp.send(s1 "&" s2 s3); //请求数据
        //(4)回调函数,success
        xmlhttp.onreadystatechange = function () {
          if (this.readyState==4&&this.status==200){
            alert(this.responseText);
            ele_ret.value = this.responseText
          }
        }
      }
    
    
    方式二====================================================
    
    {#  ===================json=============#}
      var ele_btn=document.getElementsByClassName("send_ajax")[0];
      ele_btn.onclick=function () {
    
        // 发送ajax
    
         // (1) 获取 XMLHttpRequest对象
         xmlHttp = new XMLHttpRequest();
    
         // (2) 连接服务器
        // get
        //xmlHttp.open("get","/sendAjax/?a=1&b=2");
    
        // post
        xmlHttp.open("post","/sendAjax/");
    
        // 设置请求头的Content-Type
        var ele_csrf=document.getElementsByName("csrfmiddlewaretoken")[0];
        xmlHttp.setRequestHeader("Content-Type","application/json");
        xmlHttp.setRequestHeader("X-CSRFToken",ele_csrf.value); //利用js的方式避免forbidden的解决办法
    
        // (3) 发送数据
         var ele_num1 = document.getElementsByClassName("num1")[0];
        var ele_num2 = document.getElementsByClassName("num2")[0];
        var ele_ret = document.getElementsByClassName("ret")[0];
    
    
        var s1 = ele_num1.value;
        var s2 = ele_num2.value;
        xmlHttp.send(JSON.stringify(
          {"num1":s1,"num2":s2}
        )) ;  // 请求体数据
        // (4) 回调函数 success
        xmlHttp.onreadystatechange = function() {
          if(this.readyState==4 && this.status==200){
            console.log(this.responseText);
            ele_ret.value = this.responseText
          }
        };
      }
    
    
    
    
    
    
    
    </script>
    

    views.py

    def sendAjax(request):
      num1=request.POST.get("num1")
      num2 = request.POST.get("num2")
      ret = float(num1) float(num2)
      return HttpResponse(ret)
    

    新葡亰496net 4

    JS实现ajax小结

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

    总结:

    - 如果"Content-Type"="application/json",发送的数据是对象形式的{},需要在body里面取数据,然后反序列化
    = 如果"Content-Type"="application/x-www-form-urlencoded",发送的是/index/?name=haiyan&agee=20这样的数据,
     如果是POST请求需要在POST里取数据,如果是GET,在GET里面取数据
    

    实例(用户名是否已被注册)

    7.1 功能介绍

    在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

    客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

    7.2 案例分析

    页面中给出注册表单;

    在username表单字段中添加onblur事件,调用send()方法;

    send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;

    django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false

    参考代码:

    <script type="text/javascript">
        function createXMLHttpRequest() {
          try {
            return new XMLHttpRequest();
          } catch (e) {
            try {
              return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
              return new ActiveXObject("Microsoft.XMLHTTP");
            }
          }
        }
    
        function send() {
          var xmlHttp = createXMLHttpRequest();
          xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              if(xmlHttp.responseText == "true") {
                document.getElementById("error").innerText = "用户名已被注册!";
                document.getElementById("error").textContent = "用户名已被注册!";
              } else {
                document.getElementById("error").innerText = "";
                document.getElementById("error").textContent = "";
              }
            }
          };
          xmlHttp.open("POST", "/ajax_check/", true, "json");
          xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          var username = document.getElementById("username").value;
          xmlHttp.send("username="   username);
        }
    </script>
    
    //--------------------------------------------------index.html
    
    <h1>注册</h1>
    <form action="" method="post">
    用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
    密 码:<input type="text" name="password"/><br/>
    <input type="submit" value="注册"/>
    </form>
    
    
    //--------------------------------------------------views.py
    from django.views.decorators.csrf import csrf_exempt
    
    def login(request):
      print('hello ajax')
      return render(request,'index.html')
      # return HttpResponse('helloyuanhao')
    
    @csrf_exempt
    def ajax_check(request):
      print('ok')
    
      username=request.POST.get('username',None)
      if username=='yuan':
        return HttpResponse('true')
      return HttpResponse('false')
    

    三、同源策略与jsonp

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

    同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
    jsonp(jsonpadding)

    之前发ajax的时候都是在自己给自己的当前的项目下发

    现在我们来实现跨域发。给别人的项目发数据,

    创建两个项目,先来测试一下

    项目一:

    <body>
    <h1>项目一</h1>
    <button class="send_jsonp">jsonp</button>
    <script>
      $(".send_jsonp").click(function () {
        $.ajax({
          url:"http://127.0.0.1:8080/ajax_send2/",  #去请求项目二中的url
          success:function (data) {
            console.log(data)
          }
        })
      })
    </script>
    </body>
    

    项目二:

    =========================index.html===============
    <h1>项目二</h1>
    <button class="send_jsonp">jsonp</button>
    <script>
      $(".send_jsonp").click(function () {
        $.ajax({
          url:"/ajax_send2/",
          success:function (data) {
            console.log(data)
          }
        })
      })
    </script>
    </body>
    
    =========================views===============
    
    from django.shortcuts import render,HttpResponse
    
    # Create your views here.
    def index(request):
      return render(request, "index.html")
    def ajax_send2(request):
      print(222222)
      return HttpResponse("hello")
    

    出现了一个错误,这是因为同源策略给限制了,这是游览器给我们报的一个错

    新葡亰496net 5

    (但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。)

    新葡亰496net 6

    注意:a标签,form,img标签,引用cdn的css等也属于跨域(跨不同的域拿过来文件来使用),不是所有的请求都给做跨域,(为什么要进行跨域呢?因为我想用人家的数据,所以得去别人的url中去拿,借助script标签)

    如果用script请求的时候也会报错,当你你返回的数据是一个return Httpresponse(“项目二”)只是一个名字而已,js中如果有一个变量没有声明,就会报错。就像下面的这样了

    <script src="http://127.0.0.1:8080/ajax_send2/">
      项目二
    </script>
    

    新葡亰496net 7

    只有发ajax的时候给拦截了,所以要解决的问题只是针对ajax请求能够实现跨域请求

    解决同源策源的两个方法:

    1、jsonp(将JSON数据填充进回调函数,这就是JSONP的JSON Padding的含义。)

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

    思考:这算怎么回事?

    <script src="http://www.paidtyping.com/uploads/allimg/190922/1104144W8-9.jpg"></script>
    

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

    所以只是单纯的返回一个也没有什么意义,我们需要的是数据

    如下:可以返回一个字典,不过也可以返回其他的(简单的解决了跨域,利用script)

    项目一:

    <body>
    <h1>项目一</h1>
    <button class="send_jsonp">jsonp</button>
    <script>
      $(".send_jsonp").click(function () {
        $.ajax({
          url:"",
          success:function (data) {
            console.log(data)
          }
        })
      });
    
      function func(arg) {
        console.log(arg)
      }
    </script>
    <script src="http://127.0.0.1:8080/ajax_send2/"></script>
    </body>
    

    项目二:

    def ajax_send2(request):
      import json
      print(222222)
      # return HttpResponse("func('name')")
      s = {"name":"haiyan","age":12}
      # return HttpResponse("func('name')")
      return HttpResponse("func('%s')"%json.dumps(s))  #返回一个func()字符串,正好自己的ajax里面有个func函数,就去执行func函数了,
                                    arg就是传的形参
    

    这样就会取到值了

    新葡亰496net 8

    这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

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

    但是以上的方式也有不足,回调函数的名字和返回的那个名字的一致。并且一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。

    解决办法:javascript动态的创建script标签

    ===========================jQuery实现=====================
    {#  创建一个script标签,让他请求一次,请求完了删除他#}
      //动态生成一个script标签,直接可以定义个函数,放在函数里面
      function add_script(url) {
        var ele_script = $("<script>");
        ele_script.attr("src",url);
        ele_script.attr("id","script");
        $("body").append(ele_script);
        $("#script").remove()
      }
      $(".kuayu").click(function () {
        add_script("http://127.0.0.1:8080/ajax_send2/")
      });
    
    
    </script>
    
    
    
    ==================js实现==========================
    <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>
    

    为了更加灵活,现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:

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

    将视图views改为

    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])方法

    <button onclick="f()">sendAjax</button>
    
    <script>
    
      function f(){
         $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
          alert("hello" arg)
        }); 匿名函数
      }
    
    </script>
    

    新葡亰496net 9

    8002的views不改动。

    结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个?是内部自动生成的一个回调函数名。

    此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

    $.ajax

    <script>
    
      function f(){
         $.ajax({
            url:"http://127.0.0.1:7766/SendAjax/",
            dataType:"jsonp",  
            jsonp: 'callbacks',  #键
              jsonpCallback:"SayHi" #函数的名字
     }); } function SayHi(arg){ alert(arg); } </script>
    

    8002的views不改动。

    当然,最简单的形式还是通过回调函数来处理:

    <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>
    

    jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',server端接受callback键对应值后就可以在其中填充数据打包返回了;

    jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。  

    注意 JSONP一定是GET请求

    五、应用

    // 跨域请求实例
      $(".jiangxiTV").click(function () {
    
        $.ajax({
          url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
           dataType: 'jsonp',
           jsonp: 'callback',
           jsonpCallback: 'list',
           success:function (data) {
             console.log(data.data);  // [{},{},{},{},{},{}]
             week_list=data.data;
    
             $.each(week_list,function (i,j) {
               console.log(i,j); // 1 {week: "周一", list: Array(19)}
               s="<p>" j.week "列表</p>";
               $(".show_list").append(s);
    
               $.each(j.list,function (k,v) { // {time: "0030", name: "通宵剧场六集连播", link: "http://www.jxntv.cn/live/jxtv2.shtml"}
                 a="<p><a href='" v.link "'>" v.name "</a></p>";
                 $(".show_list").append(a);
               })
             })
    
           }
        })
    
    
      })
    

    以上这篇JS实现的ajax和同源策略(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

    一、回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送...

    二、AJAX常见应用情景

    新葡亰496net 10

    当我们在百度中输入一个“老”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的4个关键字。

    其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这4个关键字显示在下拉列表中。

    • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
    • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

     新葡亰496net 11

    当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

    • 整个过程中页面没有刷新,只是局部刷新了;
    • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

    什么是json?

    定义:

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

    讲json对象,不得不提到JS对象:

    新葡亰496net 12

    合格的json对象:

    ["one", "two", "three"]
    
    { "one": 1, "two": 2, "three": 3 }
    
    {"names": ["张三", "李四"] }
    
    [ { "name": "张三"}, {"name": "李四"} ]
    

     不合格的json对象:

    新葡亰496net 13新葡亰496net 14

    { 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;}    // 不能使用函数和日期对象
    }
    

    View Code

    新葡亰496net,什么是json?

    定义:

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

    讲json对象,不得不提到JS对象:

     

    新葡亰496net 15

     

    合格的json对象:

    新葡亰496net 16新葡亰496net 17

    1 ["one", "two", "three"]
    2 
    3 { "one": 1, "two": 2, "three": 3 }
    4 
    5 {"names": ["张三", "李四"] }
    6 
    7 [ { "name": "张三"}, {"name": "李四"} ]
    

    View Code

     

     不合格的json对象:

    新葡亰496net 18新葡亰496net 19

     1 { name: "张三", 'age': 32 }                     // 属性名必须使用双引号
     2 
     3 [32, 64, 128, 0xFFF] // 不能使用十六进制值
     4 
     5 { "name": "张三", "age": undefined }            // 不能使用undefined
     6 
     7 { "name": "张三",
     8   "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
     9   "getName":  function() {return this.name;}    // 不能使用函数和日期对象
    10 }
    

    View Code

     

    Ajax准备知识:json

     三、AJAX的优缺点

    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"})) ;
    

    stringify与parse方法

    新葡亰496net 20

    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"})) ; 
    

    新葡亰496net 21

    什么是json?

    定义:

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

    讲json对象,不得不提到JS对象:

     

    新葡亰496net 22

     

    合格的json对象:

    新葡亰496net 23新葡亰496net 24

    ["one", "two", "three"]
    
    { "one": 1, "two": 2, "three": 3 }
    
    {"names": ["张三", "李四"] }
    
    [ { "name": "张三"}, {"name": "李四"} ] 
    

    View Code

     不合格的json对象:

    新葡亰496net 25新葡亰496net 26

    { 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;}    // 不能使用函数和日期对象
    }  
    

    View Code

    优点:

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

    和XML的比较

    JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。

    JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。

    XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。

    用XML表示中国部分省市数据如下:

    新葡亰496net 27新葡亰496net 28

    <?xml version="1.0" encoding="utf-8"?>
    <country>
        <name>中国</name>
        <province>
            <name>黑龙江</name>
            <cities>
                <city>哈尔滨</city>
                <city>大庆</city>
            </cities>
        </province>
        <province>
            <name>广东</name>
            <cities>
                <city>广州</city>
                <city>深圳</city>
                <city>珠海</city>
            </cities>
        </province>
        <province>
            <name>台湾</name>
            <cities>
                <city>台北</city>
                <city>高雄</city>
            </cities>
        </province>
        <province>
            <name>新疆</name>
            <cities>
                <city>乌鲁木齐</city>
            </cities>
        </province>
    </country>
    

    View Code

    用JSON表示如下:

    新葡亰496net 29新葡亰496net 30

    {
        "name": "中国",
        "province": [{
            "name": "黑龙江",
            "cities": {
                "city": ["哈尔滨", "大庆"]
            }
        }, {
            "name": "广东",
            "cities": {
                "city": ["广州", "深圳", "珠海"]
            }
        }, {
            "name": "台湾",
            "cities": {
                "city": ["台北", "高雄"]
            }
        }, {
            "name": "新疆",
            "cities": {
                "city": ["乌鲁木齐"]
            }
        }]
    }
    

    View Code

    可以看到,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。

    注意:

    JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。

    但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构,更快的精确定位JSON格式错误。

    和XML的比较

    JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。

    JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。

    XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。

    用XML表示中国部分省市数据如下:

    新葡亰496net 31新葡亰496net 32

     1 <?xml version="1.0" encoding="utf-8"?>
     2 <country>
     3     <name>中国</name>
     4     <province>
     5         <name>黑龙江</name>
     6         <cities>
     7             <city>哈尔滨</city>
     8             <city>大庆</city>
     9         </cities>
    10     </province>
    11     <province>
    12         <name>广东</name>
    13         <cities>
    14             <city>广州</city>
    15             <city>深圳</city>
    16             <city>珠海</city>
    17         </cities>
    18     </province>
    19     <province>
    20         <name>台湾</name>
    21         <cities>
    22             <city>台北</city>
    23             <city>高雄</city>
    24         </cities>
    25     </province>
    26     <province>
    27         <name>新疆</name>
    28         <cities>
    29             <city>乌鲁木齐</city>
    30         </cities>
    31     </province>
    32 </country>
    

    View Code

     

    用JSON表示如下:

    新葡亰496net 33新葡亰496net 34

     1 {
     2     "name": "中国",
     3     "province": [{
     4         "name": "黑龙江",
     5         "cities": {
     6             "city": ["哈尔滨", "大庆"]
     7         }
     8     }, {
     9         "name": "广东",
    10         "cities": {
    11             "city": ["广州", "深圳", "珠海"]
    12         }
    13     }, {
    14         "name": "台湾",
    15         "cities": {
    16             "city": ["台北", "高雄"]
    17         }
    18     }, {
    19         "name": "新疆",
    20         "cities": {
    21             "city": ["乌鲁木齐"]
    22         }
    23     }]
    24 }
    

    View Code

     

      可以看到,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。

    注意:

    JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。

    但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构,更快的精确定位JSON格式错误。

    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虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
    • 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;

    Ajax简介

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

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

    AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

    js实现的局部刷新:

    新葡亰496net 35新葡亰496net 36

    <!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(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

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

    AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

    js实现的局部刷新:

    新葡亰496net 37新葡亰496net 38

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 
     7     <style>
     8         .error{
     9             color:red
    10         }
    11     </style>
    12 </head>
    13 <body>
    14 
    15 
    16 <form class="Form">
    17 
    18     <p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>
    19     <p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>
    20     <p><input type="submit" value="submit"></p>
    21 
    22 </form>
    23 
    24 <script src="jquery-3.1.1.js"></script>
    25 
    26 <script>
    27 
    28     $(".Form :submit").click(function(){
    29 
    30         flag=true;
    31 
    32         $("Form .v1").each(function(){
    33 
    34             var value=$(this).val();
    35             if (value.trim().length==0){
    36                  var mark=$(this).attr("mark");
    37                  var $span=$("");
    38                  $span.html(mark "不能为空!");
    39                  $span.prop("class","error");
    40                  $(this).after($span);
    41 
    42                  setTimeout(function(){
    43                       $span.remove();
    44                  },800);
    45 
    46                  flag=false;
    47                  return flag;
    48 
    49             }
    50         });
    51         return flag
    52     });
    53 
    54 
    55 </script>
    56 
    57 
    58 </body>
    59 </html>
    

    View Code

     

    和XML的比较

    JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。

    JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。

    XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。

    用XML表示中国部分省市数据如下:

    新葡亰496net 39新葡亰496net 40

    <?xml version="1.0" encoding="utf-8"?>
    <country>
        <name>中国</name>
        <province>
            <name>黑龙江</name>
            <cities>
                <city>哈尔滨</city>
                <city>大庆</city>
            </cities>
        </province>
        <province>
            <name>广东</name>
            <cities>
                <city>广州</city>
                <city>深圳</city>
                <city>珠海</city>
            </cities>
        </province>
        <province>
            <name>台湾</name>
            <cities>
                <city>台北</city>
                <city>高雄</city>
            </cities>
        </province>
        <province>
            <name>新疆</name>
            <cities>
                <city>乌鲁木齐</city>
            </cities>
        </province>
    </country>
    

    View Code

    用JSON表示如下:

    新葡亰496net 41新葡亰496net 42

    {
        "name": "中国",
        "province": [{
            "name": "黑龙江",
            "cities": {
                "city": ["哈尔滨", "大庆"]
            }
        }, {
            "name": "广东",
            "cities": {
                "city": ["广州", "深圳", "珠海"]
            }
        }, {
            "name": "台湾",
            "cities": {
                "city": ["台北", "高雄"]
            }
        }, {
            "name": "新疆",
            "cities": {
                "city": ["乌鲁木齐"]
            }
        }]
    }
    

    View Code

     

      可以看到,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。

    注意:

    JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。

    但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构,更快的精确定位JSON格式错误。

     

     四、AJAX技术

    AJAX**常见应用情景**

    当我们在百度中输入一个“老”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的4个关键字。

    其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这4个关键字显示在下拉列表中。

    • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
    • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

    新葡亰496net 43

     

     

    当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

    • 整个过程中页面没有刷新,只是局部刷新了;
    • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作

    AJAX**常见应用情景**

    当我们在百度中输入一个“老”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的4个关键字。

    其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这4个关键字显示在下拉列表中。

    • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
    • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

           新葡亰496net 44

     

    当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

    • 整个过程中页面没有刷新,只是局部刷新了;
    • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

    Ajax简介

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

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

    AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

    js实现的局部刷新:

    新葡亰496net 45新葡亰496net 46

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .error{
                color:red
            }
        </style>
    </head>
    <body>
    
    
    <form class="Form">
    
        <p>姓名  <input class="v1" type="text" name="username" mark="用户名"></p>
        <p>密码  <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(){   //设置计时器,0.8秒后删除span标签
                          $span.remove();
                     },800);
    
                     flag=false;
                     return flag;
    
                }
            });
            return flag
        });
    
    
    </script>
    
    
    </body>
    </html>
    

    View Code

      

    四步操作:

    • 创建核心对象;
    • 使用核心对象打开与服务器的连接;
    • 发送请求
    • 注册监听,监听服务器响应。

    AJAX**的优缺点**

    AJAX**的优缺点**

    AJAX**常见应用情景**

    当我们在百度中输入一个“老”字后,会马上出现一个下拉列表!列表中显示的是包含“传”字的4个关键字。

    其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这4个关键字显示在下拉列表中。

    • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
    • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

           新葡亰496net 47

     

    当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

    • 整个过程中页面没有刷新,只是局部刷新了;
    • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

    XMLHTTPRequest

    • open(请求方式, URL, 是否异步)
    • send(请求体)
    • onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用
    • readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束
    • status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;
    • responseText:获取服务器的响应体

    优点:

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

    优点:

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

    AJAX**的优缺点**

     五、AJAX实现

    jquery实现的ajax

    新葡亰496net 48新葡亰496net 49

    {% load staticfiles %}
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
    </head>
    <body>
    
    <button class="send_Ajax">send_Ajax</button>
    
    <script>
          //$.ajax的两种使用方式:
    
          //$.ajax(settings);
          //$.ajax(url,[settings]);
    
    
           $(".send_Ajax").click(function(){
    
               $.ajax({
                   url:"/handle_Ajax/",
                   type:"POST",
                   data:{username:"Yuan",password:123},
    
                   success:function(data){
                       alert(data)
                   },
    
                     //=================== error============
    
                    error: function (jqXHR, textStatus, err) {
    
                            // jqXHR: jQuery增强的xhr
                            // textStatus: 请求完成状态
                            // err: 底层通过throw抛出的异常对象,值与错误类型有关
                            console.log(arguments);
                        },
    
                     //=================== complete============
    
                    complete: function (jqXHR, textStatus) {
                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态 success | error
                        console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                        console.log('textStatus: %s', textStatus);
                    },
    
                    //=================== statusCode============
                    statusCode: {
                        '403': function (jqXHR, textStatus, err) {
                            console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
                         },
    
                        '400': function () {
                        }
                    }
    
               })
    
           })
    
    </script>
    </body>
    </html>
    

    View Code

    jquery实现的ajax

    新葡亰496net 50

    {% load staticfiles %}
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
    </head>
    <body>
    
    <button class="send_Ajax">send_Ajax</button>
    
    <script>
          //$.ajax的两种使用方式:
    
          //$.ajax(settings);
          //$.ajax(url,[settings]);
    
    
           $(".send_Ajax").click(function(){
    
               $.ajax({
                   url:"/handle_Ajax/",
                   type:"POST",
                   data:{username:"Yuan",password:123},
    
                   success:function(data){
                       alert(data)
                   },
    
                     //=================== error============
    
                    error: function (jqXHR, textStatus, err) {
    
                            // jqXHR: jQuery增强的xhr
                            // textStatus: 请求完成状态
                            // err: 底层通过throw抛出的异常对象,值与错误类型有关
                            console.log(arguments);
                        },
    
                     //=================== complete============
    
                    complete: function (jqXHR, textStatus) {
                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态 success | error
                        console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                        console.log('textStatus: %s', textStatus);
                    },
    
                    //=================== statusCode============
                    statusCode: {
                        '403': function (jqXHR, textStatus, err) {
                            console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
                         },
    
                        '400': function () {
                        }
                    }
    
               })
    
           })
    
    </script>
    </body>
    </html>
    

    新葡亰496net 51

    优点:

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

     

    5.1 准备工作(后台设定):

    1 def login(request):
    2     print('hello ajax')
    3     return render(request,'index.html')
    4  
    5 def ajax_get(request):
    6     return HttpResponse('hello')
    

    view:

    新葡亰496net 52新葡亰496net 53

    import json,time
    
    def index(request):
    
        return render(request,"index.html")
    
    def handle_Ajax(request):
    
        username=request.POST.get("username")
        password=request.POST.get("password")
    
        print(username,password)
        time.sleep(10)
    
        return HttpResponse(json.dumps("Error Data!"))
    

    View Code

    view:

    新葡亰496net 54新葡亰496net 55

     1 import json,time
     2  
     3 def index(request):
     4  
     5     return render(request,"index.html")
     6  
     7 def handle_Ajax(request):
     8  
     9     username=request.POST.get("username")
    10     password=request.POST.get("password")
    11  
    12     print(username,password)
    13     time.sleep(10)
    14  
    15     return HttpResponse(json.dumps("Error Data!"))
    

    View Code

     

    jquery实现的ajax

    ******************************************************************
    jquery中各个事件执行顺序如下:
    1.ajaxStart(全局事件)
    2.beforeSend
    3.ajaxSend(全局事件)
    4.success
    5.ajaxSuccess(全局事件)
    6.error
    7.ajaxError (全局事件)
    8.complete
    9.ajaxComplete(全局事件)
    10.ajaxStop(全局事件)
    先执行success,再执行error,最后始终执行complete
    ----------------------
    区别的就是 --- 
    success:当请求成功时调用函数,即status==200;
    complete:当请求完成时调用函数,即status==404、403、302...只要不出错就行。
    
    因为通常我们需要用来清理资源   所以就设计成compelete在success之后执行 
    

     

     

    {% load staticfiles %}
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
    </head>
    <body>
    
    <button class="send_Ajax">send_Ajax</button>
    
    <script>
          //$.ajax的两种使用方式:
    
          //$.ajax(settings);
          //$.ajax(url,[settings]);
    
    
           $(".send_Ajax").click(function(){
    
               $.ajax({
                   url:"/handle_Ajax/",
                   type:"POST",
                   data:{username:"Yuan",password:123},
    
                   success:function(data){
                       alert(data)
                   },
    
                     //=================== error============
    
                    error: function (jqXHR, textStatus, err) {
    
                            // jqXHR: jQuery增强的xhr
                            // textStatus: 请求完成状态
                            // err: 底层通过throw抛出的异常对象,值与错误类型有关
                            console.log(arguments);
                        },
    
                     //=================== complete============
    
                    complete: function (jqXHR, textStatus) {
                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态 success | error
                        console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                        console.log('textStatus: %s', textStatus);
                    },
    
                    //=================== statusCode============
                    statusCode: {
                        '403': function (jqXHR, textStatus, err) {
                            console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
                         },
    
                        '400': function () {
                        }
                    }
    
               })
    
           })
    
    </script>
    </body>
    </html>
    

     

    5.2 AJAX**核心(XMLHttpRequest)**

          其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

    1 var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)
    

    注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

    新葡亰496net 56新葡亰496net 57

     1 function createXMLHttpRequest() {
     2         var xmlHttp;
     3         // 适用于大多数浏览器,以及IE7和IE更高版本
     4         try{
     5             xmlHttp = new XMLHttpRequest();
     6         } catch (e) {
     7             // 适用于IE6
     8             try {
     9                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    10             } catch (e) {
    11                 // 适用于IE5.5,以及IE更早版本
    12                 try{
    13                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    14                 } catch (e){}
    15             }
    16         }            
    17         return xmlHttp;
    18     }
    

    View Code

    $.ajax参数

    $.ajax参数

    view:

    新葡亰496net 58新葡亰496net 59

    import json,time
    
    def index(request):
    
        return render(request,"index.html")
    
    def handle_Ajax(request):
    
        username=request.POST.get("username")
        password=request.POST.get("password")
    
        print(username,password)
        time.sleep(10)
    
        return HttpResponse(json.dumps("Error Data!"))
    

    View Code

     

    5.3** 打开与服务器的连接(open方法)**

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

    open(method, url, async):

    • method:请求方式,通常为GET或POST;
    • url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为GET请求,还可以在URL后追加参数;
    • async:这个参数可以不给,默认值为true,表示异步请求;

      1 var xmlHttp = createXMLHttpRequest(); 2 xmlHttp.open("GET", "/ajax_get/", true); 

    请求参数

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

    请求参数

    新葡亰496net 60

    ######################------------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会对数据进行深层次迭代;  
    

    新葡亰496net 61

    $.ajax参数

    5.4** 发送请求**

    当使用open打开连接后,就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数,即对应HTTP协议的请求体内容,若是GET请求,需要在URL后连接参数。

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

    1 xmlHttp.send(null);
    

    响应参数

    /*
    
    dataType:  预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。
                默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;
                比如我们的服务器响应的content Type为json格式,这时ajax方法就会对响应的内容
                进行一个json格式的转换,if转换成功,我们在success的回调函数里就会得到一个json格式
                的对象;转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用
                data Type。
                dataType的可用值:html|xml|json|text|script
                见下dataType实例
    
    */
    
    from django.shortcuts import render,HttpResponse
    from django.views.decorators.csrf import csrf_exempt
    # Create your views here.
    
    import json
    
    def login(request):
    
        return render(request,'Ajax.html')
    
    
    def ajax_get(request):
    
        l=['alex','little alex']
        dic={"name":"alex","pwd":123}
    
        #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
        #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
        return HttpResponse(json.dumps(l))
        return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)
    
    //---------------------------------------------------
        function testData() {
    
            $.ajax('ajax_get', {
               success: function (data) {
               console.log(data);
               console.log(typeof(data));
               //console.log(data.name);
               //JSON.parse(data);
               //console.log(data.name);
                                         },
               //dataType:"json",
                                }
                           )}
    
    注解:Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象
        设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
        当然,
            return HttpResponse(json.dumps(a),content_type="application/json")
    
        这样就不需要设定dataType:"json"了。
        content_type="application/json"和content_type="json"是一样的!
    

    响应参数

    新葡亰496net 62

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

    新葡亰496net 63

    示例:

    新葡亰496net 64新葡亰496net 65

     1 from django.shortcuts import render,HttpResponse
     2 from django.views.decorators.csrf import csrf_exempt
     3 # Create your views here.
     4 
     5 import json
     6 
     7 def login(request):
     8 
     9     return render(request,'Ajax.html')
    10 
    11 
    12 def ajax_get(request):
    13 
    14     l=['alex','little alex']
    15     dic={"name":"alex","pwd":123}
    16 
    17     #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
    18     #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
    19     return HttpResponse(json.dumps(l))
    20     return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)
    21 
    22 //---------------------------------------------------
    23     function testData() {
    24 
    25         $.ajax('ajax_get', {
    26            success: function (data) {
    27            console.log(data);
    28            console.log(typeof(data));
    29            //console.log(data.name);
    30            //JSON.parse(data);
    31            //console.log(data.name);
    32                                      },
    33            //dataType:"json",
    34                             }
    35                        )}
    36 
    37 注解:Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象
    38     设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
    39     当然,
    40         return HttpResponse(json.dumps(a),content_type="application/json")
    41 
    42     这样就不需要设定dataType:"json"了。
    43     content_type="application/json"和content_type="json"是一样的!
    

    View Code

     

    请求参数

     

    ######################------------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",{
                type:"POST",     
                     headers:{"X-CSRFToken":$.cookie('csrftoken')},   //用json格式发送时,不能把这个放在data中发送,格式会变化,不能识别
                      data:JSON.stringify({     //用了json格式发送时,必须先用这个转换一下才行
                           a:22,
                           b:33
                       }),
                       contentType:"application/json",
    
    
                   });                          //{a: 22, b: 33}
    
                 注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象
    
    
    ######################------------traditional---------################
    
    traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
                  traditional为false会对数据进行深层次迭代;  
    

     

    5.5** 接收服务器响应**

    当请求发送出去后,服务器端Servlet就开始执行了,但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

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

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

    onreadystatechange事件会在状态为1、2、3、4时引发。

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

    1 xmlHttp.onreadystatechange = function() {
    2             alert('hello');
    3         };
    

    但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

    1 xmlHttp.onreadystatechange = function() {
    2             if(xmlHttp.readyState == 4) {
    3                 alert('hello');    
    4             }
    5         };
    

    其实我们还要关心服务器响应的状态码是否为200,其服务器响应为404,或500,那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。

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

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

    csrf跨站请求伪造

    csrf跨站请求伪造

    响应参数

     

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

     

    示例:

    新葡亰496net 66新葡亰496net 67

    from django.shortcuts import render,HttpResponse
    from django.views.decorators.csrf import csrf_exempt
    # Create your views here.
    
    import json
    
    def login(request):
    
        return render(request,'Ajax.html')
    
    
    def ajax_get(request):
    
        l=['alex','little alex']
        dic={"name":"alex","pwd":123}
    
        #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
        #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
        return HttpResponse(json.dumps(l))
        return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)
    
    //---------------------------------------------------
        function testData() {
    
            $.ajax('ajax_get', {
               success: function (data) {
               console.log(data);
               console.log(typeof(data));
               //console.log(data.name);
               //JSON.parse(data);
               //console.log(data.name);
                                         },
               //dataType:"json",
                                }
                           )}
    
    注解:Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象
        设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
        当然,
            return HttpResponse(json.dumps(a),content_type="application/json")
    
        这样就不需要设定dataType:"json"了。
        content_type="application/json"和content_type="json"是一样的!
    

    View Code

    5.6  if 发送POST请求:

          <1>需要设置请求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

                注意 :form表单会默认这个键值对;不设定,Web服务器会忽略请求体的内容。

          <2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)

    方式1

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

    方式1

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

    csrf跨站请求伪造

    5.7** AJAX实现小结**

    新葡亰496net 68新葡亰496net 69

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

    View Code

    方式2

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

    方式2

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

    方式1

    ?

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

    此方法的局限性在于如果js文件单独写到其他文件里,被引用的话,加载时{{csrf_token}}不会被渲染,不会生效

    **5.8  请求完整代码:**

    新葡亰496net 70新葡亰496net 71

     1 <h1>AJAX</h1>
     2 <button onclick="send()">测试</button>
     3 <div id="div1"></div>
     4 
     5 
     6 <script>
     7        function createXMLHttpRequest() {
     8             try {
     9                 return new XMLHttpRequest();//大多数浏览器
    10             } catch (e) {
    11                 try {
    12                     return new ActiveXObject("Msxml2.XMLHTTP");
    13                 } catch (e) {
    14                     return new ActiveXObject("Microsoft.XMLHTTP");
    15                 }
    16             }
    17         }
    18 
    19         function send() {
    20             var xmlHttp = createXMLHttpRequest();
    21             xmlHttp.onreadystatechange = function() {
    22                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    23                     var div = document.getElementById("div1");
    24                     div.innerText = xmlHttp.responseText;
    25                     div.textContent = xmlHttp.responseText;
    26                 }
    27             };
    28 
    29             xmlHttp.open("POST", "/ajax_post/", true);
    30             //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    31             xmlHttp.send(null);  //post: xmlHttp.send("b=B");
    32         }
    33 
    34 
    35 </script>
    36        
    37 #--------------------------------views.py 
    38 from django.views.decorators.csrf import csrf_exempt
    39 
    40 def login(request):
    41     print('hello ajax')
    42     return render(request,'index.html')
    43 
    44 @csrf_exempt   #csrf防御
    45 def ajax_post(request):
    46     print('ok')
    47     return HttpResponse('helloyuanhao')
    

    View Code

    示例

    新葡亰496net 72新葡亰496net 73

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <script src="/static/jquery-3.2.1.min.js"></script>
    {#    <script src="/static/jquery.cookie.js"></script>#}
        <style>
            #sp{
                color: red;
            }
        </style>
    </head>
    <body>
    {% csrf_token %}
    <p> 用户名: <input type="text" name="name"></p>
    <p> 密码: <input type="password" name="pwd"></p>
    <p> <button id="btn">登录</button> </p>
    </body>
    <script>
        $(function () {
            function foo() {
                $("#sp").html('')
            }
            $("#btn").click(function () {
                $.ajax({
                    url:"/login/",
                    type:"POST",
                    data:{csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                        name:$(":text").val(),pwd:$(":password").val()},
                    success:function (data) {
                        data=JSON.parse(data);
                        alert(data);
                        if (!data["flag"]){
                            $("#sp").html("用户名或密码错误");
    
                            setTimeout(foo,3000)
                        }
                    }
                })
            })
        })
    </script>
    </html>
    

    View Code

    方式3:

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

    方式2

    ?

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

    ?

    1
    }<br>})

    六、AJAX实例(用户名是否已被注册)

    方式3:

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

     

    示例:

    新葡亰496net 74新葡亰496net 75

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <script src="/static/jquery-3.2.1.min.js"></script>
        <script src="/static/jquery.cookie.js"></script>
    </head>
    <body>
    
    <form action="">
    {#    {% csrf_token %}#}
        <p>用户名: <input type="text"></p>
        <p>密码: <input type="password" name="pwd"></p>
        <p>头像: <input type="file" name="file"></p>
        <p>
        <button id="btn">注册</button>
    </p>
    </form>
    
    
    </body>
    <script>
        $(function () {
    
            $("#btn").click(function () {
                var formdata = new FormData();
                formdata.append("name", $(":text").val());
                formdata.append("pwd", $(":password").val());
                formdata.append("file", $("[name='file']")[0].files[0]);
                $.ajax({
                    url: "/ajaxupload/",
                    type: "POST",
                    headers: {"X-CSRFToken": $.cookie('csrftoken')},
                    contentType: false,
                    processData: false,
                    data: formdata,
                    success: function (data) {
                        console.log(data)
                    }
                })
            })
        })
    </script>
    </html>
    

    View Code

     

    JS实现的ajax

    方式3:

    ?

    1
    <script src="{% static 'js/jquery.cookie.js' %}"></script>

    ?

    1
    2
    3
    4
    5
    $.ajax({
     
    headers:{"X-CSRFToken":$.cookie('csrftoken')},
     
    })

     

    ajax发送json类型的数据时,跨域伪造要采用此方法,因为如果采用方式二时,data中的格式会发生变化,不能识别格式化后的数据,POST请求则被禁止

     

    6.1** 功能介绍**

    在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

    客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

    JS实现的ajax

    AJAX**核心(XMLHttpRequest)**

          其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

    1
    var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

    注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

    新葡亰496net 76新葡亰496net 77

     1 function createXMLHttpRequest() {
     2         var xmlHttp;
     3         // 适用于大多数浏览器,以及IE7和IE更高版本
     4         try{
     5             xmlHttp = new XMLHttpRequest();
     6         } catch (e) {
     7             // 适用于IE6
     8             try {
     9                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    10             } catch (e) {
    11                 // 适用于IE5.5,以及IE更早版本
    12                 try{
    13                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    14                 } catch (e){}
    15             }
    16         }            
    17         return xmlHttp;
    18     }
    

    View Code

     

    JS实现的ajax

    6.2** 案例分析**

    • 页面中给出注册表单;
    • 在username表单字段中添加onblur事件,调用send()方法;
    • send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;
    • django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false新葡亰496net 78 View Code

    AJAX**核心(XMLHttpRequest)**

       其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

    1
    var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

    注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

    新葡亰496net 79新葡亰496net 80

    function createXMLHttpRequest() {
            var xmlHttp;
            // 适用于大多数浏览器,以及IE7和IE更高版本
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                // 适用于IE6
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    // 适用于IE5.5,以及IE更早版本
                    try{
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){}
                }
            }            
            return xmlHttp;
        }
    

    View Code

    使用流程

    AJAX**核心(XMLHttpRequest)**

          其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说,我们只需要学习一个Javascript的新对象即可。

    ?

    1
    var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

    注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpRequest对象:

    新葡亰496net 81新葡亰496net 82

    function createXMLHttpRequest() {
            var xmlHttp;
            // 适用于大多数浏览器,以及IE7和IE更高版本
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                // 适用于IE6
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    // 适用于IE5.5,以及IE更早版本
                    try{
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){}
                }
            }            
            return xmlHttp;
        }
    

    View Code

    6.3 **代码**

    新葡亰496net 83新葡亰496net 84

     1 <script type="text/javascript">
     2         function createXMLHttpRequest() {
     3             try {
     4                 return new XMLHttpRequest();
     5             } catch (e) {
     6                 try {
     7                     return new ActiveXObject("Msxml2.XMLHTTP");
     8                 } catch (e) {
     9                     return new ActiveXObject("Microsoft.XMLHTTP");
    10                 }
    11             }
    12         }
    13 
    14         function send() {
    15             var xmlHttp = createXMLHttpRequest();
    16             xmlHttp.onreadystatechange = function() {
    17                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    18                     if(xmlHttp.responseText == "true") {
    19                         document.getElementById("error").innerText = "用户名已被注册!";
    20                         document.getElementById("error").textContent = "用户名已被注册!";
    21                     } else {
    22                         document.getElementById("error").innerText = "";
    23                         document.getElementById("error").textContent = "";
    24                     }
    25                 }
    26             };
    27             xmlHttp.open("POST", "/ajax_check/", true, "json");
    28             xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    29             var username = document.getElementById("username").value;
    30             xmlHttp.send("username="   username);
    31         }
    32 </script>
    33 
    34 //--------------------------------------------------index.html
    35 
    36 <h1>注册</h1>
    37 <form action="" method="post">
    38 用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
    39 密 码:<input type="text" name="password"/><br/>
    40 <input type="submit" value="注册"/>
    41 </form>
    42 
    43 
    44 //--------------------------------------------------views.py
    45 from django.views.decorators.csrf import csrf_exempt
    46 
    47 def login(request):
    48     print('hello ajax')
    49     return render(request,'index.html')
    50     # return HttpResponse('hello')
    51 
    52 @csrf_exempt
    53 def ajax_check(request):
    54     print('ok')
    55 
    56     username=request.POST.get('username',None)
    57     if username=='yuan':
    58         return HttpResponse('true')
    59     return HttpResponse('false')
    

    View Code

    使用流程

    步骤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); 

    使用流程

    七、jQuery实现的ajax

    步骤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);

    步骤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); 

    7.1  快捷API:

     

    新葡亰496net 85新葡亰496net 86

     1 <1>$.get(url, [data], [callback], [type])
     2 <2>$.post(url, [data], [callback], [type])  //type: text|html|json|script
     3 
     4 
     5  应用:  
     6     //请求参数应该尽量放在data参数中,因为可以自动编码,手动拼接url要注意编码问题
     7     function testWithDataAndCallback() {
     8         //$.post...
     9 
    10         $.get('/user/list', {type: 1}, function (data, callbacktype, jqXHR) {
    11             console.log(data);//将json字符串解析成json对象
    12         });
    13     }
    14 
    15  --------------
    16 
    17 <3>$.getScript()使用 AJAX 请求,获取和运行 JavaScript:
    18      应用:
    19      function testGetScript() {
    20             // alert(testFun(3, 4));
    21             $.getScript('test.js', function () {
    22                 alert(add(1, 6));
    23             });
    24         }
    25 
    26     // test.js
    27     function add(a,b){
    28        return a b
    29        }  
    30 
    31 <4>$.getJSON()
    32    与$.get()是一样的,只不过就是做后一个参数type必须是json数据了。一般同域操作用$.get()就可以,$.getJson 最主要是用来进行jsonp跨域操作的。
    

    View Code

     

    步骤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);    
                }
            };
    

    步骤2:  发送请求

    当使用open打开连接后,就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数,即对应HTTP协议的请求体内容,若是GET请求,需要在URL后连接参数。

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

    ?

    1
    xmlHttp.send(null);

    POST请求的数据也要写的跟get请求类似

    <script>
     var ele_btn=document.getElementsByTagName('button')[0];
      ele_btn.onclick=function () {
          var xmlHttp = new XMLHttpRequest();
          var n1=document.getElementsByClassName('n1')[0].value;
          var n2=document.getElementsByClassName('n2')[0].value;
          var n3=document.getElementsByClassName('n3')[0];
          var c=document.getElementsByName('csrfmiddlewaretoken')[0].value;
          xmlHttp.open('POST','/send_ajax/');
          xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          xmlHttp.send('n1=' n1 '&n2=' n2 '&csrfmiddlewaretoken=' c);  //跨域伪造拼接时名字必须是csrfmiddlewaretoken,否则失效
    
           xmlHttp.onreadystatechange = function() { 
    
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
          { n3.value=xmlHttp.responseText; } 
        }; }
     </script>
    

     

    7.2  核心API的基本使用:

     

    新葡亰496net 87新葡亰496net 88

     1 <1>  $.ajax的两种写法:
     2 
     3           $.ajax("url",{})
     4           $.ajax({})
     5 
     6 <2>  $.ajax的基本使用
     7 
     8     $.ajax({
     9         url:"//",
    10         data:{a:1,b:2},
    11         type:"GET",
    12         success:function(){}
    13     })
    14 
    15 
    16 
    17 <3> 回调函数
    18 
    19     
    20         $.ajax('/user/allusers', {
    21 
    22             success: function (data) {
    23                 console.log(arguments);
    24             },
    25 
    26             error: function (jqXHR, textStatus, err) {
    27 
    28                 // jqXHR: jQuery增强的xhr
    29                 // textStatus: 请求完成状态
    30                 // err: 底层通过throw抛出的异常对象,值与错误类型有关
    31                 console.log(arguments);
    32             },
    33 
    34             complete: function (jqXHR, textStatus) {
    35                 // jqXHR: jQuery增强的xhr
    36                 // textStatus: 请求完成状态 success | error
    37                 console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
    38                 console.log('textStatus: %s', textStatus);
    39             },
    40 
    41             statusCode: {
    42                 '403': function (jqXHR, textStatus, err) {
    43                     console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
    44                     
    45                 },
    46                 '400': function () {
    47                 }
    48             }
    49         });
    

    View Code

     

    步骤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);    
                }
            };
    

     if 发送POST请求

    <1>需要设置请求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);注意 :form表单会默认这个键值对不设定,Web服务器会忽略请求体的内容。

    <2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)

    步骤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);    
                }
            };
    

    7.3  核心API的重要字段(参数):

     

    新葡亰496net 89新葡亰496net 90

     1 <1> ----------请求数据相关: data, processData, contentType, traditional--------------
     2 
     3        data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认地把它编码成某种格式
     4              (urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。
     5 
     6              # function testData() {
     7              #   $.ajax("/test",{     //此时的data是一个json形式的对象
     8              #      data:{
     9              #        a:1,
    10              #        b:2
    11              #      }      
    12              #   });                   //?a=1&b=2
    13 
    14 processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;if为false,
    15              # 那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString()
    16              # ,最后得到一个[object,Object]形式的结果。   
    17              # {"1":"111","2":"222","3":"333"}.toString();//[object Object]
    18              # 该属性的意义在于,当data是一个dom结构或者xml数据时,我们希望数据不要进行处理,直接发过去,
    19              # 就可以讲其设为true。
    20 
    21 contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
    22              # 用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,
    23              # 比如contentType:"application/json",即向服务器发送一个json字符串: 
    24              #   $.ajax("/ajax_get",{
    25              # 
    26              #      data:JSON.stringify({
    27              #           a:22,
    28              #           b:33
    29              #       }),
    30              #       contentType:"application/json",
    31              #       type:"POST",
    32              #       
    33              #   });                          //{a: 22, b: 33}
    34 
    35              # 注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象
    36 
    37  traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]}, 
    38               traditional为false会对数据进行深层次迭代;          
    39 
    40 
    41 <2> ------------------------ 响应数据: dataType、dataFilter------------------------
    42 
    43 dataType:预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。
    44             # 默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;比如我们的服务器响应的
    45             # content Type为json格式,这时ajax方法就会对响应的内容进行一个json格式的转换,if转换成功,我们在
    46             # success的回调函数里就会得到一个json格式的对象;转换失败就会触发error这个回调函数。如果我们明确地指
    47             # 定目标类型,就可以使用data Type。
    48             # dataType的可用值:html|xml|json|text|script
    49             # 见下dataType实例
    50 
    51 dataFilter: 类型:Function 给 Ajax返回的原始数据的进行预处理的函数。见下dataFilter实例
    52 
    53 <3> 请求类型 type:
    54 
    55     类型:String 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,
    56     如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    57 
    58 <4> 前置处理 beforeSend(XHR)
    59 
    60     类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 
    61     # 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
    62     # 见下beforeSend实例
    63 <5> jsonp  类型:String
    64 
    65     # 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 
    66     # 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
    67 
    68 <6> jsonpCallback  类型:String
    69 
    70     # 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生
    71     # 成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求
    72     # 的时候,指定这个回调函数名。
    

    View Code

     

     发送POST请求

    <1>需要设置请求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);注意 :form表单会默认这个键值对不设定,Web服务器会忽略请求体的内容。

    <2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)

    JS实现ajax小结

    新葡亰496net 91

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

    新葡亰496net 92

    测试代码:

    新葡亰496net 93新葡亰496net 94

     1 <h1>AJAX</h1>
     2 <button onclick="send()">测试</button>
     3 <div id="div1"></div>
     4 
     5 
     6 <script>
     7        function createXMLHttpRequest() {
     8             try {
     9                 return new XMLHttpRequest();//大多数浏览器
    10             } catch (e) {
    11                 try {
    12                     return new ActiveXObject("Msxml2.XMLHTTP");
    13                 } catch (e) {
    14                     return new ActiveXObject("Microsoft.XMLHTTP");
    15                 }
    16             }
    17         }
    18 
    19         function send() {
    20             var xmlHttp = createXMLHttpRequest();
    21             xmlHttp.onreadystatechange = function() {
    22                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    23                     var div = document.getElementById("div1");
    24                     div.innerText = xmlHttp.responseText;
    25                     div.textContent = xmlHttp.responseText;
    26                 }
    27             };
    28 
    29             xmlHttp.open("POST", "/ajax_post/", true);
    30             //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    31             xmlHttp.send(null);  //post: xmlHttp.send("b=B");
    32         }
    33 
    34 
    35 </script>
    36        
    37 #--------------------------------views.py 
    38 from django.views.decorators.csrf import csrf_exempt
    39 
    40 def login(request):
    41     print('hello ajax')
    42     return render(request,'index.html')
    43 
    44 @csrf_exempt   #csrf防御
    45 def ajax_post(request):
    46     print('ok')
    47     return HttpResponse('helloyuanhao')
    

    View Code

     

     if 发送POST请求

    <1>需要设置请求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);注意 :form表单会默认这个键值对不设定,Web服务器会忽略请求体的内容。

    <2>在发送时可以指定请求体了:xmlHttp.send(“username=yuan&password=123”)

    7.4 实例代码

     

    新葡亰496net 95新葡亰496net 96

     1 from django.shortcuts import render,HttpResponse
     2 from django.views.decorators.csrf import csrf_exempt
     3 # Create your views here.
     4 
     5 import json
     6 
     7 def login(request):
     8 
     9     return render(request,'Ajax.html')
    10 
    11 
    12 def ajax_get(request):
    13 
    14     l=['alex','little alex']
    15     dic={"name":"alex","pwd":123}
    16 
    17     #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
    18     #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
    19     return HttpResponse(json.dumps(l))
    20     return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)
    21 
    22 //---------------------------------------------------
    23     function testData() {
    24 
    25         $.ajax('ajax_get', {
    26            success: function (data) {
    27            console.log(data);
    28            console.log(typeof(data));
    29            //console.log(data.name);
    30            //JSON.parse(data);
    31            //console.log(data.name);
    32                                      },
    33            //dataType:"json",
    34                             }
    35                        )}
    36 
    37 注解:Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象
    38     设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
    39     当然,
    40         return HttpResponse(json.dumps(a),content_type="application/json")
    41 
    42     这样就不需要设定dataType:"json"了。
    43     content_type="application/json"和content_type="json"是一样的!
    44 
    45 dataType
    

    dataType

     

    新葡亰496net 97新葡亰496net 98

     1 function testData() {
     2 
     3          $.ajax('ajax_get', {
     4            success: function (data) {
     5                console.log(data);
     6             },
     7 
     8             dataType: 'json',
     9             dataFilter: function(data, type) {
    10                 console.log(data);//["alex", "little alex"]
    11                 console.log(type);//json
    12                 //var tmp =  JSON.parse(data);
    13                 return tmp.length;//2
    14             }
    15         });}
    16 
    17 dataFilter实例
    

    dataFilter

    新葡亰496net 99新葡亰496net 100

     1 function testData() {
     2         $.ajax('ajax_get', {
     3          beforeSend: function (jqXHR, settings) {
     4                 console.log(arguments);
     5                 console.log('beforeSend');
     6                 jqXHR.setRequestHeader('test', 'haha');
     7                 jqXHR.testData = {a: 1, b: 2};
     8             },
     9             success: function (data) {
    10                 console.log(data);
    11             },
    12 
    13             complete: function (xhr) {
    14                 console.log(xhr);
    15                 console.log(xhr.testData);
    16             },
    17 
    18         })};
    19 
    20 beforeSend实例
    

    beforeSend

     

    JS实现ajax小结

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

    测试代码:

    新葡亰496net 101新葡亰496net 102

    <h1>AJAX</h1>
    <button onclick="send()">测试</button>
    <div id="div1"></div>
    
    
    <script>
           function createXMLHttpRequest() {
                try {
                    return new XMLHttpRequest();//大多数浏览器
                } catch (e) {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
            }
    
            function send() {
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        var div = document.getElementById("div1");
                        div.innerText = xmlHttp.responseText;
                        div.textContent = xmlHttp.responseText;
                    }
                };
    
                xmlHttp.open("POST", "/ajax_post/", true);
                //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlHttp.send(null);  //post: xmlHttp.send("b=B");
            }
    
    
    </script>
    
    #--------------------------------views.py 
    from django.views.decorators.csrf import csrf_exempt
    
    def login(request):
        print('hello ajax')
        return render(request,'index.html')
    
    @csrf_exempt   #csrf防御
    def ajax_post(request):
        print('ok')
        return HttpResponse('helloyuanhao')
    

    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时才能获取到!
    
    */
    

     

    测试代码:

    新葡亰496net 103新葡亰496net 104

    <h1>AJAX</h1>
    <button onclick="send()">测试</button>
    <div id="div1"></div>
    
    
    <script>
           function createXMLHttpRequest() {
                try {
                    return new XMLHttpRequest();//大多数浏览器
                } catch (e) {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
            }
    
            function send() {
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        var div = document.getElementById("div1");
                        div.innerText = xmlHttp.responseText;
                        div.textContent = xmlHttp.responseText;
                    }
                };
    
                xmlHttp.open("POST", "/ajax_post/", true);
                //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlHttp.send(null);  //post: xmlHttp.send("b=B");
            }
    
    
    </script>
    
    #--------------------------------views.py 
    from django.views.decorators.csrf import csrf_exempt
    
    def login(request):
        print('hello ajax')
        return render(request,'index.html')
    
    @csrf_exempt   #csrf防御
    def ajax_post(request):
        print('ok')
        return HttpResponse('helloyuanhao') 
    

    View Code

    7.5 csrf跨站请求伪造

     

    新葡亰496net 105新葡亰496net 106

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

    View Code

     

    实例(用户名是否已被注册)

    7.1** 功能介绍**

    在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

    客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

    实例(用户名是否已被注册)

    八、跨域请求 与 JSONP

    7.1** 功能介绍**

    在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

    客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

    7.2** 案例分析**

    • 页面中给出注册表单;
    • 在username表单字段中添加onblur事件,调用send()方法;
    • send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;
    • django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false

    参考代码:

    新葡亰496net 107新葡亰496net 108

     1 <script type="text/javascript">
     2         function createXMLHttpRequest() {
     3             try {
     4                 return new XMLHttpRequest();
     5             } catch (e) {
     6                 try {
     7                     return new ActiveXObject("Msxml2.XMLHTTP");
     8                 } catch (e) {
     9                     return new ActiveXObject("Microsoft.XMLHTTP");
    10                 }
    11             }
    12         }
    13 
    14         function send() {
    15             var xmlHttp = createXMLHttpRequest();
    16             xmlHttp.onreadystatechange = function() {
    17                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    18                     if(xmlHttp.responseText == "true") {
    19                         document.getElementById("error").innerText = "用户名已被注册!";
    20                         document.getElementById("error").textContent = "用户名已被注册!";
    21                     } else {
    22                         document.getElementById("error").innerText = "";
    23                         document.getElementById("error").textContent = "";
    24                     }
    25                 }
    26             };
    27             xmlHttp.open("POST", "/ajax_check/", true, "json");
    28             xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    29             var username = document.getElementById("username").value;
    30             xmlHttp.send("username="   username);
    31         }
    32 </script>
    33 
    34 //--------------------------------------------------index.html
    35 
    36 <h1>注册</h1>
    37 <form action="" method="post">
    38 用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
    39 密 码:<input type="text" name="password"/><br/>
    40 <input type="submit" value="注册"/>
    41 </form>
    42 
    43 
    44 //--------------------------------------------------views.py
    45 from django.views.decorators.csrf import csrf_exempt
    46 
    47 def login(request):
    48     print('hello ajax')
    49     return render(request,'index.html')
    50     # return HttpResponse('helloyuanhao')
    51 
    52 @csrf_exempt
    53 def ajax_check(request):
    54     print('ok')
    55 
    56     username=request.POST.get('username',None)
    57     if username=='yuan':
    58         return HttpResponse('true')
    59     return HttpResponse('false')
    

    View Code

     

    7.1** 功能介绍**

    在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回true或false,返回true表示这个用户名已经被注册过,返回false表示没有注册过。

    客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误信息!

    8.1 同源策略机制

          浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。

    简单的来说,浏览器允许包含在页面A的脚本访问第二个页面B的数据资源,这一切是建立在A和B页面是同源的基础上。

    如果Web世界没有同源策略,当你登录淘宝账号并打开另一个站点时,这个站点上的JavaScript可以跨域读取你的淘宝账号数据,这样整个Web世界就无隐私可言了。

    7.2** 案例分析**

    • 页面中给出注册表单;
    • 在username表单字段中添加onblur事件,调用send()方法;
    • send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;
    • django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false

    参考代码:

    新葡亰496net 109新葡亰496net 110

    <script type="text/javascript">
            function createXMLHttpRequest() {
                try {
                    return new XMLHttpRequest();
                } catch (e) {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
            }
    
            function send() {
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        if(xmlHttp.responseText == "true") {
                            document.getElementById("error").innerText = "用户名已被注册!";
                            document.getElementById("error").textContent = "用户名已被注册!";
                        } else {
                            document.getElementById("error").innerText = "";
                            document.getElementById("error").textContent = "";
                        }
                    }
                };
                xmlHttp.open("POST", "/ajax_check/", true, "json");
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                var username = document.getElementById("username").value;
                xmlHttp.send("username="   username);
            }
    </script>
    
    //--------------------------------------------------index.html
    
    <h1>注册</h1>
    <form action="" method="post">
    用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
    密 码:<input type="text" name="password"/><br/>
    <input type="submit" value="注册"/>
    </form>
    
    
    //--------------------------------------------------views.py
    from django.views.decorators.csrf import csrf_exempt
    
    def login(request):
        print('hello ajax')
        return render(request,'index.html')
        # return HttpResponse('helloyuanhao')
    
    @csrf_exempt
    def ajax_check(request):
        print('ok')
    
        username=request.POST.get('username',None)
        if username=='yuan':
            return HttpResponse('true')
        return HttpResponse('false')
    

    View Code

    jQuery.serialize()

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

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

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

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

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

    7.2** 案例分析**

    • 页面中给出注册表单;
    • 在username表单字段中添加onblur事件,调用send()方法;
    • send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username;
    • django 的视图函数:获取username参数,判断是否为“yuan”,如果是响应true,否则响应false

    参考代码:

    新葡亰496net 111新葡亰496net 112

    <script type="text/javascript">
            function createXMLHttpRequest() {
                try {
                    return new XMLHttpRequest();
                } catch (e) {
                    try {
                        return new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
            }
    
            function send() {
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        if(xmlHttp.responseText == "true") {
                            document.getElementById("error").innerText = "用户名已被注册!";
                            document.getElementById("error").textContent = "用户名已被注册!";
                        } else {
                            document.getElementById("error").innerText = "";
                            document.getElementById("error").textContent = "";
                        }
                    }
                };
                xmlHttp.open("POST", "/ajax_check/", true, "json");
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                var username = document.getElementById("username").value;
                xmlHttp.send("username="   username);
            }
    </script>
    
    //--------------------------------------------------index.html
    
    <h1>注册</h1>
    <form action="" method="post">
    用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
    密 码:<input type="text" name="password"/><br/>
    <input type="submit" value="注册"/>
    </form>
    
    
    //--------------------------------------------------views.py
    from django.views.decorators.csrf import csrf_exempt
    
    def login(request):
        print('hello ajax')
        return render(request,'index.html')
        # return HttpResponse('helloyuanhao')
    
    @csrf_exempt
    def ajax_check(request):
        print('ok')
    
        username=request.POST.get('username',None)
        if username=='yuan':
            return HttpResponse('true')
        return HttpResponse('false')
    

    View Code

     

    8.2  jsonp的js实现

             JSONP是JSON with Padding的略称。可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

    它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

    JSONP就像是JSON Padding一样(Padding这里我们理解为填充)

     

    JSONP 原理:

    由于浏览器具有同源策略,所以默认跨域请求不能发送,
    但script块的src属性不受同源策略影响。
    因此,可以动态的生成script标签,通过它的src属性进行访问,并获得返回的字符串,
    在script块内被编译成javascript代码,
    如果这段代码恰好对应于内部已经定义好的回调函数,那么就会自动调用。
    

     

    实例:

     

    新葡亰496net 113新葡亰496net 114

     1 #---------------------------http://127.0.0.1:8001/login
     2 
     3  def login(request):
     4     print('hello ajax')
     5     return render(request,'index.html')
     6  #---------------------------返回用户的index.html
     7  <h1>发送JSONP数据</h1>
     8 
     9 
    10 <script>
    11     function fun1(arg){
    12         alert("hello" arg)
    13     }
    14 </script>
    15 <script src="http://127.0.0.1:8002/get_byjsonp/"></script>  //返回:<script>fun1("yuan")</script>
    16 
    17 #-----------------------------http://127.0.0.1:8002/get_byjsonp
    18 
    19 def get_byjsonp(req):
    20     print('8002...')
    21     return HttpResponse('fun1("yuan")')
    

    View Code

     

          这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调

    将JSON数据填充进回调函数,这应该就是JSONP的JSON Padding的含义吧。

          一般情况下,我们希望这个script标签能够动态的调用,而不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。我们可以通过javascript动态的创建script标签,这样我们就可以灵活调用远程服务了。

     

    新葡亰496net 115新葡亰496net 116

     1 <button onclick="f()">submit</button>
     2 
     3 <script>
     4     function addScriptTag(src){
     5      var script = document.createElement('script');
     6          script.setAttribute("type","text/javascript");
     7          script.src = src;
     8          document.body.appendChild(script);
     9          document.body.removeChild(script);
    10     }
    11     function fun1(arg){
    12         alert("hello" arg)
    13     }
    14     
    15     function f(){
    16          addScriptTag("http://127.0.0.1:8002/get_byjsonp/")
    17     }
    18 </script>
    

    View Code

     

     为了更加灵活,现在将你自己在客户端定义的回调函数的函数名传送给服务端,服务端则会返回以你定义的回调函数名的方法,将获取的json数据传入这个方法完成回调:

     

    新葡亰496net 117新葡亰496net 118

     1 <button onclick="f()">submit</button>
     2 
     3 <script>
     4     function addScriptTag(src){
     5      var script = document.createElement('script');
     6          script.setAttribute("type","text/javascript");
     7          script.src = src;
     8          document.body.appendChild(script);
     9          document.body.removeChild(script);
    10     }
    11     function SayHi(arg){
    12         alert("Hello " arg)
    13     }
    14 
    15     function f(){
    16          addScriptTag("http://127.0.0.1:8002/get_byjsonp/?callbacks=SayHi")
    17     }
    18 </script>
    19 
    20 
    21 ----------------------views.py
    22 def get_byjsonp(req):
    23 
    24     func=req.GET.get("callbacks")
    25 
    26     return HttpResponse("%s('yuan')"%func)
    

    View Code

     

    jQuery.serialize()

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

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

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

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

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

    语法

    jQuery 1.0 新增该函数。

    1
    jQueryObject.serialize( )

    jQuery.serialize()

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

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

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

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

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

    8.3 jQuery对JSONP的实现

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

     

    新葡亰496net 119新葡亰496net 120

    1 <script type="text/javascript">
    2     $.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){
    3         alert("hello" arg)
    4     });
    5 </script>
    

    View Code

     

          结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。

          此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

     

    新葡亰496net 121新葡亰496net 122

     1 <script type="text/javascript" src="/static/jquery-2.2.3.js"></script>
     2 
     3 <script type="text/javascript">
     4    $.ajax({
     5         url:"http://127.0.0.1:8002/get_byjsonp",
     6         dataType:"jsonp",
     7         jsonp: 'callbacks',
     8         jsonpCallback:"SayHi"
     9    });
    10     function SayHi(arg){
    11         alert(arg);
    12     }
    13 </script>
    14  
    15 #--------------------------------- http://127.0.0.1:8002/get_byjsonp
    16  def get_byjsonp(req):
    17 
    18     callback=req.GET.get('callbacks')
    19     print(callback)
    20     return HttpResponse('%s("yuan")'
    		

    本文由新葡亰496net发布于奥门新萄京娱乐场,转载请注明出处:新葡亰496net实例讲解

    关键词:

上一篇:新葡亰496net:埃氏筛法,高阶函数

下一篇:没有了