6.21 作业疑问
一、利用jQery实现跨域请求
疑问点:
1.什么是跨域请求
答:不同域名之间的相互访问
2.xhr = XmlHttpRequest()? 的作用代表什么;
答:Ajax 是用XmlHttpRequest来完成请求的。
3.Ajax请求操作;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://www.coob.com:8000/statics/jquery.cookie.js"></script> <script src="{{static_url('jquery-3.2.1.min.js')}}"></script> </head> <body> <div>Welcome home of coob</div> <input type="button" value="Ajax" onclick="DoAjax()"> <script> function DoAjax() { $.ajax({ // 提交到那个网页 url:"/index", // 提交的方式 type:"POST", // 传入的内容 data:{"k1":"v1"}, // #表示执行成功执行这个函数 arg 表示后台write的内容 success:function (arg) { console.log(arg) } }) } </script> </body> </html>
4.hosts是干什么的;
答:路径(windows/system32/drivers/etc/hosts );可以修改IP地址的域名 www.coob.com 等等 (一个ip地址可以有多个域名);
5.callback 是什么;
答:jsonpCallBack:"func" 用于接收后台发的数据
6.CORS 是什么;
答:cors 是ajax的跨域请求,不是利用<script>的方式,而是有两种方式:简单的和复杂的。
习题:
1.通过ti访问t2静态文件中的jQery.cookie;
setting 设置中 值一定要是对应静态文件的名称 ( tmd 这个坑坑的我好惨)"static_url_prefix":"/statics/"
2.访问江西卫视,并把拿到的数据 显示的页面上;
3.ajax jsonp 请求与接受数据
$.ajax({ // 跨域地址 url:"http://www.mary.com:8001/index", // 相当于创建一个script标签 并scr的值是 url 获取值后删除 dataType:"jsonp", // 相当于是创建了一个名为func的函数 等待接受 jsonpCallBack:"func()"
function DoAjax() { // var tager = document.createElement("script"); // tager.src = "http://www.mary.com:8001/index"; // document.head.appendChild(tager); // document.head.removeChild(tager)
3.CORS简单的实现方法;
简单的请求方式有 post 、get 及 ajax 的参数 type值为 post、get。
请求方式下添加一条 即可实现ajax的跨域请求 self.set_header("Access-Control-Allow-Origin","http://www.coob.com:8000") #指定域名可以访问
4.CORS复杂请求的实
需要把请求头放在options 中才可以成功 这就叫做复杂请求 def options(self, *args, **kwargs): self.set_header("Access-Control-Allow-Origin", "*") self.set_header("Access-Control-Allow-Methods", "PUT") def put(self, *args, **kwargs): self.set_header("Access-Control-Allow-Origin", "*") self.write("PUT 成功")
def option(self, *args, **kwargs)
self.set_header("Access-Control-Allow-Origin", "*")
self.set_header("Access-Control-Allow-Methods", "PUT") # 对应 客服端 type:"put"
self.set_header("Access-Control-Allow-Headers", "k1") #对应的 客户端 headers:{"k1":"k2"}