什么是ajax
简介:ajax是一种无需要加载整个网页的情况下,能够更新部分网页的技术
ajax是一种用于创建快速动态网页的技术,传统的网页(如果不使用ajax)如果需要更新内容,必须加载整个网页页面.
post和get的区别
get:请求是在地址栏上,信息不安全.传数据流量小,一般限制在2k
创建请求对象
所有现代的浏览器均支持XHttpRequest对象(ie5和ie6使用ActiveXObject)
1 // IE 7 +, Firefox,Chrome, Opera, Safari 浏览器执行代码 2 let request = new XMLHttpRequest(); 3 4 // IE6, IE5 浏览器执行代码 5 let request = new ActiveXObject('Microsoft.XMLHTTP'); 6 //兼容写法 7 8 let http = null; 9 10 if(window.XMLHttpRequest){ 11 12 http = new XMLHttpRequest(); 13 14 }else{ 15 16 http = new ActiveXObject('Microsoft.XMLHTTP'); 17 18 }
向服务器发送请求
如果需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
open(method,url,async):
method:请求的类型；GET 或 POST
url:文件在服务器上的位置
async: true（异步）或 false（同步）
send(string):
string:仅用于 POST 请求
服务器响应(onreadystatechange 事件)
当请求被发送到服务器时，我们需要执行一些基于响应的任务,每当 readyState 改变时，就会触发 onreadystatechange 事件,readyState 属性存有 XMLHttpRequest 的状态信息。
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState: (0.请求未初始化 1.服务器连接已建立 2.请求已接收 3.请求处理中 4.请求已完成，且响应已就绪)
status: (200: "OK" 404: 未找到页面)
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
let btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
loadInfo();
});
function loadInfo(){
let http = null;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject('Microsoft.XMLHTTP');
}
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(http.responseText);
}else{
console.log("请求失败了");
}
}
http.open('GET','http://www.ysqorz.top:8888/api/private/v1/rights/list');
http.send();
}
案例（post请求登录）
let btn = document.querySelector('.btn');
let username = document.querySelector(".username");
let password = document.querySelector(".psd");
let value1 = '';
let value2 = '';
btn.addEventListener('click', function(){
value1 = username.value;
value2 = password.value;
// console.log(value1);
loadInfo();
});
//请求
function loadInfo(){
let http = null;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject('Microsoft.XMLHTTP');
}
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(http.responseText);
}
}
http.open('POST','http://www.ysqorz.top:8888/api/private/v1/login');
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send('username='+value1+'&'+'password='+value2);
}
ajax请求代码封装
ajax({
url:'http://www.ysqorz.top:8888/api/private/v1/login',
type:"POST",
data:{
username:"admin",
password:123456
},
timeout:5000, //过期时间
success:function(res){
console.log(res);
},
error:function(error){
// console.log("错误信息"+error);
}
})
function ajax(obj){
obj = obj || {};
obj.type = (obj.type || "GET" ).toLowerCase(); //默认请求方式GET;
//获取请求参数
let params = formatParams(obj.data);
//请求对象的兼容
let http = null;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}else{
http = new ActiveXObject('Microsoft.XMLHTTP');
}
//发起请求
if(obj.type == "get"){
http.open('GET',obj.url+"?"+params);
http.send(null);
}else if(obj.type == "post"){
http.open('POST',obj.url);
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.send(params);
}
//超时处理
setTimeout(function(){
if(http.readyState != 4){
http.abort(); //终止请求
}
},obj.timeout);
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
obj.success && obj.success(JSON.parse(http.responseText));
}else{
obj.error && obj.error(http);
}
}
}
//格式化参数
function formatParams(objParams){
let newArr = [];
for(let name in objParams){
newArr.push(name+"="+objParams[name]);
}
return newArr.join("&");
}
这里还为总结了一下,通用ajax格式
function ajaxs(url,type,data,dataType,sCallback,fCallback){
$.ajax({
type:type,
url:url,
async:true,
contentType : "application/json; charset=utf-8",
data:data,
jsonp:'jsoncallback',
dataType:dataType,
success:function(jsondata){
sCallback && sCallback(jsondata);
},
error:function(e){
fCallback && fCallback();
}
});
}
function ajaxData(){
ajaxs('http://.....','post',jsons,'jsonp',function(data){
console.log(data);
},function(e){alert('失败'+e)});
}
ajax请求数据，返回文本格式
$.ajax({
type: "POST",
url: "请求地址",
data : {
username : '参数1'
},
dataType: "text",//请求参数的格式为json.另外还有text等
async: false,//这里默认为false，即异步请求，如果为true就是同步
success: function(data){
//成功返回信息
console.log(data);
},
error: function (message) {
//错误返回信息
}
});
ajax请求数据，返回JSON格式
//数据格式
[{"ID":0,"title":"4220"},{"ID":0,"title":"4220"}]
$.ajax({
type: "POST",
url: "请求地址",
data : {
username : '参数1'
},
contentType: "application/json; charset=utf-8",
dataType: "json",//请求参数的格式为json.另外还有text等
async: false,//这里默认为false，即异步请求，如果为true就是同步
success: function(data){
//成功返回信息
var obj = eval(data);
//注意：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
//1.在JSON格式的字符串前面拼接上 "var o ="
//2.把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式
console.log("MY:" + obj[0].title);
},
error: function (message) {
//错误返回信息
}
});
json常用的方法
JSON.parse() :
JSON 通常用于与服务端交换数据,在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
JSON.stringify():
JSON 通常用于与服务端交换数据,在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
