Ajax

 1.Ajax是什么：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2. 两种常用的数据格式：JSON和XML(JSON与XML都是常见的数据格式 都是标记语言)

(1) JSON（JavaScript Object Notation）轻量级数据格式(272字节)   (2) XML是一种可拓展标记语言（406字节）

(3) JSON的优势：轻量级，解析比XML更快，查找数据无需查找标签     JSON的劣势：IE7中不支持原生JSON解析 需要引入第三方库的支持

(4) XML的优势：格式统一 数据共享方便                                                   XML的劣势：XML文件庞大传输占带宽 花费资源多时间多（建议使用JOSN）

JSON的常见形式：

JSON对象

JSON字符串：是指该字符串变量的值与JSON的格式相同，但是不是JSON对象。

    转换：

将JSON字符串转换为JSON对象：

①eval(“(”+json2+”)”);

②JOSN.parse()

将JSON对象转换为JSON字符串

JSON.stringify()

JOSN与JS的区别：JOSN必须双引号 JS可以不加

3.Ajax的优势：

(1)异步加载数据，无需切换页面

(2)更佳的用户体验：局部刷新、及时验证、操作步骤简化等

(3)节省流量

(4)JS控制数据的加载，更加灵活多用

4.基本语法：

(1)创建Ajax对象 var xhr = new XMLHttpRequest()

兼容性：

if(window.XMLHttpRequest){

var xhr=new XMLHttpRequest();

}else{

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

};

(2)指定接受请求回来的内容：xhr.onreadystatechange = function(){}

xhr.readyState:

    0-----open方法还没调用

    1-----调用send方法

    2-----头部已经被服务器接受

    3-----开始接受服务器返回的数据 还没接受完

    4-----请求完成

xhr.status:

语法：xhr.status>= 200 && xhr.status < 300||xhr.status==304这样写更合理

每一次请求都会根据请求是否成功 返回不同的状态码

status==200 请求成功

status==304 文件没有发生改变(缓存中可以加时间戳和加随机数)

请求的文件盒已经存在与浏览器缓存当中的文件作比较 如果相同 就不会

再继续发请求而是从缓存中读取文件

status==404:没有找到文件(网址不存在 url不对 查询URL是否正确)

status==400:错误请求 常见于语法错误

status==500:服务器内部错误

status==505:服务器不支持或拒绝请求头中指定的HTTP版本

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText   获得字符串形式的响应数据

responseXML  获得 XML 形式的响应数据

(3)第三步：open(“get/post”,url,true/false)

①Url:String，文件在服务器上的位置

②true(异步加载)false(同步加载)

③get方式:通过url  名字=值&名字=值

④post方式要设置请求头setRequestHeader才可以发送数据到后台(更安全)

1)xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded;

⑤解决缓存：时间戳和随机数 ?date”+new Date().getTime()

(4)第四步：将请求发送给服务器：send(string（post方式）/null）

5.跨域：

(1)含义：从一个域名访问另一个域名（同源策略）

(2)为什么要跨域：想把网站的一些图片，脚本等 其他资源放到另外一个站点的时候

(3)天然跨域：img、script、iframe等元素的src属性可以直接跨域请求资源

(4)AJAX跨域

①可以用服务器去别的网站获取内容然后返回页面

②URL传给服务器，由服务器去访问跨域地址

③Get和post 请求

④使用场景：接口允许用哪个就用哪个

接口两个都允许，首选用get

当遇到需要传递密码等私密信息的时候，选择POST

(5)JSONP跨域

①含义：利用script标签的跨域能力请求资源；

②语法：利用JS构造一个script标签，把JSON的URL赋给script的src属性，把这个script插入到DOM里，让浏览器去获取。

1)Ajax.jsonpFn(“url”,”callbackName”,callbackFn)

2)第一步：引入数据

a.回调函数callback()

3)第二步创建script

4)第三步：创建script 填入src(拼接)

a.creatScript("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+content.value+"&cb=callBack");

b.cb:服务器指定接受回调函数的名字

③ encodeURIComponent（） 转为编码

6.jQuery里的Ajax

(1)load() 请求服务器的数据，并且把返回的数据放在指定元素中

$("body").load(url,[data],callBack);

(2)getJSON();从服务器请求json格式的数据 使用同onload

(3)getScript();从服务器上请求并执行一个js文件

(4)$.get(url,[data],[success{data}],[dataType]);相当于

$.ajax({

    type:"get",

url:url,

data:data,

success:success,

dataType:dataType

});

dataType:xml json script html

$.ajax({

type:"post",

url:url,

data:data,

success:success,

dataType:dataType

})

(5)jQuery Ajax的跨域

$.ajax({

dataType:"jsonp",

url:"http://www.weather.com.cn/data/sk/101011200.html",

jsonpCallback:"cb",

success:function(data){

console.log(data);

}

});

7.序列化

(1)可以直接把数据转化为url形式

(2)语法：$("form").serialize()

8.模板引擎

(1)介绍：在做数据请求的时候使用字符串拼接URL 操作麻烦容易错误

后来人们就提出了模板引擎的概念 就是讲为定义的字符赋予特殊语法

(2)语法：

1)@string@(string必须与数据中的属性名相同)

2)引入数据

3)数据绑定（字符串替换）

(3)jQuery的模板引擎

1)拿到数据

$.get(“url”,callbackFn)

2)读取数据

  把JSON字符串转为JSON对象 并获取数据

3)遍历JSON对象

a.筛选

b.获取绑定好数据的字符串（字符串替换）

c.将处理好的模板添加到box

案例心得：

9.//处理数据 将字符串转对象

data = typeof data == "object" ? data:eval("("+data+")");

10.Ajax懒加载逻辑

//以滚动的占总需要滚动的比例

var bili = $("#content").scrollTop()/($("#content")[0].scrollHeight-$("#content").height());

if(bili>=0.7){

page++;

$("#more").show();

getJsonFn(typeNum,page);

//没有函数节流的花 数据在没加载的情况下 又去加载其他的就会出现错误

lock = false;

}

11.var lock = true;

if(!lock){

return;

}