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;
}
暂时就整理了这些，有不好的地方，大家提出了
网友评论