码迷,mamicode.com
首页 > Web开发 > 详细

ajax跨域请求

时间:2018-11-10 23:55:23      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:padding   mooc   ack   生成   变量   响应   content   app   ref   

AJAX/跨域
1. ajax
 $.ajax({
   url:" ... ",
   type: "get"|"post",
   data:"变量=值&..."|{变量:值,...},
   dataType:"json",将json字符串转换为对象
   success:function(res){ //在响应成功结束后自动执行
     //res就是响应的结果
   },
   error(){ 当请求出错时,自动触发 },
   complete(){ 无论成功还是出错,只要请求结束就执行 }
 })
 
2. 跨域:
 什么是: 一个域名下的网站,请求另一个域名下的网站的资源
 问题: ajax禁止发送跨域请求!
 以下情况不允许发送ajax请求:
  2.  http://oa.baidu.com  ajax->  http://hr.baidu.com  yuxing    域名不一样
  3.  http://localhost:3000  ajax->  http://localhost:8000         端口号不一样
  4.  https://baidu.com    ajax->   http://baidu.com                协议不同
  5.  http://localhost      ajax->    http://127.0.0.1
 如何跨域访问: 2种:
  1. JSONP,需要客户端与服务端配合
    什么是:填充式JSON——JSON with Padding
    何时: 今后跨域,首选jsonp
    如何:
     基本思想:用其它可以跨域请求的元素,代替ajax
     程序中都是用<script>元素代替ajax发送请求
     方案一:
      1. 服务端: 将要返回的数据,填充进一条字符串格式的js语句中,组成一条正确的可执行的js语句,
                      再返回
      2. 客户端: 添加<script src="服务器端地址">
      结果: script可跨域请求到服务器返回的js语句,并在客户端立刻执行。
      问题: 服务端返回的js语句是写死的,众口难调。
     方案二:
      1. 服务端: 返回一条自定义函数的调用语句
                    要求客户端必须执行指定名称的函数
      2. 客户端: 提前定义一个与服务端同名的函数
        函数有一个参数可接受服务器端的数据
        函数内可执行任意操作
      问题: 函数名是写死的,极容易发生冲突!
     方案三:
      1. 服务端:接受一个函数名参数
                   将客户端发来的函数名参数拼接到js语句的开头!
      2. 客户端:<script src="地址?参数名=本地函数名"
           问题: script是写死的!只能在页面加载时请求一次
     方案四:
      1. 服务端不变
      2. 客户端: 动态创建script元素
        script只要被加到页面上,就立刻自动请求
        问题: script不断累积
        解决: 在回调函数中自动删除script
    其实: $.ajax也支持jsonp
     $.ajax({
       dataType:"jsonp",
     })
     强调: dataType:"jsonp"需要服务器端配合才能实现。
     其实,dataType:"jsonp"的原理和方案四一致:
      1. 也是通过在head中动态添加<script>发送请求
      2. 也是通过?callback=函数名,发送函数名到服务端
      3. 函数名其实是$.ajax自动为success函数生成的随机函数名。
  2. CORS,只要服务器端允许即可
    在服务器端添加响应头: node中:
      res.writeHead(200,{
         "Content-Type":"application/json;charset=utf-8",
         "Access-Control-Allow-Origin":"指定来源域名"|"*"
       })

ajax跨域请求

标签:padding   mooc   ack   生成   变量   响应   content   app   ref   

原文地址:https://www.cnblogs.com/iamlhr/p/9940965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!