ajax和jsonp区别
- ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
- 实质不同
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本 - 区别联系
不在于是否跨域
ajax通过服务端代理一样跨域
jsonp也不并不排斥同域的数据的获取 - jsonp是一种方式或者说非强制性的协议
ajax也不一定非要用json格式来传递数据
-
原生script跨域方法--jsonp
script跨域方法
script跨域方法
-
JQ对jsonp进行封装
image.png
script跨域方法
-
$.ajax()方法参数详解
-
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：返回纯文本字符串。
-
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参数
} -
jsonp：
要求 为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里 的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 -
processData：
要 求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类 型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。 -
contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。
对于上传文件，我们没有在使用原有的 http 协议，所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别
请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。
请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name = "value"的形似发送。
说到这，我们发现在 JQuery ajax() 方法中我们使contentType = false,这不是冲突了吗？这当然没有，因为当我们查看这时的 Request headers，会发现还是有分界符。这就是因为当我们在 form 标签中设置了enctype = “multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
-
利用JQ封装的Ajax实现文件上传
image.png
image.png
