jQuery中的ajax

jQuery中的ajax

Ajax

异步和同步

使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

jQuery对Ajax采用了三层封装，其中最底层的是： .ajax(),中层封装是.load()，.get()，.post，最顶层是getScript和getJSON()。

.load()方法

.load()方法是局部方法,.load()方法中共有三个参数，一个是url，链接地址，第二个是发送的数据data，第三个是回调函数callback，期中第二个参数为非必选参数。

1.参数url, 可以提供筛选功能。
$().load('data/test.html ')
$().load(‘data/text.html .box’)>>>筛选功能

2.data参数传入决定，是否以post方式提交参数是一个对象形式传入。
$().load(‘data/test.html’,{ data:‘admin’ })

3.回调函数function(response,status,xhr){}
$().load(‘data/test.html’,{ data:‘admin’ },function(response,status,xhr){})

response ：返回结果，和页面里内容一样 。

status ：状态，success，或者error

xhr ：XMLHttpRequest，他是一个对象

xhr有四个常用属性:

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主体内容类型是"text/xml"或"application/xml"， 则返回包含响应数据的 XMLDOM 文档
status	响应的 HTTP 状态（状态码）
statusText	HTTP 状态的说明

.get()和.post()

.get()和.post()有四个参数，其中第一个地址参数为必填参数，第二个参数data，和第三个callback函数和.load()方法一样， 第四个参数为type
$.get(‘data/test.html’,{ name:‘admin’ },‘html’)

由于php返回的值默认为纯文本格式，所以数据格式html和text格式可以不写。如果写入数据格式，那么默认会强制转换为该格式。如果传入错误格式，那么不会有返回值。

注：一般情况下，type都是只能判断，并不需要人为设置，除非需要打印整个文件的代码，才需要强制类型转换。

.get()和.post()的差别:.get()是以get方式提交，.post()方式是以post方式提交。

1.get方式提交数据是吧数据放在浏览器网址上面的，post是通过http消息，实体提交的。
2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。
3.get方式因为在浏览器中会被历史记录缓存，所以这种提交数据方式并不安全，post方式没有这种问题。
4.在服务器端（php语言），get方式通过$GET[]方式获取，post通过$POST[]方式获取。

.ajax()方法；

getScript()和$.getJSON()；

jquery封装AJAX的最顶层，用于特定情况下的使用。 有三个参数,与$.get()和$.post()方法，前三个参数相同。

getScript()在需要资源的时候加载，是实现资源节约的时候需要用到的一个方法。

$.ajax()方法:

 $.ajax({
       //常用属性集合
         $.ajax({
            url:url,
            data:{},
            type:"get",
            success:function(){},
            timeout:2000,
            error:function(){},
            beforeSend:function(){},
            dataType:"jsonp",
            jsonp:"cb",
            // 是否触发ajax的全局方法
            global:true
         })
    })

         // 最简化的ajax
         $.ajax({
             url:url,
             success:function(res,type,xhr){
                 console.log(res)
             }
         })

       // 超时的ajax
        $.ajax({
            url:url,
            success:function(res,type,xhr){
                console.log(res)
            },
            error:function(a,b,c){
                console.log(a,b,c)
            },
            timeout:10
        })

表单序列化
当页面上表单需要提交时，我们如果把数据直接写在data里面工作量会很大，所以出现了表单序列化。
$(‘form’).serialize()
表单序列化是把整个表单内容提取出来，组成一个键值对，并且对URL进行编码。

$.ajaxSetup() ajax初始化对于ajax可以做一个预先设置，减少重复。

$.ajaxSetup({
    url:'',
    type:'post',
    data:{user:'ddd'}
})

$.ajax({
    success:function(data){
        alert(data)
    }
})

$.param()方法，用来解析对象。

因为浏览器对对象的解析有限，太过复杂的对象无法解析，于是出现了$.param()方法用来解析对象。

alert($.param({
    email:'ddd',
    user:'lll'
}))

全局函数类型	何时被触发	参数
ajaxStart	在jQuery AJAX函数或命令发起时，但在XHR实例被创建之前	类型被设置为ajaxStart的全局回调信息对象
ajaxSend	在XHR实例被创建之后，但在XHR实例被发送给服务器之前	类型被设置为ajaxSend的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxSuccess	在请求已从服务器返回之后，并且响应包含成功状态码	类型被设置为ajaxSuccess的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxError	在请求已从服务器返回之后，并且响应包含失败状态码	类型被设置为ajaxError的全局回调信息对象；XHR实例；$.ajax()函数使用的属性；被XHR实例返回的异常对象(如果有的话)
ajaxComplete	在请求已从服务器返回之后，并且在任何已声名的ajaxSuccess或ajaxError回调函数已被调用之后	类型被设置为ajaxComplete的全局回调信息对象；XHR实例；$.ajax()函数使用的属性
ajaxStop	在所有其他AJAX处理完成以及任何其他适用的全局回调函数已被调用之后	类型被设置为ajaxStop的全局回调信息对象