jQuery的$.ajax
在介绍JSONP之前，先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩 写，是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简 单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本，因此可通过许多途径进行JSON消息的传递。 1. JSONP定义 JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入，将server返回的response添加到页面实现特定功能。 2.JSONP由来 要解释JSONP的来由，先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。 如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域 读取数据，但却允许HTML引用跨域的资源，如图片，CSS和脚本程序。对于脚本程序的引用比较特殊， 它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。 如在B站点的一个js文件，一个简单的提示框：alert（“This is Victor！”）;。 在A站点引用这个js，这个脚本就会在B站点的应用中执行，显示一个alert信息。 由于站外脚本的引用是通过script tag来实现的，而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制 （包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。 另外，通过"script"，标记的使用，就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。 3. JSONP原理与实现 首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 JSON数据。然后以JavaScript 语法的方式，生成一个function, function名字就是传递上来的参数jsonp. 然后，将JSON数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法 最后，在客户端浏览器中解析script标签，并执行返回的JavaScript文档，此时数据作为参数，传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。 其实 JSONP是个很简单的一个东西。主要是利用了script标签对javascript文档的动态解析来实现。（其实也可以用eval函数） <script type="text/javascript"> function jsonpCallback(result){ alert(result.msg); } </script> <script type="text/javascript" src="http://mydomain.com/jsonService?jsonp=jsonpCallback"></script> 注解: jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。 http://mydomain.com/jsonService?jsonp=jsonpCallback是获取跨域服务器JSON数据的接口，参数为回调函数的名字。 返回的格式为:jsonpCallback({ msg:'this is json data'} ) 4. jQuery与JSONP 从1.2版本开始，jQuery拥有对JSONP回调的本地支持。 如果指定了JSONP回调，就可以加载位于另一个域的JSON数据. 回调的语法为：url?callback=?。jQuery自动将?替换为要调用的生成函数名。 jQuery回调函数： <script type="text/javascript"> jQuery.getJSON(url+"&callback=?",function(data){ alert("Name: " + data.name + ", Phone: " + data.phone); }); </script> 为此，jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。 另外，jQuery 也能优化非跨域调用。如果向同一个域发出请求， jQuery 就将其转化为普通 Ajax 请求。 5. JSONP的安全问题 在JavaScript 程序中有多种方法可动态地生成代码，最著名的函数之一就是 eval()。 该函数允许您将任意字符串做为 JavaScript 代码执行。然而，随意使用该函数是非常危险的。 遗憾的是，一些使用广泛的 JavaScript 库在内部都直接使用 eval() 函数。 JSON本身是安全的，不含有赋值和调用。但由于 JSON 是以 JavaScript 的一个子集为基础的， 所以脚本内容会潜在地包含恶意代码。 由于许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象， 利用这点，攻击者就可以向这些库发送畸形的 JSON 对象，这样 eval() 函数就会执行这些恶意代码。 为保护 JSON 的使用，可使用RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分 <script type="text/javascript"> var my_JSON_object = !(/[^,:{}[]0-9.-+Eaeflnr-u ]/.test(text.replace(/"(\.|[^"\])*"/g,''))) && eval('(' + text + ')'); </script> 6. JSONP的缺陷 JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，必须认真考虑它们。 第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用； 如果无效，就静默失败。失败是没有任何提示的。 例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。 不过，等待一段时间还没有响应的话，就不用理它了。 （未来的 jQuery 版本可能有终止 JSONP 请求的特性）。 第二， JSONP 被不信任的服务使用时会很危险。 因为 JSONP 服务返回打包在函数调用中的 JSON 响应， 而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。 如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。
作为一名努力往上爬的前端工程师，我这里介绍一下$.ajax中部分参数的功能使用。
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type:要求为String类型的参数，请求方式（post或get）默认为get。 注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等 待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。 设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格 式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格 式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同 值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime 信息返回responseXML或responseText，并作为回调函数参数传递。 可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求 时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。 beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义 HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参 数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 } success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错 误信息、捕获的错误对象(可选)。 ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 } contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认 为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。 提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的 dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; } global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局 ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。 ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。 服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。 jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。 该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如 {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。 password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。 processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度 来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM 树信息或者其他不希望转换的信息，请设置为false。 scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时 才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
同域内的ajax
/*xxx.json的数据如下*/ {"name":'张三',"age":25,"sex":"男"}
/* 同域ajax是同一个域名和站点下,例如: 本站是:http://wap.cmread.com 请求地址是http://wap.cmread.com/xxx.json */ var ajaxUrl = 'http://wap.cmread.com/xxx.json'; $.ajax({ type:'get',/*请求类型get还是post*/ url:ajaxUrl,/*请求地址*/ cache:false,/*是否缓存,false不缓存*/ success:function(returnData){/*请求成功之后的回调函数*/ console.log(returnData); }, error:function(){/*失败后的回调函数*/ console.log('error'); } });
跨域的ajax
/* 跨域ajax是不同域名和站点下的异步请求,例如: 本站是:http://wap.cmread.com/r 请求地址是http://wap.cmread.com/rbc/xxx.json */ /*xxx.json的数据如下*/ {"name":'张三',"age":25,"sex":"男"} var ajaxUrl = 'http://wap.cmread.com/rbc/xxx.json'; /*下面这个是同一域名不同站点的跨域*/ $.ajax({ type:'get',/*请求类型get还是post*/ url:ajaxUrl,/*请求地址*/ dataType:'jsonp', cache:false,/*是否缓存,false不缓存*/ success:function(returnData){/*请求成功之后的回调函数*/ console.log(returnData); }, error:function(){/*失败后的回调函数*/ console.log('error'); } }); /*下面这个是不同域名不同站点的跨域*/ /* 跨域ajax是不同域名和站点下的异步请求,例如: 本站是:http://wap.cmread.com/r 请求地址是http://www.baidu.com/xxx.json 一般这种跨域形式都会有一个callback回调函数返回, 需要前端和后端匹配callback使用才能成功进入到success函数, 否则都属于请求失败error */ /*xxx.json的数据如下*/ callback({"name":'张三',"age":25,"sex":"男"}) var ajaxUrl = 'http://www.baidu.com/xxx.json'; $.ajax({ type:'get', url:ajaxUrl, cache:false, dataType:'jsonp',/*跨域数据类型jsonp不是json而是以一种script形式返回*/ jsonp:'jsonpCallback',/*重写回调函数名*/ jsonpCallback:'callback',/*重写回调函数名指定服务端返回的callback名*/ success:function(returnData){/*成功回调函数*/ console.log(returnData); }, error:function(){/*失败回调函数*/ console.log('error'); } });