原生js实现Ajax的使用和封装函数
ajax定义
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。（用来向后台数据库请求获取数据的技术）
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax除了解决局部更新渲染页面的问题，解决了前后端分离的问题
为什么要前后端分离
用户的计算机中无法存储大量的数据，因此就需要将数据存储在后台数据库中，前端页面中需要使用数据的时候，就向后台数据库发送请求 获取数据 进而渲染数据显示页面ajax数据交互过程
创建对象 var ajax = new XMLHTTPRequest()
建立前后端连接 ajax.open(‘请求方式’,’url地址’,是否异步)
发送请求 ajax.send();
监听通信状态码改变 ajax.onreadystatechange = function(){
}
通信状态码 用来记录数据交互状态
0：ajax对象还没有创建出来
1：ajax对象调用了open建立了前后端之间的连接
2：ajax对象调用了send 发送了请求
3：后台服务器解析请求，分析请求中需要的数据
4：后台服务器将数据响应给前端结束（货送到门口了）
如果通信状态码为4 证明响应完成 我们就可以在前段获取响应数据了
监测响应状态码
响应状态码是 用来记录数据交互过程中是否出问题的标识
200 请求响应成功，数据来源于后台数据库
304:请求响应成功，数据来源于本地缓存
403:请求响应失败，没有权限访问
404:请求响应失败，访问地址找不到
500及以上:后端服务器问题
Ajax书写
//=====示例========书写规范===========
/打电话 发请求
//1.装电话 js中有一个内置对象 专门用来处理ajax数据交互 XMLHttpRequest
//装电话的过程 其实就是创建 这个对象
var ajax = new XMLHttpRequest();//电话
//2.连电话线 建立前端和后台之间的连接
//建立连接的方法 是 ajax对象的一个方法 open 需要三个参数 method:请求方法（get post） url地址 async是否异步（true表示异步（默认） false表示同步）
ajax.open('get','./data.txt',true);
//3.打电话 发送请求
//发送请求的方法 是ajax对象的一个方法 send
ajax.send();//请求发送成功
//当电话打通之后 服务器会自动的解析请求中需要的数据 并发货，
//前端接下来需要监听物流 如果货已经送到门口了 就要开始卸货上货了
//4.监测物流 在ajax对象中有一个事件 onreadystatechange可以监测数据响应到什么程度
//on readystate(通信状态码) change(改变)
//在数据交互的过程中 每当通信状态码改变的时候 就会触发这个事件
//通信状态码 0 1 2 3 4
ajax.onreadystatechange = function(){
//判断 如果当前通信状态码为4 我就获取数据
//ajax对象的 readyState属性就是通信状态码
if(ajax.readyState==4){
//监测在路上有没有翻车（或电话有没有打通） 监测请求和响应过程中是否出问题
//我们通过响应状态码 监测这个状态 响应状态码成功的只有200和304
//ajax对象可以通过是status属性获取到响应状态码
if(ajax.status==200 || ajax.status==304){
//响应成功 获取响应数据 响应数据就是ajax对象的responseText
console.log(ajax.responseText);//卸货
}
}
}Ajax的请求方式-get
提交数据:将要提交的数据写在url 地址后面
格式: url?属性名1=属性值&属性名2=属性值&属性名3=属性......
可以在浏览器的控制台 中network选项中查看
安全性不好:因为用户提交的数据都会显示在地址栏中，因此get不适用于登录注册页面
提交数据的量很小 大概只有4kb左右
优点:传输数据的速度比较快
//===示例=============
//提交form表单数据
//提交数据 get方法 我们将数据写在url地址后面进行提交
//url?键名1=键值&键名2=键值&键名3=键值。。。。。
var ajax = new XMLHttpRequest();//电话
ajax.open('get','./data.txt?name=gd&age=18&sex=boy',true);
ajax.send();//请求发送成功
ajax.onreadystatechange = function(){
//判断 如果当前通信状态码为4 我就获取数据
//ajax对象的 readyState属性就是通信状态码
if(ajax.readyState==4){
if(ajax.status==200 || ajax.status==304){
//响应成功 获取响应数据 响应数据就是ajax对象的responseText
console.log(ajax.responseText);//卸货
}
}
}
Ajax的请求方式-post
Post 方式发送请求需要设置请求头
Ajax对象.setRequestHeader('Content-type','application/x-www-form-urlencoded');
提交数据
将要提交的数据作为 send 方法的参数传入
ajax对象.send('键名1=键值&键名2=键值&键名3=键值..');
post请求提交的数据不会显示在地址栏中因此安全性更好，一般用来提交表单数据
提交的数据大小大概有20Mb
//========示例=================
//提交form表单数据
var ajax = new XMLHttpRequest();//电话
ajax.open('post','./data.txt',true);
//post请求需要在open之后 send之前 设置请求头 请求报文（将请求发送的数据打包）
//请求报文中包含三部分内容 请求命令行 请求头 请求主体
//设置请求头的方法： ajax对象的一个方法 setRequestHeader
ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
ajax.send('name=gd&age=18&sex=boy');//请求发送成功
ajax.onreadystatechange = function(){
//判断 如果当前通信状态码为4 我就获取数据
//ajax对象的 readyState属性就是通信状态码
if(ajax.readyState==4){
if(ajax.status==200 || ajax.status==304){
//响应成功 获取响应数据 响应数据就是ajax对象的responseText
console.log(ajax.responseText);//卸货
}
}
}Ajax操作数组数据方法
使用eval方法即可
eval的用法: eval(字符串)
eval的作用:可以将字符串中的js代码执行 如果是js数据就直接返回出来
//=====示例==============
[1,2,3,4,5,6]
ajax('./data1.txt','post','',function(res){
console.log(res,typeof res);
//如何将字符串转换为数组 eval
//res == '[1,2,3,4,5]' eval('[1,2,3,4,5,6]')
//
var res1 = eval(res);
console.log(res1); //执行成数组
})Ajax操作json数据方法
JSON.parse(json数据)
这样可以将json数据转换为js数据
//==========示例==================
{
"name":"张老三",
"age":"18"
}
ajax('./data.json','post','',function(res){
console.log(res,typeof res);
//json数据使用 JSON.parse(json数据) 将json数据转换为js的对象和数组
console.log(JSON.parse(res));
})奉送个小礼物--->ajax函数封装
//1.写入主题代码
//2.提出不确定的数据作为参数
//3.将参数代入函数中
//4.调用测试
var ajax = function (url,method,data,fn) {//请求方式和提交数据的方式不确定 url地址 提交的数据
var xhr = new XMLHttpRequest(); //电话
//判断 如果是get请求 就需要在url地址后面写入提交的数据 如果是post请求 则不用
if(method == 'get'){
xhr.open(method, url+'?'+data, true);
xhr.send(); //请求发送成功
}else if(method == 'post'){
xhr.open(method, url, true);
//如果是post 还需要设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(data); //请求发送成功
}
//获取响应数据
xhr.onreadystatechange = function () {
//判断 如果当前通信状态码为4 我就获取数据
//ajax对象的 readyState属性就是通信状态码
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
//响应成功 获取响应数据 响应数据就是ajax对象的responseText
//让外界能拿到响应数据 使用回调函数来实现
//如果响应数据成功 就调动传入的回调函数fn
fn(xhr.responseText);
}
}
}
//=============调用================
ajax('data.txt','get','',function(res){
//形参res 就会接收到 响应的数据
console.log(res);
})奉送个小礼物--->ajax函数封装2
function ajax(options){
// 1.处理默认参数
var {type,url,success,error,data,timeout} = options;
type = type || "get";
data = data || {};
timeout = timeout || 2000;
// 2.解析要发送的数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 3.根据方式，决定是否处理url
if(type == "get"){
var d = new Date();
url = url + "?" + str + "__qft=" + d.getTime();
}
// 4.开启ajax
var xhr = new XMLHttpRequest();
// 注意：open中的方式
xhr.open(type,url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 5.执行成功之前，先判断是否传入
success && success(xhr.responseText);
// 成功之后，不应有失败
error = null;
}else if(xhr.readyState == 4 && xhr.status != 200){
// 6.执行失败之前，先判断是否传入
error && error(xhr.status);
// 失败之后，不应有成功
success = null;
// 且失败不应多次执行
error = null;
}
}
// 7.如果请求超时，执行失败
setTimeout(() => {
error && error("timeout");
// 失败之后，不应有成功
success = null;
}, timeout);
// 8.最后根据type的方式，决定send的发送内容和格式
if(type == "post"){
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(str)
}else{
xhr.send()
}
}
//==========调用============
document.onclick = function(){
ajax({
// type:"get", //发送方式，可选，默认get
url:"http://localhost/ajax/data/data.php", //要请求的地址，必选
success:function(res){ //请求成功之后的函数，必选
console.log(res)
},
// data:{ //要发送的数据，可选，默认不发
// user:"admin",
// pass:13123121123
// },
// error:function(res){ //请求失败之后的函数，可选，默认不处理
// console.log(res)
// },
// timeout:10 //请求超时的时间，可选，默认2000
})
}
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634749.html
