Ajax全套+跨域

 1 AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。
 2 
 3 异步的JavaScript：
 4 使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。
 5 PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。
 6 XML
 7 XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一
 8 利用AJAX可以做：
 9 1、注册时，输入用户名自动检测用户是否已经存在。
10 2、登陆时，提示用户名密码错误
11 3、删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除.

 1     所有参数：
 2          url: 待载入页面的URL地址
 3         data: 待发送 Key/value 参数。
 4      success: 载入成功时回调函数。
 5     dataType: 返回内容格式，xml, json,  script, text, html
 6 
 7 
 8 jQuery.post(...)
 9     所有参数：
10          url: 待载入页面的URL地址
11         data: 待发送 Key/value 参数
12      success: 载入成功时回调函数
13     dataType: 返回内容格式，xml, json,  script, text, html
14 
15 
16 jQuery.getJSON(...)
17     所有参数：
18          url: 待载入页面的URL地址
19         data: 待发送 Key/value 参数。
20      success: 载入成功时回调函数。
21 
22 
23 jQuery.getScript(...)
24     所有参数：
25          url: 待载入页面的URL地址
26         data: 待发送 Key/value 参数。
27      success: 载入成功时回调函数。
28 
29 
30 jQuery.ajax(...)
31 
32     部分参数：
33 
34             url：请求地址
35            type：请求方式，GET、POST（1.9.0之后用method）
36         headers：请求头
37            data：要发送的数据
38     contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
39           async：是否异步
40         timeout：设置请求超时时间（毫秒）
41 
42      beforeSend：发送请求前执行的函数(全局)
43        complete：完成之后执行的回调函数(全局)
44         success：成功之后执行的回调函数(全局)
45           error：失败之后执行的回调函数(全局)
46     
47 
48         accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
49        dataType：将服务器端返回的数据转换成指定类型
50                        "xml": 将服务器端返回的内容转换成xml格式
51                       "text": 将服务器端返回的内容转换成普通文本格式
52                       "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
53                     "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
54                       "json": 将服务器端返回的内容转换成相应的JavaScript对象
55                      "jsonp": JSONP 格式
56                               使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
57 
58                       如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
59 
60      converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
61              $.ajax({
62                   accepts: {
63                     mycustomtype: 'application/x-some-custom-type'
64                   },
65                   
66                   // Expect a `mycustomtype` back from server
67                   dataType: 'mycustomtype'
68 
69                   // Instructions for how to deserialize a `mycustomtype`
70                   converters: {
71                     'text mycustomtype': function(result) {
72                       // Do Stuff
73                       return newresult;
74                     }
75                   },
76                 });

 1 a. void open(String method,String url,Boolen async)
 2    用于创建请求
 3     
 4    参数：
 5        method： 请求方式（字符串类型），如：POST、GET、DELETE...
 6        url：    要请求的地址（字符串类型）
 7        async：  是否异步（布尔类型）
 8  
 9 b. void send(String body)
10     用于发送请求
11  
12     参数：
13         body： 要发送的数据（字符串类型）
14  
15 c. void setRequestHeader(String header,String value)
16     用于设置请求头
17  
18     参数：
19         header： 请求头的key（字符串类型）
20         vlaue：  请求头的value（字符串类型）
21  
22 d. String getAllResponseHeaders()
23     获取所有响应头
24  
25     返回值：
26         响应头数据（字符串类型）
27  
28 e. String getResponseHeader(String header)
29     获取响应头中指定header的值
30  
31     参数：
32         header： 响应头的key（字符串类型）
33  
34     返回值：
35         响应头中指定的header对应的值
36  
37 f. void abort()
38  
39     终止请求

 1 a. Number readyState
 2    状态值（整数）
 3  
 4    详细：
 5       0-未初始化，尚未调用open()方法；
 6       1-启动，调用了open()方法，未调用send()方法；
 7       2-发送，已经调用了send()方法，未接收到响应；
 8       3-接收，已经接收到部分响应数据；
 9       4-完成，已经接收到全部响应数据；
