《锋利的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);
            }
        }
    });