HTML5技术

史上最全ajax全套 - 张岩林(2)

字号+ 作者:H5之家 来源:H5之家 2016-08-06 12:00 我要评论( )

1 . jQuery. get (...)所有参数:url: 待载入页面的URL地址data: 待发送 Key / value 参数。success: 载入成功时回调函数。dataType: 返回内容格式,xml, json, script, text, html 2 .jQuery.post(...)所有参数:u

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:即将发送信息至服务器的内容编码类型(默认: ) async:是否异步 timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局) complete:完成之后执行的回调函数(全局) success:成功之后执行的回调函数(全局) error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 dataType:将服务器端返回的数据转换成指定类型 : 将服务器端返回的内容转换成xml格式 : 将服务器端返回的内容转换成普通文本格式 : 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 : 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 : 将服务器端返回的内容转换成相应的JavaScript对象 : JSONP 格式使用 JSONP 形式调用函数时,如 jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

方法列表

写一个最简单的例子:

JXmlSendRequest(){ $.ajax({ url: , // 访问url地址 type: , // get方式提交 dataType: ,           // 数据类型 success: function(data, statusText, xmlHttpRequest){ // 成功后返回的结果 console.log(data); } }) }

跨域ajax

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

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

  • 制约: XmlHttpRequest
  • 不制约: img、iframe、script等具有src属性的标签
  • 注:自己模拟跨域,需要现在自己电脑的host文件里面添加两条域名,我这里添加的是zhangyanlin.com和aylin.com这两个域名

    一、JSONP实现跨域请求

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

    Title func(arg) { console.log(arg); // 输出结果就是python代码给传过来的列表[11,22,33,] } function DoAjax() { $.ajax({ url: , type: , data: {}, 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: , dataType: , jsonpCallBack: // 对端给返回函数名,函数接收的参数是内容 }) }

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

    IndexHandler(tornado.web.RequestHandler): def get(self): self.write() def post(self, *args, **kwargs): self.write()

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

     二、CORS

    上面那种方法说到浏览器的同源策略导致ajax无法进行跨域传输,那么这种方法就可以突破浏览器限制来进行传输。当数据发送给对方域名的时候,对方已经收到,但是在返回的时候被浏览器给阻挡,我们可以写一串类似于身份证的字符串,通过浏览器的预检,从而达到数据的传输。

    这方面分为简单请求和非简单请求

    条件: 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 注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

    简单请求只一次请求,而复杂请求是两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

    基于cors实现AJAX请求:

    1、支持跨域,简单请求

    服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜莹

      FormData+Ajax 实现多文件上传 学习使用FormData对象 - 天青色的西瓜

      2017-03-08 18:01

    • 史上最“脑残”的“抢火车票”程序(node.js版) - 落花落雨不落叶

      史上最“脑残”的“抢火车票”程序(node.js版) - 落花落雨不落叶

      2017-01-14 12:01

    • form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作 - 怪诞咖啡

      form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】

      2016-12-10 11:00

    • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 - imwtr

      pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 -

      2016-11-14 17:00

    网友点评
    i