10  
11 b. Function onreadystatechange
12    当readyState的值改变时自动触发执行其对应的函数（回调函数）
13  
14 c. String responseText
15    服务器返回的数据（字符串类型）
16  
17 d. XmlDocument responseXML
18    服务器返回的数据（Xml对象）
19  
20 e. Number states
21    状态码（整数），如：200、404...
22  
23 f. String statesText
24    状态文本（字符串），如：OK、NotFound...

 1 <h3>Ajax发送GET请求</h3>
 2 <div>
 3     <a class="btn" onclick="AjaxSubmit1()">点击就送</a>
 4     <a class="btn" onclick="AjaxSubmit2()">点击就送</a>
 5 </div>
 6 
 7 //jQuery Ajax
 8         function AjaxSubmit1() {
 9             $.ajax({
10                 url: '/ajax1.html/',
11                 type: 'GET',
12                 data: {'p':123},
13                 success:function (arg) {
14                     console.log(arg);
15                 }
16             })
17         }
18 //原生 Ajax
19         function AjaxSubmit2() {
20             var xhr = new XMLHttpRequest();
21             //相当于回调函数
22             xhr.onreadystatechange = function () {
23                 if(xhr.readyState == 4){
24                     //接受完毕服务端返回的数据
25                     console.log(xhr.responseText);
26                 }
27             };
28             xhr.open('GET','/ajax1.html?p=123'); //创建链接,包含GET请求
29             xhr.send(null); //发送，包含POST请求
30         }

 1 <h3>Ajax发送POST请求</h3>
 2 <a class="btn" onclick="AjaxSubmit3()">点击就送</a>
 3 <a class="btn" onclick="AjaxSubmit4()">点击就送</a>
 4 
 5 
 6 //jQuery Ajax
 7         function AjaxSubmit3() {
 8             $.ajax({
 9                 url: '/ajax1.html/',
10                 type:'POST',
11                 data: {'p':123},
12                 success:function (arg) {
13                     console.log(arg);
14                 }
15             })
16         }
17 //原生 Ajax
18         function AjaxSubmit4() {
19             var xhr = new XMLHttpRequest();
20             xhr.onreadystatechange = function () {
21                 if(xhr.readyState == 4){
22                     console.log(xhr.responseText)
23                 }
24             };
25             xhr.open('POST','/ajax1.html/');
26             //加上请求头：self.content_type == 'application/x-www-form-urlencoded'
27             //jQuery可以直接获得数据
28             //不加上请求头，django不会将request.body里面的数据转换到request.POST里面
29             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
30             xhr.send("p=456");
31         }

 1 <h3>伪Ajax</h3>
 2 <div>
 3     <h6>iframe test</h6>
 4     <div>
 5         <input id="url" placeholder="请输入URL"><a onclick="IframeTest()">查看</a>
 6     </div>
 7     <iframe id="iframe1" style="width: 800px;height: 600px;" src="http://www.autohome.com.cn"></iframe>
 8 </div>
 9 <div>
