ajax应用篇(2)_H5之家 - 中国HTML5教程资源分享第一站

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery 不是生产者，而是大自然搬运工。

jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

注：2.+版本不再支持IE9以下的浏览器

1. jQuery.get(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 dataType: 返回内容格式，xml, json, script, text, html 2.jQuery.post(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数 success: 载入成功时回调函数 dataType: 返回内容格式，xml, json, script, text, html 3.jQuery.getJSON(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 4.jQuery.getScript(...) 所有参数： url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 5.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" value='http://www.cnblogs.com/shenzikun1314/p/Ajax请求' /> </p> <script type="text/javascript" src="http://www.cnblogs.com/shenzikun1314/p/jquery-1.12.4.js"></script> <script> function JXmlSendRequest(){ $.ajax({ url: "http://c2.com:8000/test/", // 访问url地址 type: 'GET', // get方式提交 dataType: 'text',　　　　　　　　　　 // 数据类型 success: function(data, statusText, xmlHttpRequest){ // 成功后返回的结果 console.log(data); } }) } </script> </body> </html>

跨域ajax

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

浏览器同源策略并不是对所有的请求均制约：

制约： XmlHttpRequest

不制约： img、iframe、script等具有src属性的标签

注：自己模拟跨域，需要现在自己电脑的host文件里面添加两条域名，我这里添加的是zhangyanlin.com和aylin.com这两个域名

一、JSONP实现跨域请求

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。jsonp只能通过get方式进行跨域请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="http://www.cnblogs.com/shenzikun1314/p/Ajax"/> <input type="button" value="http://www.cnblogs.com/shenzikun1314/p/JsonpAjax"/> <script src="http://www.cnblogs.com/statics/jquery-1.12.4.js"></script> <script src="http://aylin.com:8002/statics/jquery.cookie.js"></script> <script> function func(arg) { console.log(arg); // 输出结果就是python代码给传过来的列表[11,22,33,] } function DoAjax() { $.ajax({ url: 'http://alex.com:8002/index', type: 'POST', data: {'k1': 'v1'}, success: function (arg) { console.log(arg); } }); } function JsonpAjax() { // var tag = document.createElement('script'); // tag.src = "http://alex.com:8002/index"; // document.head.appendChild(tag); // document.head.removeChild(tag); $.ajax({ url: "http://aylin.com:8002/index", dataType: 'jsonp', jsonpCallBack: 'func' // 对端给返回函数名，函数接收的参数是内容 }) } </script> </body> </html>

aylin.com域名这边可以给定义函数

# 采用pythontornado框架来进行的 class IndexHandler(tornado.web.RequestHandler): def get(self): self.write('func([11,22,33]);') def post(self, *args, **kwargs): self.write('t2.post')

在这里jsonp就采用script标签的src来进行跨域请求的

二、CORS