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

日期：2020-05-11 栏目：程序人生浏览：次

一、回顾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会对数据进行深层次迭代；

转载注明出处：http://www.heiqu.com/1125.html

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

相关推荐