我要评论一、什么是原生的Ajax？
简单来说就是 通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。
二、Ajax的优缺点？
ajax的优点：
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
5、ajax可使因特网应用程序更小、更快，更友好。
ajax的缺点：
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
三、Ajax发送请求时的流程：
１. 创建 new XMLHttpRequest 要想兼容 IE5 6 new ActiveXObject
let xhr;
if (window.XMLHttpRequest) {
xhr =new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
console.log(xhr);
2. 创建玩两个对象后有两个方法 open(method,url,async) 发送设置 和 send() 发送请求
// method---请求方式 post get put delete
// url--- 请求发送的地址
// async--- 是否是异步请求 true 异步 false同步
xhr.open('get',url,true)
//发送post请求体数据用,get 不用填写
xhr.send();
3 } readyState状态:
1、客户端初始化为0
2、与服务器建立连接，状态值为1
3、服务器接受请求，状态值为2
4、服务器处理中，状态值为3
5、处理完成 返回结果，状态值为4
4 } status状态码:
200-300之间 请求成功
300-400之间 重定向
400-500之间 请求错误!404未找到
500-600之间 服务器错误!数据库出问题!联系开发者
５.onreadystatechange 事件: 挂载到XMLHttpRequest对象上的事件
xhr.onreadystatechange = state_change;
function state_change (){
if (xhr.readyState == 4 && xhr.status == 200) {
//操作返回的数据
console.log(JSON.parse(xhr.responseText));
}
}
四 请求示例:
1.post 请求
// send()方法参数中的格式: a=1&b=2&c=3
// post请求时一定要在open()方法后加上 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') 设置请求头信息
// 目的时将请求体中的数据转换为键值对,这样后端接收到a=1&b=2&c=3这样的数据才知道这是一个post方式传来的数据
五 原生Ajax封装
var $ = (function(){
let xhr = window.XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject('microsoft.XMLHTTP');
// 如果是ie5以下的版本浏览器 报错
if (!xhr) {
throw new Error('你的浏览器不支持异步发起HTTP请求')
}
function _doAjax(option){
var option = option || {},
type = (option.type || 'GET').toUpperCase(),
async = option.async || true,
url = option.url,
data = option.data || null,
error = option.error || function(){},
success = option.success || function(){},
complete = option.complete || function(){};
if (!url) {
throw new Error('您没有填写URL')
}
xhr.open(type,url,async);
type === 'POST' && xhr.setRequestHeader('Content-type','application/x-www-urlencoded');
xhr.send(type === 'GET' ? null : fromatDatas(option.data))
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
if (xhr.status === 404) {
error(JSON.parse(xhr.responseText));
}
complete();
}
}
function fromatDatas(obj){
let str = '';
for (const key in obj) {
str += key + '=' + obj[key] + '&';
}
console.log(str);
return str
}
return {
ajax: function(opt){
_doAjax(opt)
},
post: function(url,data,success){
console.log('post');
_doAjax({
type: 'POST',
url: url,
data: data,
success: callback
})
},
get: function(type,url,success){
console.log('get');
_doAjax({
type: 'GET',
url: url,
success: callback,
})
},
}
})()
//调用
var lin = {
pageSize: 10,
start: "2020-06-01 11:11:11",
end: "2020-06-20 11:11:11",
localWxNo: "liuyunts2010",
customerWxNo: "wxid_xd9in7c86mdo21"
}
function change(){
$.ajax({
type:'POST',
url:'http://www.360myhl.com:8090/baseDevice/getWeMessageByPage',
data:lin,
success:function(data){
console.log(data);
}
});
}
本文地址：https://blog.csdn.net/weixin_44600183/article/details/107351399
您可能感兴趣的文章:
- vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents
- axios 处理 302 状态码的解决方法
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature
- react-native 在新版Xcode（10+）中运行出现的问题： node_modules/react-native/third-party/glog-0.3.4 , C compiler cannot create executables
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论