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

  • jQuery 不是生产者，而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
  • 注：2.+版本不再支持IE9以下的浏览器

时机：
　　　　如果发送的是【普通数据】 -> jQuery，XMLHttpRequest，iframe

　　　　如果发送的是【文件】 -> iframe,jQuery(FormData对象)，XMLHttpRequest(FormData对象)，

jQuery Ajax方法列表:

  1. jQuery.get(...)
  2.                 所有参数：
  3.                      url: 待载入页面的URL地址
  4.                     data: 待发送 Key/value 参数。
  5.                  success: 载入成功时回调函数。
  6.                 dataType: 返回内容格式，xml, json,  script, text, html
  7.  
  8.             jQuery.post(...)
  9.                 所有参数：
  10.                      url: 待载入页面的URL地址
  11.                     data: 待发送 Key/value 参数
  12.                  success: 载入成功时回调函数
  13.                 dataType: 返回内容格式，xml, json,  script, text, html
  14.  
  15.             jQuery.getJSON(...)
  16.                 所有参数：
  17.                      url: 待载入页面的URL地址
  18.                     data: 待发送 Key/value 参数。
  19.                  success: 载入成功时回调函数。
  20.  
  21.             jQuery.getScript(...)
  22.                 所有参数：
  23.                      url: 待载入页面的URL地址
  24.                     data: 待发送 Key/value 参数。
  25.                  success: 载入成功时回调函数。
  26.  
  27.             jQuery.ajax(...)
  28.  
  29.                 部分参数：
  30.  
  31.                         url：请求地址
  32.                        type：请求方式，GET、POST（1.9.0之后用method）
  33.                     headers：请求头
  34.                        data：要发送的数据
  35.                 contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
  36.                       async：是否异步
  37.                     timeout：设置请求超时时间（毫秒）
  38.  
  39.                  beforeSend：发送请求前执行的函数(全局)
  40.                    complete：完成之后执行的回调函数(全局)
  41.                     success：成功之后执行的回调函数(全局)
  42.                       error：失败之后执行的回调函数(全局)
  43.  
  44.                     accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
  45.                    dataType：将服务器端返回的数据转换成指定类型
  46.                                    "xml": 将服务器端返回的内容转换成xml格式
  47.                                   "text": 将服务器端返回的内容转换成普通文本格式
  48.                                   "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
  49.                                 "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
  50.                                   "json": 将服务器端返回的内容转换成相应的JavaScript对象
  51.                                  "jsonp": JSONP 格式
  52.                                           使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
  53.  
  54.                                   如果不指定，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
  55.  
  56.                  converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
  57.                          $.ajax({
  58.                               accepts: {
  59.                                 mycustomtype: 'application/x-some-custom-type'
  60.                               },
  61.  
  62.                               // Expect a `mycustomtype` back from server
  63.                               dataType: 'mycustomtype'
  64.  
  65.                               // Instructions for how to deserialize a `mycustomtype`
  66.                               converters: {
  67.                                 'text mycustomtype': function(result) {
  68.                                   // Do Stuff
  69.                                   return newresult;
  70.                                 }
  71.                               },
  72.                             });

基于jQuery Ajax -Deamo

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9.     <p>
  10.         <input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
  11.     </p>
  12.  
  13.     <script type="text/javascript" src="jquery-1.12.4.js"></script>
  14.     <script>
  15.  
  16.         function JqSendRequest(){
  17.             $.ajax({
  18.                 url: "http://c2.com:8000/test/",
  19.                 type: 'GET',
  20.                 dataType: 'text',
  21.                 success: function(data, statusText, xmlHttpRequest){
  22.                     console.log(data);
  23.                 }
  24.             })
  25.         }
  26.  
  27.     </script>
  28. </body>
  29. </html>

附加:

如果你用ajax传输一个数据

  1. $.ajax({
  2.     data: {'k1':123,'k2':'','k3':{}
  3. }
  4. }
  5. )

你想在ajax中字典套字典的方式传输，那你只能把这个字典序列化成字符串在发过去

  1. $.ajax({
  2.     data: {'k1':123,'k2':'','k3':JSON.strigify({})
  3. }
  4. }
  5. )

这样才行！

跨域Ajax

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

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

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

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

跨域，跨域名访问，如：http://www.c1.com 域名向 http://www.c2.com域名发送请求。

1.JSONP实现跨域请求

