var ajax new ajax,Ajax知识点

本文详细介绍了Ajax技术,包括其无需整体页面刷新的特性、JSON和XML数据格式的比较、Ajax的优势以及基本语法。同时,讨论了JSONP作为解决跨域问题的一种方法,解释了其工作原理和应用场景。还提到了jQuery中的Ajax函数以及序列化和模板引擎的概念。最后,文章探讨了Ajax懒加载的实现逻辑和防止数据重复加载的策略。
摘要由CSDN通过智能技术生成

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;

}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值