一个简单的Ajax请求

首先在封装一个自己的ajax函数之前，我们需要先知道怎么实现一个简单的ajax请求。

这里我建了两个文件，ajax01.html和ajax01.php

ajax01.html代码：

<!doctype html>
<html><head><meta charset="UTF-8"><title>Ajax</title></head><body><input type="button" id="getContent" value="点我获取内容" /><div id="container">点击上面的按钮，我会变哦</div></body><script>
/*********************************ajax**********************************///获取元素var getContent = document.getElementById("getContent");var container = document.getElementById("container");var user_info = document.getElementById("user_info");//给元素添加单击事件处理函数getContent.onclick = function (){//1.创建XHR对象var xhr = new XMLHttpRequest();//4.给请求添加状态变化事件处理函数xhr.onreadystatechange = function (){//判断状态码if(xhr.status==200 && xhr.readyState==4){//将返回的json数据解析后保存在变量res中var res = JSON.parse(xhr.responseText);container.innerHTML = res.name;}};//2.初始化请求xhr.open('get','ajax01.php?name=张三&age=16',true);//如果是post请求，需要设置这个请求头//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//3.发送请求xhr.send(null);};</script>
</html>

可以看到使用ajax发请求并获取响应数据只需要简单的4步

参数说明：

xhr.status------------------------status ：响应的 HTTP 状态，200表示响应成功

xhr.readyState-----------------readyState该属性表示请求/响应过程的当前活动阶段，这个属性可取的值如下：

0 ：未初始化。尚未调用 open() 方法。
1 ：启动。已经调用 open() 方法，但尚未调用 send() 方法。
2 ：发送。已经调用 send() 方法，但尚未接收到响应。
3 ：接收。已经接收到部分响应数据。
4 ：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

xhr.onreadystatechange----------------------readyState属性状态变化事件，只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。

xhr.responseText---------------------------------responseText ：作为响应主体被返回的文本。

xhr.responseXML -------------------------------responseXML ：如果响应的内容类型是 "text/xml" 或 "application/xml" ，这个属性中将保存包含着响应数据的 XML DOM 文档

这里需要注意的是，使用ajax发送post请求时要先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded如下：

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

头部信息设置的设置一定要在open()方法之后，send方法之前，代码如下：

//初始化请求
xhr.open('post','ajax01.php',true);//如果是post请求，需要设置这个请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//发送请求,如果还要发送数据,将数据传入send方法中
xhr.send('name=张三&age=16');

如果还要发送数据，把数据传入send()中

ajax01.php中的代码如下：

<?phpif(empty($_POST)){//接收get请求参数，并将数据格式化为json字符串返回给ajaxecho json_encode($_GET);
}else{//接收post请求参数，并将数据格式化为json字符串返回给ajaxecho json_encode($_POST);
}?>

好了，在知道了如何使用ajax发起一个简单的请求后，我们现在可以来动手封装一个自己的通用ajax函数了

封装自己的通用Ajax函数

闲话少说，我们直接上代码吧

/*
*封装一个自己的ajax函数
*有5个参数，最后一个参数可选
*
* @param method(必选)    请求类型  get 和 post
* @param url(必选)       请求的url地址   相同域名下的页面（此函数不支持跨域请求）
* @param data(必选)      请求协带的数据  以js对象的形式定义，如：{name:'张三'}
* @param callback(必选)  回调函数,可接收一个参数，这个参数就是服务器响应的数据
* @param type(可选)      指定服务器响应的数据类型（可选值：json,xml,text），如果是json模式，则使用json解析数据，默认为text普通字符串
*/
function myAjax(method,url,data,callback,type){//创建兼容 XMLHttpRequest 对象var xhr;if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safarixhr=new XMLHttpRequest();}else{// code for IE6, IE5xhr=new ActiveXObject("Microsoft.XMLHTTP");}//给请求添加状态变化事件处理函数xhr.onreadystatechange = function (){//判断状态码if(xhr.status==200 && xhr.readyState==4){//根据type参数，判断返回的内容需要进行怎样的处理if(type=='json'){//获得 json 形式的响应数据，并使用parse方法解析var res = JSON.parse(xhr.responseText);}else if(type=='xml'){//获得 XML 形式的响应数据var res = responseXML;}else{//获得字符串形式的响应数据var res = xhr.responseText;}//调用回调函数,并将响应数据传入回调函数callback(res);}};//判断data是否有数据var param = '';//这里使用stringify方法将js对象格式化为json字符串if(JSON.stringify(data) != '{}'){url += '?';for(var i in data){param += i+'='+data[i]+'&';   //将js对象重组，拼接成url参数存入param变量中}//使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符//slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。param = param.slice(0,param.length-1);  }//判断method是否为getif(method == "get"){//是则将数据拼接在url后面url = url+param;}//初始化请求xhr.open(method,url,true);//如果method == postif(method == "post"){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//发送请求xhr.send(param);}else{//发送请求xhr.send(null);}}

封装好了我们自己的ajax函数后，我们就来使用这个函数发起一个请求吧

<!doctype html>
<html><head><meta charset="UTF-8"><title>Ajax</title></head><body><input type="button" id="getContent" value="点我获取内容" /><div id="container">点击上面的按钮，我会变哦</div></body><script>//获取元素var getContent = document.getElementById("getContent");var container = document.getElementById("container");var user_info = document.getElementById("user_info");//给元素添加单击事件处理函数getContent.onclick = function (){//使用自己封装的ajax函数发送一个post请求myAjax('post','ajax01.php',{name:'张三',age:16},function(res){console.log(res);container.innerHTML = res.name;},'json');};</script>
</html>

效果如下图：

这里我们封装好的ajax函数就能正常使用了，比使用原生js要写那么多代码方便多了，现在我们只要简单的调用这个ajax函数就可以方便的发送请求了

封装一个自己的通用Ajax相关推荐

封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
php发送邮件封装类,使用nette/mail 封装一个发送邮件类 (通用)
使用nette/mail 封装一个发送邮件类 (通用) 使用到的包 composer require nette/mail 封装Mail体 /** * Created by PhpStorm. * U ...
类似ajax封装函数,JS 封装一个async式的AJAX函数
其实也没什么,就是用上ES7的异步函数,让ajax使用起来更方便.这个方便主要是体现在:无回调 & 无then链式 & 轻松收集异常. 大致分3步: 1.封装API类(这步不用异步函数 ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
拒绝无用功，封装一个通用的PopupWindow
作者: 夏至,欢迎转载,但请保留这段申明,谢谢 https://juejin.im/post/5961e03e51882568b13c3308 为了避免重复造轮子,我们一般都会封装一个通用的控件,比如 ...
拒绝无用功，封装一个通用的 PopupWindow
https://juejin.im/post/5961e03e51882568b13c3308 为了避免重复造轮子,我们一般都会封装一个通用的控件,比如这次,项目中需要用到比较多的 popupwind ...
使用原生JS封装一个Ajax
原生的Ajax写起来比较麻烦,而且每次使用的时候都得从头开始写,导致了很多不必要的工作量,产生了大量的冗余代码.这里就可以封装一个Ajax,以供以后的开发中进行使用. 首先,要想封装一个Ajax,就得 ...
axios框架里面如何使用get,post,通用ajax方法请求。
回到文章总目录本篇文章介绍的内容为axios框架里面如何使用get,post,通用ajax方法请求. axios是目前前端ajax中最热门的工具库,是vue和react官方推荐的ajax工具包作用 ...

封装一个自己的通用Ajax

一个简单的Ajax请求

封装自己的通用Ajax函数

封装一个自己的通用Ajax相关推荐

最新文章

热门文章