0.前言
最近朋友总是跟我说起简书,然后我就注册一个看了看,哎呦,果然不错(是吧,你也是这么想的!!!),但我只看,不写,但是我感觉自己的洪荒之力就快要爆了(蹦沙卡拉卡),收,不废话了,我今天和大家分享一下自己对Ajax的一些理解和认识。。。(鼓掌)(楼上说的对)(+1)
1.简介
AJAX 指异步JavaScript及XML(Asynchronous JavaScript And XML(异步JavaScript和XML)),是指一种创建交互式网页应用的网页开发技术。
2.那么我们就来用Ajax的前世今生来个比较,不废话(有图有真相)
早期的页面交互
现在的页面交互
从图片上看一下就一目了然了,以前的交互方式流程太多,还浪费时间,只要你做出请求后,后端就会把你发送的请求做出修改之后的整个HTML页面数据传输给你,覆盖掉你以前的页面,然而,现在的页面交互相对于早期的页面交互那就很先进了,现在你做出请求以后,后端会把数据取出,传输给你,解析数据,显示在页面上,而不是把整个页面的数据传输给你,那么,就很容易看出来,现在的页面交互比以前的页面交互简单,省时,省事的多,
2.同步交互 与 异步交互
同步交互:提交请求-->等待服务器处理-->服务器返回数据,在此期间页面不能进行任何操作(B/S模式)
异步交互:请求通过事件触发-->服务器处理(然后可以做其他的事情)-->服务器进行响应。(ajax)
举列子:
异步:你传输吧,我去忙其他事情了,传完之后告诉我。
同步:你传输,我就静静的看你传完之后我在去做其他的事情。
(当然少不了图片)
Ajax(屌丝)是怎样追求女神的(噢噢)
Ajax(屌丝)是怎样追求女神的
首先你的准备纸笔,写下你想表达出你是如何对女神一见钟情的情书,还有把你花了好几个晚上的情书送给你的女神,在你等待你的女神回答的时候,你也有自己的事情要做,(一边做自己事一边等),终于女神回信了(激动啊),看完整封信后做出自己的处理。。。
3.Ajax五步走
Ajax通讯原理
0.创建xhr对象
1.初始化
参数1:请求方式(get和post)
参数2:请求的URL(地址)
参数3:是否异步,true为异步,false为同步
2.发送请求
3.接收返回数据
3.1、判断http响应状态
3.2、判断readyState请求状态
4.处理数据
4.代码实现
//0.创建xhr对象
var xhr = new XMLHttpRequest();
//给xhr添加一个数据响应事件(当服务器响应时触发)
xhr.onreadystatechange = callback;
//1、初始化
/*
*参数1:请求方式(get和post)
*参数2:请求的URL(http://10.0.154.94/aijx.txt)
*参数3:是否异步,true为异步,false为同步
*/
xhr.open("get","http://10.0.154.195/ajax.txt",true);
//2、发送请求
//如果使用的是get方式,这里不用传递参数
//如果使用的是post方式,参数在这里传递
xhr.send();
//3、接收返回数据
function callback(){
//3.1、判断http响应状态
if (xhr.status == 200 || xhr.status == 304) {
//3.2、判断readyState请求状态
if (xhr.readyState == 4) {
//4、处理数据
console.log(xhr.responseText);
}
}
}
结束语
如何让你遇见我,在我最美丽的时刻(就是现在啊,是时候该展现真正的技术了)怎么样,看过上面的文章,体会到Ajax的强大了么?
最后求点赞,求分享,求抱抱...