JS_ajax请求初体验

onload事件—推荐使用

GET传递参数

// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉ajax对象要发送请求，以什么方式发送请求
var name = "zhangsan";
vae age = 30;
// 拼接请求参数
var params = 'name='+name+'&age='+age;
// 1）请求方式 2）请求地址
xhr.open('get','http://localhost:3000/get?'+params);
// 通过请求头告诉服务器端客服端想服务器端传递的请求参数的格式是什么
// 3.发送请求
xhr.send();
//4.获取服务器响应到客户端的数据
xhr.onload = function (){
	console.log(xhr.responseText);	//响应数据
}
           

POST 普通请求参数

// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉ajax对象要发送请求，以什么方式发送请求
var name = "zhangsan";
vae age = 30;
// 拼接请求参数
var params = 'name='+name+'&age='+age;
// 1）请求方式 2）请求地址
xhr.open('post','http://localhost:3000/get');
// 通过请求头告诉服务器端客服端想服务器端传递的请求参数的格式是什么
// 设置请求参数格式的类型（post请求必须要设置）
xhr.seRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3.发送请求
xhr.send(params);
//4.获取服务器响应到客户端的数据
xhr.onload = function (){
	console.log(xhr.responseText);	//响应数据
}
           

POST json传递参数

// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉ajax对象要发送请求，以什么方式发送请求
// 1）请求方式 2）请求地址
xhr.open('post','http://localhost:3000/json');
// 通过请求头告诉服务器端客服端想服务器端传递的请求参数的格式是什么
//JSON.stringify() 将json对象转换为json字符串
// 3.发送请求  需要转json字符串才能发送
xhr.send(JSON.stringify({name:'lisi',age:50}));
//4.获取服务器响应到客户端的数据
xhr.onload = function (){
	console.log(xhr.responseText);
}
           

获取服务器端的响应

ajax状态码：表示ajax请求的过程状态吗，ajax对象返回的

0：请求未初始化还没有调用ipen()

1：请求已经建立，但是还没有发送（还没有调用send()）

2：请求已经发送

3：请求正则处理中，通常相应中有部分数据可以用了

4：相应完成，可以获取并使用服务器的响应数据

xhr.readyState //获取jsx状态码

onreadystatechange //当ajax状态码发生变化时将自动触发该事件

onreadystatechange事件–兼容低版本浏览器

var xhr = new XMLHttpRequest();			//创建ajax对象
// 0 已经穿件了ajax对象 但是还没有对ajax对象进行配置
console.log(xhr.readyState);
xhr.open('get','http://localhost:3000/readystate');
// 1 已经对ajax对象进行配置 但是还没有发送请求
console.log(xhr.readyState);
//当ajax状态码发生变化时将自动触发该事件
xhr.onreadystatechange = function() {
	//2	请求已经发送了
	//3	已经接受到服务器端的部分数据了
	//4	服务器端的响应数据已经接受完成
	console.log(xhr.readyState);
	//对ajax状态码进行判断，如果状态码的值为4就代表数据已经接受完成了
	if(xhr.readyState == 4){
		console.log(xhr.responseText);	//响应数据
	}
}
xhr.send();
           

错误处理–状态码

http状态码：表示请求的处理结果 是服务器端返回的

xhr.status //获取状态码

404：网络不畅通，服务器端没有接受到请求 检查请求地址是否错误

500：网络畅通，服务器端接受到请求 服务器端错误，后端

200：正常访问

onerror：网络中断时会触发onerror时间

xhr.onerror = function (){
	alert('网路中断，无法发送ajax请求')
}
           

解决ie低版本浏览器缓存

在请求地址后面添加随机数