AJax技术

在线知识学习平台(2)

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

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。 jQuery 不是生产者,而是大自然搬运工。 jQuery Ajax本质 XMLHttpRequest 或 ActiveXObj

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者,而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 
  • 注: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, json, script, text, 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 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; } }, }); jQuery Ajax 方法列表 ==> > => => { $.ajax({ url: ":8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ console.log(data); } }) } > 基于jQueryAjax - Demo

    自己写的,方便理解,ajax.html里面的success:里面的的data 就是写入 的值

    ==> > => => { $.ajax({ url: "/aaa", // url: ":8000/test/", type: 'GET', dataType: 'text', success: function(data, statusText, xmlHttpRequest){ //statusText是状态码(例如404) console.log(data); } }) } > ajax.html tornado.ioloop import tornado.web : : self.render('ajax.html') : : self.write("aa") settings = { 'template_path': 'views', 'static_path': 'statics', 'static_url_prefix':'/statics/', } application = tornado.web.Application([ (r"/index", IndexHandler), (r"/aaa", AaaHandler), ], **settings) if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start() app.py

    跨域AJAX

    由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

    特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接受罢了。

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

  • 制约: XmlHttpRequest
  • 不叼: img、iframe、script等具有src属性的标签
  • 跨域,跨域名访问,如: 域名向 域名发送请求。

    1、JSONP实现跨域请求

     

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

    相关文章
    • 基于ajax技术电大网上学习平台设计及实现.pdf

      基于ajax技术电大网上学习平台设计及实现.pdf

      2016-08-07 11:06

    • android布局技巧:创建高效布局

      android布局技巧:创建高效布局

      2016-05-13 17:00

    • UI系列之: 基于JQUERY的WEB在线流程图设计器GOOFLOW 0.8版

      UI系列之: 基于JQUERY的WEB在线流程图设计器GOOFLOW 0.8版

      2016-04-28 17:00

    • ajax技巧制作得在线歌词搜索功效

      ajax技巧制作得在线歌词搜索功效

      2016-02-06 14:47

    网友点评
    8