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;

}

暂时就整理了这些,有不好的地方,大家提出了

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容