JSONP（JSONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域）

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.  
  9.     <p>
  10.         <input type="button" onclick="Jsonp1();"  value='提交'/>
  11.     </p>
  12.  
  13.     <p>
  14.         <input type="button" onclick="Jsonp2();" value='提交'/>
  15.     </p>
  16.  
  17.     <script type="text/javascript" src="jquery-1.12.4.js"></script>
  18.     <script>
  19.         function Jsonp1(){
  20.             var tag = document.createElement('script');
  21.             tag.src = "http://c2.com:8000/test/";
  22.             document.head.appendChild(tag);
  23.             document.head.removeChild(tag);
  24.  
  25.         }
  26.  
  27.         function Jsonp2(){
  28.             $.ajax({
  29.                 url: "http://c2.com:8000/test/",
  30.                 type: 'GET',
  31.                 dataType: 'JSONP',
  32.                 success: function(data, statusText, xmlHttpRequest){
  33.                     console.log(data);
  34.                 }
  35.             })
  36.         }
  37.  
  38.     </script>
  39. </body>
  40. </html>
  41.  
  42. 基于JSONP实现跨域Ajax - Demo

基于JSONP实现跨域Ajax - Demo

2.CORS

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

* 简单请求 OR 非简单请求

  1. 条件：
  2.     1、请求方式：HEAD、GET、POST
  3.     2、请求头信息：
  4.         Accept
  5.         Accept-Language
  6.         Content-Language
  7.         Last-Event-ID
  8.         Content-Type 对应的值是以下三个中的任意一个
  9.                                 application/x-www-form-urlencoded
  10.                                 multipart/form-data
  11.                                 text/plain
  12.  
  13. 注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

* 简单请求和非简单请求的区别？

  1.   简单请求：一次请求
  2. 非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

* 关于“预检”

  1. - 请求方式：OPTIONS
  2. - “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
  3. - 如何“预检”
  4.      => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
  5.         Access-Control-Request-Method
  6.      => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
  7.         Access-Control-Request-Headers

