Ajax方法封装

时间:2021-05-24 17:30:08

打算自己封装一个ajax方法,再不用jq库的情况下,直接引用:

ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据;

首页第一步常见一个ajax对象:XMLHttpRequest,之后会用这个对象的属性和方法完成一个数据交互的过程;

1.open方法:

参数:打开方式(post和get)、地址、是否异步(异步:非阻塞,前面的代码不会影响后面代码的执行;同步:阻塞,前面的代码会影响后面代码的执行)

2、send方法

发送请求

3、onReadyStateChange事件:当状态值readystate改变的时候触发的事件

readystate:ajax工作状态:0代表还没有调用open方法;1代表已经调用send方法,正在发送请求;2代表发送请求已完成,已经收到相应内容;;3收到内容解析;4代表内容可在客户端调用

4、status服务器状态码

备注:post和get区别:get是通过url传输,post是通过浏览器传输,ajax封装代码如下

function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} if (method == 'get' && data) {
url += '?' + data;
} xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
} xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
} }
}