Ajax学习全套(最全最经典)

2019-09-14 06:56:32丽君

aylin.com域名这边可以给定义函数

# 采用pythontornado框架来进行的
class IndexHandler(tornado.web.RequestHandler):
  def get(self):
    self.write('func([11,22,33]);')
  def post(self, *args, **kwargs):
    self.write('t2.post')

在这里jsonp就采用script标签的src来进行跨域请求的

二、CORS

上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输,那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候,对方已经收到,但是在返回的时候被浏览器给阻挡,我们可以写一串类似于身份证的字符串,通过浏览器的预检,从而达到数据的传输。

这方面分为简单请求和非简单请求

条件:
  1、请求方式:HEAD、GET、POST
  2、请求头信息:
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type 对应的值是以下三个中的任意一个
                application/x-www-form-urlencoded
                multipart/form-data
                text/plain
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

简单请求只一次请求,而复杂请求是两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

基于cors实现AJAX请求:

1、支持跨域,简单请求

服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>
    <input type="submit" onclick="XmlSendRequest();" />
  </p>
  <p>
    <input type="submit" onclick="JqSendRequest();" />
  </p>
  <script type="text/javascript" src="jquery-1.12.4.js"></script>
  <script>
    function XmlSendRequest(){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4) {
          var result = xhr.responseText;
          console.log(result);
        }
      };
      xhr.open('GET', "http://c2.com:8000/test/", true);
      xhr.send();
    }
    function JqSendRequest(){
      $.ajax({
        url: "http://c2.com:8000/test/",
        type: 'GET',
        dataType: 'text',
        success: function(data, statusText, xmlHttpRequest){
          console.log(data);
        }
      })
    }
  </script>
</body>
</html>
class MainHandler(tornado.web.RequestHandler):
  def get(self):
    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
    self.write('{"status": true, "data": "seven"}')

2、支持跨域,复杂请求

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。