ajax的基本概念及其使用(5步)

同步&异步

先上概念

同步:必须等待前面的

任务

完成,才能继续后面的任务

异步:不受当前

任务

的影响

举个例子:

同步:我们在银行排队时,只有等到你了,才能够去处理业务. 

异步:我们在排队的时候,玩手机是没有任何影响的.

异步更新网站

当我们访问一个普通的网站时,当浏览器加载完:

HTML,CSS,JS

以后网站的内容就固定了.如果

网站内容发生更改

必须刷新页面才能够看到更新的内容

网站内容更新:

常规的网站内容更新,必须通过

刷新

显示新内容

想像一下
你正用手机看着微博

手机网速很慢

内容看完了,点击

加载更多

按钮

页面重新刷新 

o(╯□╰)o

异步更新
实际情况是:我们在访问

新浪微博

时,当你看到一大半了,会

自动

帮我们加载更多的微博,同时页面并没有刷新

Ajax概念

当我们

正在排队

的时候,可以通过

手机

去干一些其他的事情.

在浏览器中,我们也能够不

刷新页面

,通过

ajax

的方式去获取一些新的内容,类似网页有

微博

,

朋友圈

,

邮箱

等

单词解释:

Asynchronous Javascript And XML

（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象

XMLHttpRequest

XMLHttpRequest

ajax

使用的依旧是

HTTP请求

,那么让我们来回忆一下一个完整的

HTTP请求

需要什么

>

请求的网址,方法

get/post

提交请求内容

数据

,

请求主体

等

接收响应回来的内容

五步使用法:

建立XMLHTTPRequest对象

注册回调函数

当服务器

回应

我们了,我们想要执行什么逻辑

使用open方法设置和服务器端交互的基本信息

设置提交的

网址

,

数据

,

post

提交的一些额外内容

设置发送的数据，开始和服务器端交互

发送数据

更新界面

在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET

get的数据,直接在请求的

url

中添加即可

<script type="text/javascript">

// 创建XMLHttpRequest 对象

var xml = new XMLHttpRequest();

// 设置跟服务端交互的信息

xml.open('get','01.ajax.php?name=fox');

xml.send(null);    // get请求这里写null即可

// 接收服务器反馈

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

// 打印响应内容

alert(xml.responseText);

}

};

</script>

示例代码:POST

<script type="text/javascript">

// 异步对象

var xhr = new XMLHttpRequest();

// 设置属性

xhr.open('post', '02.post.php' );

// 如果想要使用post提交数据,必须添加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 将数据通过send方法传递

xhr.send('name=fox&age=18');

// 发送并接受返回值

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

</script>

XMLHttpRequest_API讲解

1.创建

XMLHttpRequest

对象(兼容性写法)

新版本浏览器:

var xml=new XMLHttpRequest();

（IE5 和 IE6）

var xml=new ActiveXObject("Microsoft.XMLHTTP");

考虑兼容性创建Ajax对象

var request ;

if(XMLHttpRequest){

// 新式浏览器写法

request = new XMLHttpRequest();

}else{

//IE5,IE6写法

new ActiveXObject("Microsoft.XMLHTTP");

}

2.发送请求:

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

3.POST请求注意点:

如果想要像

form

表单提交数据那样使用

POST

请求,需要使用

XMLHttpRequest

对象的

setRequestHeader()

方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

xmlhttp.open("POST","ajax_test.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

4.onreadystatechange事件

当服务器给予我们反馈时,我们需要实现一些逻辑

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

4.服务器响应内容

如果响应的是普通字符串,使用

responseText

,如果响应的是

XML

,使用

responseXML

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。