AJAX、JSONP和CORS
原生AJAX
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
XmlHttpRequest对象
XmlHttpRequest对象的主要方法:
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 终止请求
XmlHttpRequest对象的主要属性:
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...
jquery关于ajax方法列表以及参数:
1 jQuery.get(...) 2 所有参数: 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数。 5 success: 载入成功时回调函数。 6 dataType: 返回内容格式,xml, json, script, text, html 7 8 9 jQuery.post(...) 10 所有参数: 11 url: 待载入页面的URL地址 12 data: 待发送 Key/value 参数 13 success: 载入成功时回调函数 14 dataType: 返回内容格式,xml, json, script, text, html 15 16 17 jQuery.getJSON(...) 18 所有参数: 19 url: 待载入页面的URL地址 20 data: 待发送 Key/value 参数。 21 success: 载入成功时回调函数。 22 23 24 jQuery.getScript(...) 25 所有参数: 26 url: 待载入页面的URL地址 27 data: 待发送 Key/value 参数。 28 success: 载入成功时回调函数。 29 30 31 jQuery.ajax(...) 32 33 部分参数: 34 35 url:请求地址 36 type:请求方式,GET、POST(1.9.0之后用method) 37 headers:请求头 38 data:要发送的数据 39 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") 40 async:是否异步 41 timeout:设置请求超时时间(毫秒) 42 43 beforeSend:发送请求前执行的函数(全局) 44 complete:完成之后执行的回调函数(全局) 45 success:成功之后执行的回调函数(全局) 46 error:失败之后执行的回调函数(全局) 47 48 49 accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 50 dataType:将服务器端返回的数据转换成指定类型 51 "xml": 将服务器端返回的内容转换成xml格式 52 "text": 将服务器端返回的内容转换成普通文本格式 53 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 54 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 55 "json": 将服务器端返回的内容转换成相应的JavaScript对象 56 "jsonp": JSONP 格式 57 使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数 58 59 如果不指定,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 60 61 converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数 62 $.ajax({ 63 accepts: { 64 mycustomtype: 'application/x-some-custom-type' 65 }, 66 67 // Expect a `mycustomtype` back from server 68 dataType: 'mycustomtype' 69 70 // Instructions for how to deserialize a `mycustomtype` 71 converters: { 72 'text mycustomtype': function(result) { 73 // Do Stuff 74 return newresult; 75 } 76 }, 77 }); 78 79
JSONP
实现跨域请求主要是利用script标签的src属性,用这种巧妙的方式就能突破浏览器的同源策略,浏览器的同源策略就是我如果在本地往别的服务器发请求,浏览器就会拦截服务器响应的内容。
CORS
跨域资源共享,本质是设置响应头,使得浏览器允许跨域请求
实例:
1 from django.shortcuts import render, HttpResponse 2 3 4 def index(request): 5 print(request.GET) 6 print(request.POST) 7 print(request.body) 8 return render(request, 'index.html') 9 10 11 def test(request): 12 obj = HttpResponse('哈哈哈') 13 obj['Access-Control-Allow-Origin'] = '*' 14 return obj
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h3>ajax发GET方式</h3> 9 <div> 10 <p><a onclick="AjaxSubmit1();">点击</a></p> 11 <p><a onclick="AjaxSubmit2();">点击不用jquery</a></p> 12 </div> 13 14 <h3>ajax发POST方式</h3> 15 <div> 16 <p><a onclick="AjaxSubmit3();">点击</a></p> 17 <p><a onclick="AjaxSubmit4();">点击不用jquery</a></p> 18 </div> 19 20 <div id="content"></div> 21 <p><a onclick="submitjsonp();">jsonp</a></p> 22 <input type="button" value="发送" onclick="submitjsonp1();"> 23 <script src="/static/js/jquery-3.3.1.js"></script> 24 <script> 25 function AjaxSubmit1() { 26 $.ajax({ 27 url: '/index/', 28 type: 'get', 29 data: {'p': 123}, 30 success: function (arg) { 31 console.log(arg) 32 } 33 }) 34 } 35 36 function AjaxSubmit2() { 37 var xhr = new XMLHttpRequest(); 38 xhr.onreadystatechange = function () { 39 if (xhr.readyState == 4) { 40 //接收完毕之后返回的数据 41 console.log(xhr.responseText); 42 } 43 }; 44 xhr.open('GET', '/index?p=123'); 45 xhr.send(null); 46 } 47 48 function AjaxSubmit3() { 49 $.ajax({ 50 url: '/index/', 51 type: 'post', 52 data: {'p': 123}, 53 success: function (arg) { 54 console.log(arg) 55 } 56 }) 57 } 58 59 function AjaxSubmit4() { 60 var xhr = new XMLHttpRequest(); 61 xhr.onreadystatechange = function () { 62 if (xhr.readyState == 4) { 63 //接收完毕之后返回的数据 64 console.log(xhr.responseText); 65 } 66 }; 67 xhr.open('post', '/index/'); 68 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); 69 xhr.send('p=456'); 70 } 71 72 function submitjsonp() { 73 var tag = document.createElement('script'); 74 tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; 75 document.head.appendChild(tag); 76 document.head.removeChild(tag); 77 } 78 79 /*function list(arg) { 80 $('#content').html(arg); 81 console.log(arg) 82 } */ 83 84 /*function submitjsonp1() { 85 $.ajax({ 86 url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', 87 type:'GET', 88 dataType:'jsonp', 89 }) 90 } 91 function list(arg) { 92 console.log(arg) 93 } 94 */ 95 96 97 function submitjsonp1() { 98 $.ajax({ 99 url: 'http://www.jxntv.cn/data/jmd-jxtv2.html', 100 type: 'GET', 101 dataType: 'jsonp', 102 jsonp:'callback', 103 jsonpCallback:'list', 104 }) 105 } 106 107 function list(arg) { 108 console.log(arg) 109 } 110 111 </script> 112 </body> 113 </html>
补充ajax
参数解析
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
5.cache: 要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。
6.data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看 processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
8.beforeSend: 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete:
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }
10.success:
要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等
11.error: 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }
12.contentType: 要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }
14.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }
15.global: 要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified: 要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
17.jsonp: 要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username: 要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
19.password: 要求为String类型的参数,用于响应HTTP访问认证请求的密码。
20.processData: 要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
21.scriptCharset: 要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用
XMLHttpRequest()对象补充
概念
1.Ajax能够是实现异步传输,所依赖的就是JavaScript中的XMLHttpRequest
2.XMLHttpRequest对象是XMLHttp组件的对象,它是一个抽象对象,允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端
3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互,不必每次刷新页面
4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件提供,后受到广泛应用
5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XMLHttpRequest对象
6.XMLHttpRequest不是W3C标准,可采用多种方法用JavaScript来创建XMLHttpRequest实例
7.在IE中XMLHttpRequest实现为一个ActiveX控件,而其他浏览器则实现为一个JavaScript内置对象
属性:
1.readySate-记录返回请求的状态
。0-为初始化:对象已经建立,单位初始化,open方法还未调用;
。1-初始化:对象已经建立,但还未调用send方法发送请求;
。2-发送数据:send方法已调用,但HTTP头未知;
。3-数据传输中:已经接受部分数据,但响应不完全;
。4-完成:数据接受完成,此时才可以获取完整的返回数据
2.responseText-接收客户端的HTTP响应的文本内容
。只读
。当readySate为1/2,responseText值是一个空字符串;
。当readyState为3,响应信息正在接受还未完成;
。当readyState为4,表示可以响应信息已经接收完成
。xmlHttp默认响应数据编码为UTF-8
3.responseXML-在send()执行后,将返回的信息格式化为XML Document对象
。Content-Type指定的MIME类型应该为text/HTML
。如果Content-Type不包含这种类型,responseXML在接收时将会得到一个null值
4.status-在send()执行后,可使用status读取事物状态
。长整型数据
。返回当前请求的HTTP的状态码
。只有当readyState为3或4时才使用该属性,否则读取status会发生错误
。100-客户必须继续发送请求
。200-交易成功
。400-错误请求
。403-请求不允许
。404-没有发现文件、查询、URL
。500-服务器内部错误
。502服务器暂时不可使用
。505-服务器不支持或拒绝不支持请求头中的HTTP版本
5.statusText-send()执行后,可通过statusText读取事物状态
。返回当前HTTP请求的状态行
。只有当readyState为3或4时才可使用该属性,否则读取state会发生错误
6.Onreadystatechange-readyState发生变化时所要执行的操作
。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理
。在事件处理函数中根据readyState的状态值进行相应的处理