JS에서 구현한 Ajax 및 Same Origin 전략에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS에서 구현한 Ajax 및 Same Origin 전략에 대한 자세한 설명

小云云

May 30, 2018 am 11:59 AM

ajax javascript 상해

JS와 Ajax는 모두 우리 프로그램에 필수적이며 밀접하게 연결되어 있습니다. 이 기사에서는 JS에서 구현된 ajax 및 동일 출처 전략의 예를 주로 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. jQuery로 구현된 ajax 검토

먼저 ajax의 장점과 단점에 대해 이야기해 보겠습니다.

장점:

AJAX는 Javascript 기술을 사용하여 서버에 비동기 요청을 보냅니다.

AJAX 전체 페이지를 새로 고칠 필요가 없습니다.

서버 응답 콘텐츠가 더 이상 전체 페이지가 아니라 페이지의 일부이기 때문에 AJAX 성능이 높습니다.

ajquery

index로 구현됩니다. .html

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="{% static &#39;JS/jquery-3.1.1.js&#39; %}"></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(&#39;statusCode: %d, statusText: %s&#39;, jqXHR.status, jqXHR.statusText);
   console.log(&#39;textStatus: %s&#39;, textStatus);
  },

  //=================== statusCode============
  statusCode: {
   &#39;403&#39;: function (jqXHR, textStatus, err) {
   console.log(arguments); //注意：后端模拟errror方式：HttpResponse.status_code=500
   },

   &#39;400&#39;: 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实例

*/

로그인 후 복사

간단한 연습: 두 숫자의 합을 계산합니다.

방법 1: contentType이 지정되지 않았습니다. 여기: 기본값은 urlencode method입니다

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://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></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(&#39;csrftoken&#39;)}, 
   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)

로그인 후 복사

방법 2: 보낼 json 데이터로 conentType을 지정하세요:

index2.html

