jquery之数据传输

比眉伴天荒 2022-07-11 08:12 215阅读 0赞

上篇讲完了get与post的区别，现在开始就将jquery（web）对于这两种协议以及其他获取数据的方法。  
一提传输数据，ajax大家必不陌生，今天也主要是将jquery对ajax封装的几种常见方法，其中`$.ajax()`是属于最底层的方法，`$.load(),$.get(),$.post()`是第二层的方法，而`$.getScript()和$.getJSON()属于第三层的方法`。

以前都是用`$.ajax()`来解决所有数据的交互，发现这样效率不够而且代码量大，适当的用一下这些上层的方法也是不错的。

一.`$(element).load()`  
一般加载的都是静态文件；  
以为很简单的呢，第一脚就踩到坑里了，load()不可以加载本地文件的，有人说是windows的安全机制导致的，另一方面应该封装的时候就是跟服务器响应的吧。  
而且，载入的应该仅仅是数据，而非像iframe似得整个结构。  
1.载入HTML文档

$(element).load(url[,data][,callback])

注意：data和回调函数都是可选的  
url:不必说，请求的地址  
data:发送到服务器的key/value数据  
callback:请求完成后的回调函数，无论请求成功还是失败  
例：`$("#content").load("demo.html",{"id":"1","name":"cc"},function(){ })`  
2.筛选载入的HTML文档的一部分  
`$(element).load("url selector")`  
`$("#content").load("demo.html .content ",{"id":"1","name":"cc"},function(){ })`  
3.传递方式  
当data为空是默认为get方式，而不为空时默认是post  
4.回调参数  
`$("#content").load("demo.html .content ",{"id":"1","name":"cc"},function(responseText,testStatus,XMLHttpRequest){ //responsetText: 返回的内容 //textStatus:请求状态：success/error/notmodified/timeout //XMLHttpRequest:XMLHttpRequest对象 })`  
二.`$.get()`

$.get(url[,data][,callback][,type])

url:不必说，请求的地址  
data:发送到服务器的key/value数据  
callback:载入成功时回调函数，注意与load的区别。只有请求结果和状态两个参数  
type:服务器端返回内容的格式：xml/html/script/json/text/\_default

主要需要注意的是解析各种格式数据的方法，这儿就不细讲了。  
三。`$.post()`  
跟`$.get()`的使用方式都类似，它两传输方式的不同点上篇博客已经介绍到了。

上面三个方法完成常规的ajax程序没问题，但是复杂的一些ajax程序，就需要用到`$.ajax()`方法了。其不仅能够实现上述三种功能，而且还设定了许多回调函数来处理不同的情况。  
四、`$.ajax()`  
`$.ajax(options)`  
其只有一个参数，将所有的参数和对调函数封装到一个对象里，参数都一key/value形式存在，所有参数都是可选的  
ajax()提供了一大票参数，所以可以实现相当复杂的功能。

参数名 类型 描述  
url String (默认: 当前页地址) 发送请求的地址。  
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。  
注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。  
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。  
async Boolean (默认: true) 默认设置下，所有请求均为异步请求。  
如果需要发送同步请求，请将此选项设置为 false。  
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。  
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。  
XMLHttpRequest 对象是唯一的参数。  
function (XMLHttpRequest) \{ this; // the options for this ajax request \} function (XMLHttpRequest) \{ this; // the options for this ajax request \}

cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。  
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。  
参数： XMLHttpRequest 对象，成功信息字符串。  
function (XMLHttpRequest, textStatus) \{ this; // the options for this ajax request \} function (XMLHttpRequest, textStatus) \{ this; // the options for this ajax request \}  
contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。  
data Object,  
String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。  
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。  
如果为数组，jQuery 将自动为不同值对应同一个名称。  
如 \{foo:\[“bar1”, “bar2”\]\} 转换为 ‘&foo=bar1&foo=bar2′。  
dataType String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息  
返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:  
“xml”: 返回 XML 文档，可用 jQuery 处理。  
“html”: 返回纯文本 HTML 信息；包含 script 元素。  
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。  
“json”: 返回 JSON 数据 。  
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，  
如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。  
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。  
这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。  
function (XMLHttpRequest, textStatus, errorThrown) \{ // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request \} function (XMLHttpRequest, textStatus, errorThrown) \{ // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request \}  
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，  
如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件  
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。  
使用 HTTP 包 Last-Modified 头信息判断。  
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)  
以配合默认内容类型 “application/x-www-form-urlencoded”。  
如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。  
success Function  
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态  
function (data, textStatus) \{ // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request \} function (data, textStatus) \{ // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request \}

五、`$.getScript()`  
顾名思义，动态加载script文件，也可以加上回调函数来处理其他操作。  
六、`$.getJSON()`  
动态加载json文件

附：jsonp的操作可以找我以前的博客去看看，应该讲的很清楚了。

七、序列化元素  
1.serialize()方法  
将dom元素内容序列化为字符串，用于传输的data，需要注意的是，传输的时候就不需要键值对形式了，直接写序列化后的数据就可以了。  
另外，不只有form可以序列化，其它选择器选择的元素也可以用到它。  
2.serializeArray()方法  
不同于上面转化为string，而是直接转化为json对象  
3.`$.prarm()`  
它其实是serialize()方法的核心，对一个数组或对象进行序列化。  
例：

var obj = {a:1,b:2,c:3}
    var k = $.param(obj);
    alert(k) //输出a=1&b=2&c=3

八、其它  
jquery还根据ajax定义了一些其它有意思的全局回调函数。有：  
ajaxStart(callback)、ajaxStop(callback)、ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxSuccess(callback)。

> 因为这些函数是全局函数，因此只要该页面进行ajax操作时就有效

举个例子：

<div class="loading"></div>
    
    $(".loading").ajaxStart(function(){
        $(this).show();
    });
    $(".loading").ajaxStop(function(){
        $(this).hide();
    });

以前还真没用过这些方法，写了好多没用的代码，以后有机会可以用一下。

写了好多了，中间要有打错的地方大家提醒一下，孰能无过？嘻嘻。