八丶AJAX全套
概述对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。 1、传统的Web应用
2、AJAX
“伪”AJAX由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
原生AJAXAjax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。 1、XmlHttpRequest对象介绍 XmlHttpRequest对象的主要方法:
XmlHttpRequest对象的主要属性:
2、跨浏览器支持
<!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>XMLHttpRequest - Ajax请求</h1> <input type="button" onclick="XmlGetRequest();" value="Get发送请求" /> <input type="button" onclick="XmlPostRequest();" value="Post发送请求" /> <script src="/statics/jquery-1.12.4.js"></script> <script type="text/javascript"> function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } function XhrPostRequest(){ var xhr = GetXHR(); // 定义回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已经接收到全部响应数据,执行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定连接方式和地址----文件方式 xhr.open(‘POST‘,"/test/",true); // 设置请求头 xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘); // 发送请求 xhr.send(‘n1=1;n2=2;‘); } function XhrGetRequest(){ var xhr = GetXHR(); // 定义回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已经接收到全部响应数据,执行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定连接方式和地址----文件方式 xhr.open(‘get‘,true); // 发送请求 xhr.send(); } </script> </body> </html>
jQuery AjaxjQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。
注:2.+版本不再支持IE9以下的浏览器 jQuery.get(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 dataType: 返回内容格式,xml,json,script,text,html jQuery.post(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数 success: 载入成功时回调函数 dataType: 返回内容格式,xml,html jQuery.getJSON(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 jQuery.getScript(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 jQuery.ajax(...) 部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送的数据 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async:是否异步 timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局) complete:完成之后执行的回调函数(全局) success:成功之后执行的回调函数(全局) error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 dataType:将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式 使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数 如果不指定,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 converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数 $.ajax({ accepts: { mycustomtype: ‘application/x-some-custom-type‘ },// Expect a `mycustomtype` back from server dataType: ‘mycustomtype‘ // Instructions for how to deserialize a `mycustomtype` converters: { ‘text mycustomtype‘: function(result) { // Do Stuff return newresult; } },});
<!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="button" onclick="XmlSendRequest();" value=‘Ajax请求‘ /> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/",type: ‘GET‘,dataType: ‘text‘,success: function(data,statusText,xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
跨域AJAX由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。 特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接受罢了。 浏览器同源策略并不是对所有的请求均制约:
跨域,跨域名访问,如:http://www.c1.com 域名向 http://www.c2.com域名发送请求。 1、JSONP实现跨域请求 JSONP(JSONP - JSON with Padding是JSON的一种“使用模式”),利用script标签的src属性(浏览器允许script标签跨域) <!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <p> <input type="button" onclick="Jsonp1();" value=‘提交‘/> </p> <p> <input type="button" onclick="Jsonp2();" value=‘提交‘/> </p> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> function Jsonp1(){ var tag = document.createElement(‘script‘); tag.src = "http://c2.com:8000/test/"; document.head.appendChild(tag); document.head.removeChild(tag); } function Jsonp2(){ $.ajax({ url: "http://c2.com:8000/test/",dataType: ‘JSONP‘,xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
2、CORS 随着技术的发展,现在的浏览器可以支持主动设置从而允许跨域请求,即:跨域资源共享(CORS,Cross-Origin Resource Sharing),其本质是设置响应头,使得浏览器允许跨域请求。
基于cors实现AJAX请求: a、支持跨域,简单请求 服务器设置响应头: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/",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"}‘)
b、支持跨域,复杂请求 由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。
<!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(‘PUT‘,true); xhr.setRequestHeader(‘k1‘,‘v1‘); xhr.send(); } function JqSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/",type: ‘PUT‘,headers: {‘k1‘: ‘v1‘},xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header(‘Access-Control-Allow-Origin‘,"data": "seven"}‘) def options(self,*args,**kwargs): self.set_header(‘Access-Control-Allow-Origin‘,"http://www.xxx.com") self.set_header(‘Access-Control-Allow-Headers‘,"k1,k2") self.set_header(‘Access-Control-Allow-Methods‘,"PUT,DELETE") self.set_header(‘Access-Control-Max-Age‘,10)
c、跨域获取响应头 默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。 <!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); // 获取响应头 console.log(xhr.getAllResponseHeaders()); } }; xhr.open(‘PUT‘,xmlHttpRequest){ console.log(data); // 获取响应头 console.log(xmlHttpRequest.getAllResponseHeaders()); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header(‘Access-Control-Allow-Origin‘,"http://www.xxx.com") self.set_header(‘xxoo‘,"seven") self.set_header(‘bili‘,"daobidao") self.set_header(‘Access-Control-Expose-Headers‘,"xxoo,bili") self.write(‘{"status": true,10)
d、跨域传输cookie 在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。 如果想要发送:
<!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.withCredentials = true; xhr.open(‘PUT‘,xhrFields:{withCredentials: true},xmlHttpRequest){ console.log(data); } }) } </script> </body> </html>
class MainHandler(tornado.web.RequestHandler): def put(self): self.set_header(‘Access-Control-Allow-Origin‘,"http://www.xxx.com") self.set_header(‘Access-Control-Allow-Credentials‘,"true") self.set_header(‘xxoo‘,bili") self.set_cookie(‘kkkkk‘,‘vvvvv‘); self.write(‘{"status": true,10)
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |