Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

涉水的小菜叽

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量261

点赞数

分类专栏： jquery ajax

本文链接：https://blog.youkuaiyun.com/xxhdcblogzh888/article/details/77070736

版权

jquery 同时被 2 个专栏收录

2 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

====常用方法
＄()传入一个函数,会执行它(功能代码块)//＄(function(){xxxxxx})
＄(document).ready(function(){//文档加载完毕的回调函数})
＄.noConflict()//var jq=＄.noConflict()//避免冲突,更改调用名字
＄.parseJSON()//＄.parseJSON(‘{“name”:”karen”}’)//把严格模式的json字符串转为对象
＄.makeArray()//将类数组(数组的有些方法不能使用比如push)对象转化为真正的数组(这时候才能使用数组的一些方法)//常见的类数组:jq对象,NodeList对象,arguments对象//注意点:类数组中的length值决定了转换后数组的长度:＄.makeArray({0:”karen”,1:”46”,length:1})那只会显示第0个。

====getter,setter方法（还不怎么熟悉的）
1.jq设计中同一个方法,既可以当getter又可以当setter,如果传入新值(key-value)就是走的setter,如果只是传入key值,没有指定新值,则走getter方法返回当前值
2.调用setter时不仅会设置value值,调用结束后还会返回当前jq对象(链式调用)
3.调用setter时,有的方法可以接受对象参数和函数参数:对象(每一个属性都指定一个键值对),函数(调用该函数来设置值,函数内部的this指向当前元素,第一个参数为当前元素的索引,第二个参数为当前元素对应的查找值,返回值为设置的新value值)
4.调用getter时,只会查询元素集中的第一个元素,getter不会返回调用自己的jq对象:因此注意链式调用时,中间不能有getter,只能放在末尾

====ajax
一,ajax综合方法
＄.ajax(options)
＄.ajax() 只有一个参数:配置对象,返回值为原生的XMLHttpRequest对象
例:

$.ajax({
url:'http://xxxx',
data:'count=25&maxid=2937193',
type:'GET',
success:function(data){},
error:function(){}
})

选项:(所有选项都是可选的)
—-type:String//请求方式,默认get

—-url:String//请求的地址

—-async:Boolean//(默认: true) 默认设置下，所有请求均为异步请求。如果发送同步请求，设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

—-dataType:String//预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
“xml”: 返回 XML 文档
“html”: 返回纯文本 HTML 信息；包含 script 元素。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数
“json”: 返回 JSON 数据。
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 html 返回 “text/html”)。错误的 MIME 类型可能导致不可预知的错误
如果dataType设置为”script”，那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)

—-cache:Boolean//(默认: true,dataType为script时默认为false)，设置为 false 将不会从浏览器缓存中加载请求信息。

—-contentType:String//(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

—-data:String//发送的参数:”count=25&maxid=29448”。可以填对象,但是属性值如果为数组，jQuery 将自动为不同值对应同一个名称。如:{karen:[“46”, “singer”]} 转换为 ‘&karen=46&karen=singer’

—-error:function//请求失败时的回调
function (XMLHttpRequest, textStatus, errorThrown) {
//参数：XMLHttpRequest 对象、错误状态、捕获的错误对象
// 通常 textStatus 和 errorThrown 之中只有一个会包含信息
//this指向＄.ajax(options)的options参数对象
}

—-timeout:times//超时时间,单位毫秒.如果设置该选项,当请求没有在指定时内完成,请求会取消并触发error回调,回调状态码为’timeout’,默认为0:请求完成之前永不取消
//function(data)
—-success:function//请求成功的回调,三个参数:第一个响应的数据(服务器响应的是什么类型的数据,这里就是对应的类型:比如响应json那这里就是json格式的数据,响应script这里就是加载的js文本). 第二个jq状态码,一般都是”success”. 第三个发送请求的XMLHttpRequest对象,如果是js的请求(dataType:’script’),第三个参数是没有值得

二,抽象出来的单一方法
—-load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中
＄(element).load(url,data,function(response,status,xhr))
url://地址
data://可选,发送的参数。
function(response,status,xhr)
可选,请求完成时的回调
response://结果数据
status://请求的状态（”success”, “error”, “timeout” 或 “parsererror”）
xhr://XMLHttpRequest对象
例:

$("#btn1").click(function(){
  $("div1").load('test.txt')
})

—–＄.get(url,data,callback(response,status,xhr))//如果需要请求出错时的回调函数，请使用＄.ajax方法
url: 必需。
data:(可选)发送到服务器的参数
success:function(response,status,xhr)
可选。请求成功的回调函数
response: 结果数据
status: 请求的状态
xhr: XMLHttpRequest 对象
例:

$.get('http://xxx',function(data){console.log(data)})

—-＄.getJSON(url,callback(data,status,xhr))//如果需要请求出错时的回调函数，请使用＄.ajax方法＄.getJSON没有post方法，能满足跨域要求，请求的数据为JSON数据
url 必需。地址//注意jsonp的请求:http://xxxxx?name=kraren&callback=?问号就填为问号,随机帮我们取名字,然后数据帮我们封装到回调函数的data里
callback(data,status,xhr)
可选。成功的回调函数
data结果数据
status请求的状态

—-＄.post(url,data,callback(data, textStatus, jqXHR),dataType)
//如果需要请求出错时的回调函数，请使用 $.ajax方法
url 必需,请求地址
data//(可选)待发送 Key/value 参数
success(data, textStatus, jqXMLHttpRequest)//(可选)请求成功时执行的回调函数。(回调函数的参数就不讲了)
dataType//(可选)规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）

拓展：用ajax进行预加载

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};