AJAX
-
局部刷新,减少请求中发送的数据
- 执行过程:
-
使用JavaScript语言以及相关浏览器提供类库的功能,向服务端发送请求
-
当服务端处理完请求之后,自动执行某个JavaScript的回调函数
-
请求和响应的整个过程是偷偷进行的,页面无任何感知
-
利用AJAX可以做:
- 注册时,输入用户名自动检测用户名是否已经存在
- 登陆时,提示用户名密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除
-
所以说AJAX的主战场是在前端
伪AJAX
首先来看一下一种用iframe标签模拟ajax请求
-
利用iframe标签的src属性链接网站实现局部刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p>请输入要加载的地址:<span id="current_time"></span></p> <p> <input id="url" type="text"/> <input type="button" value="刷新" onclick="LoadPage();"/> </p> </div> <div> <h3>加载页面位置:</h3> <iframe id="iframePosition" style="width:100%;height:500px;"></iframe> </div> <script type="text/javascript"> window.onload = function(){ var myDate = new Date(); document.getElementById("current_time").innerText = myDate.getTime(); }; function LoadPage(){ var targetUrl = document.getElementById("url").value; document.getElementById("iframePosition").src = targetUrl; } </script> </body> </html>
原生AJAX
如今使用ajax其实就是使用浏览器(除了老旧的IE6,IE5)的XMLHttpRequest对象来完成
XmlHttpRequest对象的主要方法:
a. void open(String method,String url,Boolen async) 用于创建请求 参数: method: 请求方式(字符串类型),如:POST、GET、DELETE... url: 要请求的地址(字符串类型) async: 是否异步(布尔类型) b. void send(String body) 用于发送请求 参数: body: 要发送的数据(字符串类型) c. void setRequestHeader(String header,String value) 用于设置请求头 参数: header: 请求头的key(字符串类型) vlaue: 请求头的value(字符串类型) d. String getAllResponseHeaders() 获取所有响应头 返回值: 响应头数据(字符串类型) e. String getResponseHeader(String header) 获取响应头中指定header的值 参数: header: 响应头的key(字符串类型) 返回值: 响应头中指定的header对应的值 f. void abort() 终止请求
XmlHttpRequest对象的主要属性:
a. Number readyState 状态值(整数) 详细: 0-未初始化,尚未调用open()方法; 1-启动,调用了open()方法,未调用send()方法; 2-发送,已经调用了send()方法,未接收到响应; 3-接收,已经接收到部分响应数据; 4-完成,已经接收到全部响应数据; b. Function onreadystatechange 当readyState的值改变时自动触发执行其对应的函数(回调函数) c. String responseText 服务器返回的数据(字符串类型) d. XmlDocument responseXML 服务器返回的数据(Xml对象) e. Number states 状态码(整数),如:200、404... f. String statesText 状态文本(字符串),如:OK、NotFound...
执行四步走:
-
创建XMLHttpRequest对象
-
定义回调函数(onreadystatechange和readyState=4)
-
指定发送请求的方法和连接地址(post方式还要设置请求头)
-
发送请求(send)
<!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"> //用户创建XMLHttpRequest对象 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', "/test/", true); // 发送请求 xhr.send(); } </script> </body> </html>
jQuery AJAX
- jQuery 不是生产者,而是大自然搬运工
- jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
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 将自动替换 ? 为正确的函数名,以执行回调函数
<!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="/statics/jquery-1.8.2.js"></script> <script> function XmlSendRequest(){ $.ajax({ url: "/index", type: 'POST', data:{"k1":"vl"}, dataType: 'text', success: function(data){ console.log(data); } }) } </script> </body> </html>
跨域AJAX
由于浏览器存在同源策略机制,本域脚本只能读写本域内的资源,而无法访问其它域的资源,请求的发送和响应是可以进行的,但是浏览器不接受而已,但是浏览器同源策略并不是对所有的请求均制约。
-
制约:XMLHttpRequest
-
不制约:img、iframe、script等具有src属性的标签
实现跨域请求有两种方法,jsonp和cors(跨域资源共享)
1、JSONP实现跨域请求
-
jsonp的原理是利用script标签的src实现跨域,不足--只能发送get请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="Ajax" onclick="DoAjax();"> <input type="button" value="JsonpAjax" onclick="JsonpAjax();"> <script src="/statics/jquery-1.12.4.js"></script> <script> function func(arg) { console.log(arg) } function DoAjax() { $.ajax({ url: 'http://w2.com:8002/index', type: 'POST', data: {'k1': 'v1'}, success:function (arg) { console.log(arg) } }); } function JsonpAjax() { // var tag = document.createElement("script"); // tag.src = 'http://w2.com:8002/index?callback=func'; // document.head.appendChild(tag); // document.head.removeChild(tag); $.ajax({ url:'http://w2.com:8002/index', dataType: 'jsonp', jsonp: 'callback', jsonpCallBack: 'func' }) } </script> </body> </html> w1下面的index用来请求w2
import tornado.web import tornado.ioloop class IndexHandler(tornado.web.RequestHandler): def get(self): func = self.get_argument('callback') self.write('%s([11,22])' % func) def post(self, *args, **kwargs): self.write('w2.post') settings = { 'template_path': 'views', 'static_path': 'statics', "static_url_prefix": '/statics/', } application = tornado.web.Application([ (r'/index', IndexHandler), ], **settings) if __name__ == '__main__': application.listen(8002) tornado.ioloop.IOLoop.instance().start() w2下面的start文件
import tornado.web import tornado.ioloop class IndexHandler(tornado.web.RequestHandler): def get(self): self.render('index.html') def post(self, *args, **kwargs): self.write('w1.post') settings = { 'template_path': 'views', 'static_path': 'statics', "static_url_prefix": '/statics/', } application = tornado.web.Application([ (r'/index', IndexHandler), ], **settings) if __name__ == '__main__': application.listen(8001) tornado.ioloop.IOLoop.instance().start() w1下的start文件
2、CORS(跨域资源共享)
-
本质:主动设置浏览器的请求头,使得浏览器允许跨域请求
-
去请求的域不用修改,只需被请求的域进行修改
-
不足:版本太低的浏览器不支持
说cors之前,先要分清楚什么是简单请求和复杂请求。
条件:
1
、请求方式:HEAD、GET、POST
2
、请求头信息:
Accept
Accept
-
Language
Content
-
Language
Last
-
Event
-
ID
Content
-
Type
对应的值是以下三个中的任意一个
application
/
x
-
www
-
form
-
urlencoded
multipart
/
form
-
data
text
/
plain
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求
简单请求: 一次请求
非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,
只有“预检”通过后才再发送一次请求用于数据传输。
1、简单请求
简单请求由于没有预检,所以比较简单,只需要在被请求的一方设置响应头 Access-Control-Allow-Origin,value为请求响应的域名,如果写上一个*的话,代表所有的域都可以来这里请求。
2、非简单请求
- “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
- “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
- “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age 设置完成后再该时间里只需通过一次预检
- 默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。
此外在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。
如果想要发送:
- 浏览器端:XMLHttpRequest的withCredentials为true
- 服务器端:Access-Control-Allow-Credentials为true
- 注意:此时服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
下面来看一下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="Ajax" onclick="DoAjax();"/> <input type="button" value="DoAjaxComplex" onclick="DoAjaxComplex();"/> <script src="/statics/jquery-1.12.4.js"></script> <script> function DoAjax() { $.ajax({ url: 'http://w2.com:8002/cors', type: 'POST', data: {'k1': 'v1'}, success: function (arg) { console.log(arg); } }); } function DoAjaxComplex() { $.ajax({ url: 'http://w2.com:8002/cors', type: 'PUT', headers: {'h1': 'xxoo'}, data: {'k1': 'v1'}, xhrFields:{withCredentials: true}, success: function (arg) { console.log(arg); } }); } </script> </body> </html> w1下的html文件
import tornado.web import tornado.ioloop class IndexHandler(tornado.web.RequestHandler): def get(self): func = self.get_argument('callback') self.write('%s([11,22])' % func) def post(self, *args, **kwargs): self.write('w2.post') class CorsHandler(tornado.web.RequestHandler): def get(self): self.write('{"status": 1, "message": "get"}') def post(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin', "*") self.write('{"status": 1, "message": "post"}') def options(self, *args, **kwargs): # 允许put方法来 # self.set_header('Access-Control-Allow-Origin', "*") self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001") self.set_header('Access-Control-Allow-Methods', "PUT,DELETE") self.set_header('Access-Control-Allow-Headers', "h1,h2") self.set_header('Access-Control-Allow-Credentials', "true") self.set_header('Access-Control-Max-Age', 10) def put(self, *args, **kwargs): print(self.cookies) self.set_cookie('k1', 'kkk') self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001") self.set_header('Access-Control-Allow-Credentials', "true") self.set_header('xxoo', "seven") self.set_header('bili', "daobidao") self.set_header('Access-Control-Expose-Headers', "xxoo,bili") self.write('ok') settings = { 'template_path': 'views', 'static_path': 'statics', "static_url_prefix": '/statics/', } application = tornado.web.Application([ (r'/index', IndexHandler), (r'/cors', CorsHandler), ], **settings) if __name__ == '__main__': application.listen(8002) tornado.ioloop.IOLoop.instance().start() w2的start文件