ajax情书,强大的Ajax

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的强大了么？

最后求点赞，求分享，求抱抱...