<script>
 $(".send_ajax").click(function () {
   $.ajax({
   url:"/sendAjax/",
   type:"post",
   headers:{"X-CSRFToken":$.cookie(&#39;csrftoken&#39;)}, //如果是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&#39;{"num1":"2","num2":"2"}&#39; 注意这时的数据不再POST和GET里，而在body中
 print(type(request.body.decode("utf8"))) # <class &#39;str&#39;>
 # 所以取值的时候得去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)

로그인 후 복사

2. 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: 이 매개변수는 생략 가능하며 기본값은 비동기 요청을 나타냅니다.

var xmlHttp = createXMLHttpRequest(); "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 객체에는 XMLHttpRequest 객체의 상태가 변경될 때 호출되는 onreadystatechange 이벤트가 있습니다. 다음은 XMLHttpRequest 객체의 5가지 상태를 소개합니다.

0: 초기화가 완료되지 않았고 XMLHttpRequest 객체가 생성되었을 뿐이며 open() 메서드가 호출되지 않았습니다.

1: 요청이 시작되었으며 열려 있습니다. () 메소드가 호출되었지만 아직 open() 메소드가 호출되지 않았지만 send() 메소드를 호출합니다.

2: 전송 완료 상태 요청, send() 메소드가 호출되었습니다.

3: 읽기 시작;
4: 서버 응답 읽기가 끝났습니다.

onreadystatechange 이벤트는 상태가 1, 2, 3, 4일 때 트리거됩니다.

다음 코드는 4번 실행됩니다! XMLHttpRequest의 4가지 상태에 대응!

xmlHttp.onreadystatechange = function() {
      alert(&#39;hello&#39;);
    };

로그인 후 복사

하지만 일반적으로 우리는 마지막 상태에만 관심이 있습니다. 즉, 클라이언트는 서버 응답을 읽을 때 변경 사항을 적용합니다. XMLHttpRequest 객체의 ReadyState 속성을 통해 XMLHttpRequest 객체의 상태를 얻을 수 있습니다.

xmlHttp.onreadystatechange = function() {
      if(xmlHttp.readyState == 4) {
        alert(&#39;hello&#39;);  
      }
    };

로그인 후 복사

사실 서버 응답의 상태 코드 xmlHttp.status가 200인지도 신경써야 합니다. 서버 응답이 404나 500이면 요청이 실패한 것입니다. XMLHttpRequest 객체의 상태 속성을 통해 서버의 상태 코드를 얻을 수 있습니다.

마지막으로 서버 응답 내용도 가져와야 합니다. XMLHttpRequest 개체의 responseText를 통해 서버 응답 내용을 가져올 수 있습니다.

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

로그인 후 복사

참고:

게시물 요청인 경우:

基于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(&quot;get&quot;,&quot;/sendAjax/?a=1&amp;b=2&quot;);//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)

로그인 후 복사

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()"/><span id="error"></span><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(&#39;hello ajax&#39;)
  return render(request,&#39;index.html&#39;)
  # return HttpResponse(&#39;helloyuanhao&#39;)

@csrf_exempt
def ajax_check(request):
  print(&#39;ok&#39;)

  username=request.POST.get(&#39;username&#39;,None)
  if username==&#39;yuan&#39;:
    return HttpResponse(&#39;true&#39;)
  return HttpResponse(&#39;false&#39;)

로그인 후 복사

三、同源策略与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")

로그인 후 복사

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

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

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

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

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

로그인 후 복사

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

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

1、jsonp（将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。）

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

思考：这算怎么回事？

<script src="http://code.jquery.com/jquery-latest.js"></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(&#39;name&#39;)")
  s = {"name":"haiyan","age":12}
  # return HttpResponse("func(&#39;name&#39;)")
  return HttpResponse("func(&#39;%s&#39;)"%json.dumps(s))  #返回一个func()字符串，正好自己的ajax里面有个func函数，就去执行func函数了，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　arg就是传的形参

로그인 후 복사

这样就会取到值了

这其实就是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(&#39;script&#39;);
     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(&#39;%s&#39;)"%(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>

로그인 후 복사

8002的views不改动。

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

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

$.ajax

<script>

  function f(){
     $.ajax({
        url:"http://127.0.0.1:7766/SendAjax/",
        dataType:"jsonp",  
        jsonp: &#39;callbacks&#39;,  #键
　　　　　　　　　 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: &#39;callbacks&#39;,     //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: &#39;jsonp&#39;,
       jsonp: &#39;callback&#39;,
       jsonpCallback: &#39;list&#39;,
       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=&#39;"+v.link+"&#39;>"+v.name+"</a></p>";
             $(".show_list").append(a);
           })
         })
         
       }
    })


  })

로그인 후 복사

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7456

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명 Mar 08, 2024 pm 03:06 PM

Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.

Oracle SQL의 나누기 연산에 대한 자세한 설명 Mar 10, 2024 am 09:51 AM

OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 Feb 20, 2024 am 10:07 AM

제목: jQuery AJAX 요청의 403 오류를 해결하는 방법 및 코드 예제 403 오류는 서버가 리소스에 대한 액세스를 금지하는 요청을 의미합니다. 이 오류는 일반적으로 요청에 권한이 없거나 서버에서 거부되기 때문에 발생합니다. jQueryAJAX 요청을 할 때 가끔 이런 상황이 발생합니다. 이 기사에서는 이 문제를 해결하는 방법을 소개하고 코드 예제를 제공합니다. 해결 방법: 권한 확인: 먼저 요청한 URL 주소가 올바른지 확인하고 리소스에 액세스할 수 있는 충분한 권한이 있는지 확인하십시오.

jQuery AJAX 요청 403 오류를 해결하는 방법 Feb 19, 2024 pm 05:55 PM

jQuery는 클라이언트 측 개발을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. AJAX는 전체 웹 페이지를 다시 로드하지 않고 비동기 요청을 보내고 서버와 상호 작용하는 기술입니다. 그러나 jQuery를 사용하여 AJAX 요청을 할 때 가끔 403 오류가 발생합니다. 403 오류는 일반적으로 보안 정책이나 권한 문제로 인해 서버 거부 액세스 오류입니다. 이 기사에서는 403 오류가 발생한 jQueryAJAX 요청을 해결하는 방법에 대해 설명합니다.

PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명 Mar 19, 2024 pm 04:33 PM

PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.

리눅스 시스템콜 system() 함수에 대한 자세한 설명 Feb 22, 2024 pm 08:21 PM

Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.

Linux 컬 명령에 대한 자세한 설명 Feb 21, 2024 pm 10:33 PM

Linux의 컬 명령에 대한 자세한 설명 요약: 컬은 서버와의 데이터 통신에 사용되는 강력한 명령줄 도구입니다. 이 글에서는 컬 명령어의 기본적인 사용법을 소개하고, 독자들이 명령어를 더 잘 이해하고 적용할 수 있도록 실제 코드 예제를 제공할 것입니다. 1. 컬이란 무엇인가? 컬은 다양한 네트워크 요청을 보내고 받는 데 사용되는 명령줄 도구입니다. HTTP, FTP, TELNET 등과 같은 다중 프로토콜을 지원하며 파일 업로드, 파일 다운로드, 데이터 전송, 프록시와 같은 풍부한 기능을 제공합니다.

See all articles

JS에서 구현한 Ajax 및 Same Origin 전략에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제