10     <h6>基于iframe+form表单</h6>
11     <iframe id="iframe2" name="ifra"></iframe>
12     <form id="fm1" action="/ajax1.html/" method="post" target="ifra">
13         <input type="text" name="root" value="1234">
14         <a onclick="AjaxSubmit5()">提交</a>
15     </form>
16 </div>
17 
18 
19 //iframe Test
20         function IframeTest() {
21             var url = $('#url').val();
22             $('#iframe1').attr('src',url); //用户输入url，点击查看时，页面并不刷新
23         }
24 //伪Ajax：实现不刷新提交数据
25         function AjaxSubmit5() {
26             //提交前绑定onload加载事件
27             document.getElementById('iframe2').onload = reloadIframe;
28             document.getElementById('fm1').submit();
29         }
30 //获得iframe回调的数据
31         function reloadIframe() {
32             //this=当前标签
33             {#console.log(that);#}
34             //默认的this=window,加入参数则代表当前标签
35             {#console.log(that.contentWindow);#}
36             {#console.log(that.contentWindow.document.body.innerHTML);#}
37             //jquery
38             //实现回调函数功能
39             {#console.log($(that).contents().find('body').html());#}
40             var content = this.contentWindow.document.body.innerHTML;
41             var obj = JSON.parse(content);
42             if(obj.status){
43                 alert(obj.message);
44             }
45         }

 1 <h6>jQuery  原生 Ajax</h6>
 2 <input type="file" id="img">
 3 <a class="btn" onclick="AjaxSubmit6()">上传</a>
 4 <a class="btn" onclick="AjaxSubmit7()">上传</a>
 5 
 6 
 7 //文件上传
 8 //jQuery Ajax
 9 function AjaxSubmit6() {
10     //基于FormData实现
11     {#document.getElementById('img').files[0];#}  //获得文件对象
12     var data = new FormData();
13     data.append('k1','v1');
14     data.append('k2','v2');
15     data.append('k3',document.getElementById('img').files[0]);
16     $.ajax({
17         url: '/ajax1.html/',
18         type: 'POST',
19         data: data,
20         success:function (arg) {
21             console.log(arg);
22         },
23         //使用FormData,需要加上下面两个参数
24         processData: false,
25         contentType: false,
26     })
27 }
28 //原生Ajax
29 function AjaxSubmit7() {
30     //基于FormData实现
31     var data = new FormData();
32     data.append('k1','v1');
33     data.append('k2','v2');
34     var xhr = new XMLHttpRequest();
35     //相当于回调函数
36     xhr.onreadystatechange = function () {
37         if(xhr.readyState == 4){
38             console.log(xhr.responseText);
39         }
40     };
41     xhr.open('POST','/ajax1.html/');
42     xhr.send(data);
43 }

 1 <h6>伪Ajax</h6>
 2 <iframe style="display: none;" id="iframe3" name="ifra1"></iframe>
 3 <form id="fm2" action="/ajax1.html/" method="post" target="ifra1" enctype="multipart/form-data">
 4     <input type="text" name="k1">
 5     <input type="text" name="k2">
 6     <input type="file" name="k3">
 7     <a onclick="AjaxSubmit8()">提交</a>
 8 </form>
 9 
10 
11 //伪Ajax
12 function AjaxSubmit8() {
13     document.getElementById('iframe3').onload = reloadIframe1;
14     document.getElementById('fm2').submit();
15 }
16 function reloadIframe1() {
17     var content = this.contentWindow.document.body.innerHTML;
18     var obj = JSON.parse(content);
19     console.log(obj);
20 }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
 9     <form id="fm1" action="/upload_img.html/" method="post" target="ifra1" enctype="multipart/form-data">
10         <input type="file" name="k3" onchange="uploadFile()">
11     </form>
12     <h3>预览</h3>
13     <div id="preview"></div>
14     <script src="/static/jquery-3.3.1.js"></script>
15     <script>
16         //文件上传+前端页面显示
17         function uploadFile() {
18             document.getElementById('iframe1').onload = reloadIframe;
19             document.getElementById('fm1').submit();
20         }
21         function reloadIframe() {
22             var content = this.contentWindow.document.body.innerHTML;
23             var obj = JSON.parse(content);
24             console.log(obj.data);
25             var tag = document.createElement('img');
26             tag.src = '/' + obj.data;
27             $('#preview').empty().append(tag);  //清空上一张增加当前这张
28         }
29     </script>
30 </body>
31 </html>

 1 function submitJsonp2() {
 2             $.ajax({
 3                 //跨域请求，被浏览器阻止了 -> 浏览器同源策略
 4                 url: 'http://127.0.0.1:9000/jsonp_test.html/',
 5                 type: 'GET',
 6                 data: {nid:2},
 7                 success:function (arg) {
 8                     $('#content').html(arg)
 9                 }
10             })
11         }
12 
13 跨域请求，被浏览器阻止了 -> 浏览器同源策略
14     XMLHttpRequest不能往其他网站发送

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

 1 ############ 同源 ############ 
 2 def jsonp(request):
 3     return render(request,"jsonp.html")
 4 
 5 def ajax2(request):
 6     return HttpResponse('本服务器发送的请求')
 7 
 8 ############ 不同源 ############ 
 9 def jsonp_test(request):
10     name = request.GET.get('callback')
11     # return HttpResponse('gohome("我要回家");')  #只能发送js格式的数据，其他格式报错
12     return HttpResponse('%s("我要回家")' % name)

 1 // JSONP实现跨域请求
 2 function submitJsonp3() {
 3     var tag = document.createElement('script');
 4     tag.src = 'http://127.0.0.1:9000/jsonp_test.html/';
 5     document.head.appendChild(tag);
 6     document.head.removeChild(tag);
 7 }
 8 //获得响应的数据,函数处理
 9 function gohome(arg) {
10     console.log(arg);
11     $('#content').html(arg);
12 }
13 // 举例
14 function submitJsonp4() {
15     var tag = document.createElement('script');
16     tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
17     document.head.appendChild(tag);
18     document.head.removeChild(tag);
19 }
20 function list(arg) {
21     console.log(arg)
22 }

 1 //本地发送请求
 2 function submitJsonp1() {
 3     $.ajax({
 4         url: '/ajax2.html/',
 5         type: 'GET',
 6         data: {nid:2},
 7         success:function (arg) {
 8             $('#content').html(arg);
 9         }
10     })
11 }
12 //跨域发送请求
13 function submitJsonp2() {
14     $.ajax({
15         url: 'http://127.0.0.1:9000/jsonp_test.html/',
16         type: 'GET',
17         data: {nid:2},
18         success:function (arg) {
19             $('#content').html(arg);  ///浏览器报错
20         }
21     })
22 }

 1 // Ajax实现
 2 function submitJsonp5() {
 3     $.ajax({
 4         url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
 5         type: 'POST',
 6         dataType: 'JSONP',//生成script代码发送请求，执行list函数
 7     })
 8 }
 9 function submitJsonp6() {
10     $.ajax({
11         url: 'http://127.0.0.1:9000/jsonp_test.html',
12         type: 'POST',
13         dataType: 'JSONP', //生成script代码发送请求，执行list函数
14         //callback=list，可以指定包裹数据的函数名
15         jsonp: 'callback',
16         jsonpCallback: 'list'
17     })
18 }
19 function list(arg) {
20     console.log(arg)
21 }