前端示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .upload{
  8.             display: inline-block;padding: 10px;
  9.             background-color: brown;
  10.             position: absolute;
  11.             top: 0;
  12.             bottom: 0;
  13.             right: 0;
  14.             left: 0;
  15.             z-index: 90;
  16.         }
  17.         .file{
  18.             width: 100px;height: 50px;opacity: 0;
  19.             position: absolute;
  20.             top: 0;
  21.             bottom: 0;
  22.             right: 0;
  23.             left: 0;
  24.             z-index: 100;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div style="position: relative;width: 100px;height: 50px;">
  30.         <input class="file" type="file" id="fafafa" name="afafaf" />
  31.         <a class="upload">上传</a>
  32.     </div>
  33.     <input type="button" value="提交XHR" onclick="xhrSubmit();" />
  34.     <input type="button" value="提交jQuery" onclick="jqSubmit();" />
  35.     <hr/>
  36.  
  37.     <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
  38.         <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
  39.         <input type="file" name="fafafa" onchange="changeUpalod();" />
  40. {#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
  41.     </form>
  42.  
  43.     <div id="preview"></div>
  44.  
  45.     <script src="/static/jquery-1.12.4.js"></script>
  46.     <script>
  47.         //只要加入了文件，就会触发事件，并把整个表单都提交过去。就不用点击submit提交都行！！！！
  48.             //因为在这个函数里面写了submit() 提交表单操作
  49.         //什么时候返回过来，就会执行iframe的load事件，
  50.             //所以在这些绑定了load事件,用户只要一提交，上传成功了，就会把路径(static --这里是在views中做了逻辑处理返回了路径)给你返回来，然后找到这个文件，在放到id=id="preview" 中
  51.  
  52.         function changeUpalod(){
  53.             $('#ifm1').load(function(){
  54.             //console.log$($('#ifm1').contents())  这contents 就是它下面的值
  55.             //$('#ifm1').contents().find('body').text(); 得到它的文本内容
  56.                 var text = $('#ifm1').contents().find('body').text();
  57.                 var obj = JSON.parse(text);
  58.  
  59.                 $('#preview').empty();
  60.                 var imgTag = document.createElement('img');
  61.                 imgTag.src = "/" + obj.data;
  62.                 $('#preview').append(imgTag);
  63.             });
  64.             $('#form1').submit(); //找到form1 直接就提交这个表单
  65.         }
  66.  
  67.         //用ajax发送
  68.  
  69.             //如果用ajax来发送文件,jquery会帮你把文件转换为字符串等等操作.这样就违背了咱传输文件的意图
  70.             //所以需要加2个参数
  71.             // processData: false,
  72.             // contentType: false,
  73.             //加上这2个参数，就是告诉jquery，不要帮我做特殊处理.
  74.         function jqSubmit(){
  75.             // $('#fafafa')[0]
  76.             //你要上传的文件对象  文件只能用这种方式
  77.             var file_obj = document.getElementById('fafafa').files[0];
  78.  
  79.             var fd = new FormData();   //相当于是一个form表单
  80.             fd.append('username','root');  //前面加KEY，后面加value
  81.             fd.append('fafafa',file_obj);
  82.  
  83.             $.ajax({
  84.                 url: '/upload_file/',
  85.                 type: 'POST',
  86.                 data: fd,
  87.                 processData: false,  // tell jQuery not to process the data
  88.                 contentType: false,  // tell jQuery not to set contentType
  89.                 //success 也就是返回值
  90.                 success:function(arg,a1,a2){
  91.                     console.log(arg);
  92.                     console.log(a1);
  93.                     console.log(a2);
  94.                 }
  95.             })
  96.         }
  97.  
  98.         //这个是原生的发送
  99.         function xhrSubmit(){
  100.             // $('#fafafa')[0]
  101.             var file_obj = document.getElementById('fafafa').files[0];
  102.  
  103.             var fd = new FormData();
  104.             fd.append('username','root');
  105.             fd.append('fafafa',file_obj);
  106.  
  107.             var xhr = new XMLHttpRequest();
  108.             xhr.open('POST', '/upload_file/',true);
  109.             xhr.onreadystatechange = function(){
  110.                 if(xhr.readyState == 4){
  111.                     // 接收完毕
  112.                     var obj = JSON.parse(xhr.responseText);
  113.                     console.log(obj);
  114.                 }
  115.             };
  116.             xhr.send(fd);
  117.         }
  118.  
  119.         //iframe 兼容性最好
  120.         function iframeSubmit(){
  121.             $('#ifm1').load(function(){
  122.                 var text = $('#ifm1').contents().find('body').text();
  123.                 var obj = JSON.parse(text);
  124.  
  125.                 $('#preview').empty();
  126.                 var imgTag = document.createElement('img');
  127.                 imgTag.src = "/" + obj.data;
  128.                 $('#preview').append(imgTag);
  129.             })
  130.         }
  131.  
  132.     </script>
  133. </body>
  134. </html>

前端示例

转载于:http://www.cnblogs.com/wupeiqi/articles/5703697.html

jQuery Ajax -附示例的更多相关文章

  1. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  2. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  3. jQuery ajax常用示例

    总结一下jQuery ajax常用示例 $.ajax({ type: "post", //类型get,post url: urls, //链接地址 data:{"id&q ...

  4. Jquery Ajax Get示例

      $.ajax({ type: "GET", url:"ajax_url.php", cache: false, data:{'action':'ABC',' ...

  5. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  6. 如何构建 MVC&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ...

  7. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  8. jQuery Ajax： $.post请求示例

    jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...

  9. jQuery ajax中使用serialize()方法提交表单数据示例

    <form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...

随机推荐

  1. Java泛型方法与泛型类的使用------------（五）

    泛型的本质就是将数据类型也参数化, 普通方法的输入参数的值是可以变的,但是类型(比如: String)是不能变的,它使得了在面对不同类型的输入参数的时候我们要重载方法才行. 泛型就是将这个数据类型也搞 ...

  2. window系列

    1.关闭浏览器单个网页   ctrl+W 2.远程桌面连接  mstsc

  3. java linux ftp问题

    java写的ftp上传类,本地测试环境可以用,阿里云服务器不可用,两者系统均为centos.经过测试,发现appche的ftpclient类不可用,换成sun的ftpclient可以使用.

  4. React-Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  5. openwrt 添加 802.1x客户端njit

    1.修改feed的配置文件 feeds.conf.default 添加下面两句: src-svn njit https://github.com/liuqun/openwrt-clients/trun ...

  6. mysql忘记root密码的处理方式

    1.停用mysql服务 service mysqld stop 2.修改my.cnf    利用vim命令打开mysql配置文件my.cnf 添加skip-grant-tables,添加完成后,执行w ...

  7. 初识神经网络NeuralNetworks

    1.神经网络的起源 在传统的编程方法中,我们通常会告诉计算机该做什么,并且将一个大问题分解为许多小的.精确的.计算机可以轻松执行的任务.相反,在神经网络中,我们不告诉计算机如何解决问题,而是让计算机从 ...

  8. 改变input标签中placeholder显示的颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #A9A9A9; } :-moz-placeholder { /* Mozilla ...

  9. Math对象应用详解

    JavaScript中的Math对象提供了大量的算术运算功能和数值操作方法. JavaScript中的Math对象的与众不同之处在于,它是一个全局对象.在使用Math对象之前,既不需要将一个变量声明为 ...

  10. php高级工程师面试题，行不行对照看下自己的实力

    在网上看到一些高级php 的面试题目.. 最近接连面试了几家公司,有些重要问题记录一下,督促自己学习提高,同时希望给朋友们一些帮助.内容很多,一点点完善,一步步学习..有些是面试被问,有些是招聘要求, ...