Ajax学习笔记

       jquery-AJAX学习（视频）

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键--发送异步请求，接收响应及执行回调都是通过它来完成的。

jquery采用了三层封装：

1.底层：$.ajax()

2.第二层：.load() ,$.get,$.post

3.最高层：$.getScript()和$getJson()

load

load(url, [,data] [,callback])

url:string类型，属性类型作用urlstring类型 请求HTML页面的URL地址data(可选)object类型发送至服务器的key/value数据callback(可选)function请求完成时的回调函数，无论成功或失败

.load()方式中以get收取数据用？+键值对，post收取数据用{...}

function(response,status,xhr){}

   response代表原始数据，

   status代表状态（success/error）

    xhr对象回调函数{包含属性responseText,responseXML,status响应的http状态，statusText HTTP状态说明}

load()方法需要注意的点：

1.主页面相应的样式会立即应用到新加载的内容上

2.load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，则自动转换为POST方式

3.load()方法中无论Ajax请求是否成功,只要当请求完成（complete），回调函数（callback）就会被触发。

  get()回调函数只有当数据成功返回(success)后才被调用，与load()方法不同

get

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

.load()方法是局部方法，因为他需要一个包含元素的jquery对象作为前缀，而$.get()和$.post()是全局方法，.load()方法适合做静态文件的异步获取，而对于需要传递参数到服务器页面的$.get()和$.post()更合适

$.get()方法有四个参数，前三个参数和.load()方法一样，多了第四个参数type.即服务器返回的内容格式包括XML,html，script，json，jsonp和text(不会的不写就智能判断)

第一个参数response是必选

$.get()方法传参方式

1.通过直接在url问好紧跟传参

2.通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号紧跟传参data:

3.通过第二个参数data，对象形式的键值对传参，然后自动转换为问号紧跟传参{...}

post 

$.post()方法传参方式不支持get的1，23支持

$.getScript(),用于加载特定的JS文件，$.getJson(),用于加载特定的JSON文件，与get/post不同，没有第四个参数

$.getScript(),$.getJson(),也支持回调函数

Ajax

例 data：$('form').seralize()

seralize()表单序列化

1.字符串形式的键值对，并且还对URL进行编码

2.不但可以序列化表单内的元素，还可以直接获取表单单选框，复选框，和下拉列表框等内容

例 decodeURLComponent() 解码

例 console.log($(this)serializeArray().)

serializeArray()返回JSON数据，

因为JSON数据不能直接显示，用console.log可以在控制台查看

Ajax加载请求提高用户体验

例$(document).ajaxStart(function(){

$('.loading').show();

}).

.ajaxStop(function(){

$('.loading').hide();

})

例 如果请求时间太长，可以设置超时

$.ajax({

timeout:500

})

例 相同的ajax属性可以用ajaxSetup封装起来

$.ajaxSetup({

type:'POST',

url:'user.php',

data:('form').serialize()

})

例 在使用data属性传递的时候如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式

  使用$.param()方法将对象形式的键值对转为URL地址的字符串键值对，可以更加稳定的传递表单内容

var obj={a:1,b:2};

var form=$.param(obj);

alert(form);

例 $(document).ajaxError(function(event,xhr,settings,infoError){});

请求全局事件

.ajaxStart()

.ajaxStop()

.ajaxError() ----->对应局部方法success()

.ajaxComplete()----->对应局部方法complete()

.ajaxSend()

JSON跨域：跨域用JSONP，它是一个非官方的协议，允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问

例 

//跨域的php端文件

<?php

$arr=arry('a'=>1,'b'=>1);

$result=json_encode($arr);

$callback=$_GET['callback'];

echo $callback."($result)";

?>

//$getJson()方法跨域获取JSON

$.getJson('http://www.li.cc/test.php?callback=?',function(response){

console.log(response);

})

其他方法1.url：'http://www.li.cc/test.php?callback=?'

               2.dataType：‘jasonp’ 因为dataType强制转化

jqxhr就是$.ajax()返回的对象

var jqXHR=$.ajax({

type:'POST',

url:'user.php',

data:$('form').serialize()

});

在之前使用了局部方法：.success(),conplete()和error()这三个局部方法并不是XMLHttpRequest对象调用的，而是$.ajax之类的全局方法返回的对象调用的，这个对象就是jqXHR对象

如果使用jqXHR对象的话用.done() .always() .fail() 代替success complete error

使用jqXHR的连缀方式的好处

1.可连缀操作，可读性大大提高

2.为多个操作指定回掉函数

3.可以多次执行同一个回调函数

3例 $.when(jqXHR,jqXHR2).done(function(r1,r2){

alert(r1);   //比较alert(r1[0]);

alert(r2);

})

属性