浅谈原生ajax

发表于   |   分类于   |     |  

[TOC]

ajax主要解决了异步操作，通俗一点来讲就是在不刷新的页面的前提下，更新页面的数据。

ajax的核心就是XMLHttpRequest（xhr）。

使用原生ajax主要分为4个步骤：
1.创建对象

1
var xhr=new XMLHttpRequest()

2.打开请求；

1
open(method，url，async)

①method是发送请求的方式一般常用的有get，post
关于post和get区别：
(1)Get使用URL传参。而POST将数据放在BODY中。
(2)GET的URL会有长度上的限制（浏览器本身支持？服务器加限制截掉url），则POST的数据则可以非常大。
(3)POST比GET安全，因为数据在地址栏上不可见。
②url请求的地址。
③async是否异步取值有true/false.一般取值true;
使用举例
xhr.open(“get”,”exmple.txt”,true)

3.发送请求；

1
xhr.send(请求主体或null);

4.接受响应；
1）可以通过检查xhr.readyState的值，来判断对应的请求处于什么状态
•0: 未初始化。尚未调用open()方法
•1: 启动。已经调用open()方法，尚未调用send()方法
•2: 发送。已经调用send()方法，尚未收到响应。
•3: 接收。已经接收到部分数据。
•4: 完成。已经接收到全部响应数据。
•当readystate值从一个值变为另一个值时，都会触发readystatechange事件。我们可以通过绑定onreadystatechange事件，来监听readystate的值是否为4

2）查看xhr.status值，查看服务器的响应结果
•0 本地请求，服务器成功返回了页面
•200 OK 服务器成功返回了数据或者页面
•400Bad Request 语法错误导致服务器不识别
•401Unauthorized 请求需要用户认证
•404 Not found 指定的URL在服务器上找不到
•500Internal Server Error 服务器遇到意外错误，无法完成请求
•503ServiceUnavailable 由于服务器过载或维护导致无法完成请求
3）如果1、2返回结果成功，则可以通过xhr的responseText，获得响应的内容

完整过程举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//1、创建一个XMLHttpRequest对象
if(window.XMLHttpRequest){
	let xhr = new XMLHTTPRequest();
}else{
	let xhr = new ActiveXObject();
}
//2、打开请求，组装参数
xhr.open('post' , 'http://baodi.com',true);
xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
let form=document.getElementById('test-form');
//3、发送请求
xhr.send(new FormData(form));
//4、监听响应
xhr.onreadysstatechange=function(){
	if(xhr.readyState == 4){
			if((xhr.status>=200 && xhr.status<300)  ||  xhr.status == 304){
					//返回成功的处理
					alert(xhr.responseText);
			}else{
					//返回失败的处理
					xhr.status;
			}
	}
}

热评文章