《锋利的Jquery》笔记(二)：Jquery中的Ajax

load()方法

远程载入HTML文档并插入DOM

/*url：请求html页面的url地址；
data:发送至服务器的数据(若没有参数则用GET方式传递，有参数则自动用POST方式传递)；
callback:请求完成后所执行的函数。*/
load(url,data,callback);

//实例
<div id='resText'></div>

//test.html
<div id="text">
<div class="comment">
<p class="para">沙发</p>
</div>
</div>

//场景1：
$(function(){
$("#resText").load("test.html");
});

//结果
<div id='resText'>
<div id="text">
<div class="comment">
<p class="para">沙发</p>
</div>
</div>
</div>

//场景2：筛选html文档
$(function(){
$("#resText").load("test.html .para");
});

//结果
<div id='resText'>
<p class="para">沙发</p>
</div>

$.get()

和

$.post()

方法

1.load()方式主要用来获取静态的html文档，而.get()和.post()用来传递参数到服务器。

结构：

//type：服务器端返回内容的格式，包括xml、html、json、script和text等
$.get(url,data,callback,type);//$.get()方法使用GET方式来进行异步请求
$.post(url,data,callback,type);

2.数据格式

HTML：无需解析就可以直接插入到主页面，效率高；

XML：体积较大，解析速度慢，但是可移植性强；

JSON：简洁，解析速度快但容错率低

结论：不需要与其他程序共享数据时，使用HTML；如果需要数据重用，JSON在性能和文件大小上占优；当远程程序未知时，使用XML文档。

3.区别:

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器；

GET方式对传输大小有限制（通常不能大于2KB），而POST方式传递的数据量更多（理论上不受限制）；

GET方式请求的数据会被浏览器缓存起来，因此GET方式会带来安全性问题；

$.getScript()

和

$.getJson()

方法

1.

$.getScript()

有时候无需在初始化的时候加载全部的JS文件，因此可以在需要的时候再动态加载

$(document.createElement("script")).attr("src","test.js").appendTo("head");//传统方法
$.getScript("test.js");//新方法

2.

$.getJson()

用来加载JSON文件，用法与

$.getScript()

相同

$.jsonp()

方法

jsonp是一个非官方协议，它通过JavaScript Callback的形式实现跨域访问，由于Json只是一种含有简单括号结构的纯文本，因此许多通道都可以交换Json消息，而由于同源策略的限制，开发人员无法在与外部服务器通信的时候使用XMLHttpRequest，而JSONP是一种可以绕过同源策略的方法，从服务器端直接返回可执行的JS函数或者JS对象。

$.jsonp({
type: "get",
async: false,
url: "http://" + proxyServiceInfo.CalledHostName + ":" + proxyServiceInfo.CalledPort + "/UIHVenusProxyService/service/SetSessionUserRefid",//跨域访问
dataType: "jsonp",
data: { userId: userRefid, ip: requestHostIp, port: requestHostPort },
callbackParameter: "callback",
error: function () {
}
});

ajax和jsonp的实质核心、区别联系

　　1.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

　　2.实质不同

　　　　ajax的核心是通过xmlHttpRequest获取非本页内容

　　　　jsonp的核心是动态添加script标签调用服务器提供的js脚本

　　3.区别联系

　　　　不在于是否跨域

　　　　ajax通过服务端代理一样跨域

　　　　jsonp也不并不排斥同域的数据的获取

　　4.jsonp是一种方式或者说非强制性的协议

　　　　ajax也不一定非要用json格式来传递数据

　　　　

jsonp的实现核心就是利用script标签的跨域能力。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

$.ajax()

方法

Jquery中最底层的Ajax实现，除了

$.jsonp()

方法外，前面所有的ajax方法都可以用

$.ajax()

方法来代替。

结构：$.ajax(options);

参数：

url：请求地址；

type：请求方式（PUT或GET）,默认为GET；其他如PUT和和DELETE方式仅部分浏览器支持；

timeout：设置请求超时时间（毫秒）；

data：Object或JSON，发送到服务器的数据，如果已经不是字符串，将自动转换成字符串格式。GET请求中的数据将附在URL之后；

dataType：预期服务器返回的数据类型。如果不指定，Jquery将自动根据HTTP中的MIME信息返回responseXML或responseText;

beforeSend：请求发送前可修改XMLHttpRequest对象的函数，如果在beforeSend函数中返回false，可取消本次Ajax；

function (XMLHttpRequest){
this;//调用本次Ajax请求时传递的options参数
}

complete：请求完成后调用的回调函数（无论请求成功与否）；

success：请求成功后调用的回调函数，有2个参数。

//data:由服务器返回，并根据dataType参数进行处理后的数据；textStatus:描述状态的字符串;
function (data，textStatus){
this;//调用本次Ajax请求时传递的options参数
}

error：请求失败时被调用的函数，有3个参数。

//XMLHttpRequest对象；textStatus：错误信息；errorThrown:捕获的错误对象;
function (XMLHttpRequest，textStatus，errorThrown){
//通常情况下textStatus和errorThrown中只有一个包含信息
this;//调用本次Ajax请求时传递的options参数
}

一个完整的Ajax请求实例：

$.ajax({
type: "Post",
url: "/Venus/Viewer/GetPresentationStateInfo",
data: JSON.stringify({ sopInstanceUid: SOPInstanceUID }),
dataType: "json",
contentType: 'application/json',
async: false,    //是否异步
success: function (data) {
result = ParseJson(data);
if (result && !isTomoRead) {
globalController.fileGspsInfo.set(SOPInstanceUID, result);
}
}
});