AJAX的介绍
AJAX的get和post请求
get请求
// 前端攻城狮有一半的工作都在将数据加载到页面中
// 剩下一半的工作就是请求数据 - ajax
// ajax可同步可异步
btn.onclick = function(){
// 发送ajax请求 - 将服务器返回的数据加载出来
// 1.创建ajax对象 - 浏览器提供了一个对象用来发送ajax请求
var xhr = new XMLHttpRequest();
// ajax是在发送http请求，所以也必须使用服务器打开
// console.log(xhr);
// 2.建立一个ajax连接：xhr.open(请求方式,请求的url,是否异步);
// xhr.open("get","3-demo.php",true);
// xhr.open("get","3-demo.php",false);
xhr.open("get","3-demo.php"); // 第三个参数可省略，默认情况下是异步操作
// ajax建议使用异步操作，不建议使用同步操作，同步操作会有警告
// 4.监听ajax的状态：xhr.onreadystatechange=function(){}
xhr.onreadystatechange=function(){
// 在这里可以获取到ajax的所有的状态：xhr.readyState
// console.log(xhr.readyState);
// ajax请求完成，是状态为4的时候 - 需要判断
if(xhr.readyState==4){
// console.log("请求完成");
// 获取到响应主体：xhr.responseText
var res = xhr.responseText;
console.log(res);
document.querySelector("#box").innerText = res;
}
}
// 3.发送这个请求：xhr.send(传送请求主体)
xhr.send();
console.log(456);
// 如果是同步请求，就必须将send方法放到监听状态的后面，因为同步就是按顺序执行，先发送请求，当监听到状态的时候，已经发送成功了，所以打印的代码并没有执行 - 建议大家在写ajax的时候，先监听状态，再发送请求
}
post请求
btn.onclick = function(){
// 发送ajax的post请求
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.建立连接
xhr.open("post","3-demo.php");
// 3.监听状态
xhr.onreadystatechange = function(){
// 判断是否请求成功 - 使用状态
if(xhr.readyState === 4){
// 接收数据
var res = xhr.responseText;
console.log(res);
}
}
// 4.如果是post请求需要先设置数据格式 - 请求头 - 模拟表单提交
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 5.发送请求
xhr.send();
}
AJAX的优缺点
优点：1.ajax不需要插件 - 支持js
2.不刷新页面，用户体感比较好
3.发送http请求 - 发送部分数据 - 减轻了服务器的负担
缺点：不能后退的，对于搜索引擎的支持不太友好，爬虫爬不到
AJAX的封装
function sendAjax(obj){
// 处理是否传入了想要的数据类型
if(!obj.dataType){
obj.dataType = "json"
}
// 如果传入了，需要判断类型
if(obj.dataType!="json" && obj.dataType!="string"){
throw new Error("想要的数据类型参数不正确，只接受json或string");
}
// 判断是否传入了url
if(!obj.url){
throw new Error("请求的url不能为空");
}
// 如果传入了url - 判断是不是字符串
if(Object.prototype.toString.call(obj.url)!='[object String]'){
throw new Error("请求的url不是一个正确的url");
}
// 是否传入了请求方式
if(!obj.type){
obj.type = "get";
}
// 如果传入了请求方式
if(obj.type!="get" && obj.type!="post"){
throw new Error("请求方式的参数必须是get或post");
}
// 先判断数据是否有传
if(obj.data){
if(Object.prototype.toString.call(obj.data)=='[object String]' && obj.data.indexOf("=")!=-1){
obj.data = obj.data;
}else if(Object.prototype.toString.call(obj.data)=='[object Object]'){
var data = '';
var f = '';
for(var attr in obj.data){
data += f + attr + "=" + obj.data[attr];
f = "&";
}
obj.data = data;
}else{
throw new Error("传入的数据类型不正确，只接受字符串或对象");
}
}
// 判断请求方式是get的话，需要将数据拼接在url后面
if(obj.url=="get"){
obj.url += "?"+obj.data;
}
// 先判断是否传了
if(obj.async==undefined){ // 访问一个对象中并不存在的键，返回undefined
obj.async = true;
}
if(Object.prototype.toString.call(obj.async)!='[object Boolean]'){ // 判断这个参数的类型是不是布尔值
// 不是布尔值 - 传错了 - 抛出一个错误
throw new Error("是否异步的参数必须是一个布尔值");
}
// 判断成功函数和失败函数是否传进来
if(!obj.success){
obj.success = function(){}
}
if(!obj.error){
obj.error = function(){}
}
// 兼容创建ajax对象
var xhr;
try{
// 针对W3C标准浏览器的
xhr = new XMLHttpRequest();
}catch(e){
// 针对低版本IE的
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(obj.type,obj.url,obj.async);
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status>=200 && xhr.status<300){
res = xhr.responseText;
if(obj.dataType==="json"){
// 将json字符串转成json对象
res = JSON.parse(res);
}
obj.success(res);
}else{
obj.error()
}
}
}
if(obj.type==="post"){
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
if(obj.data){ // 有传值
xhr.send(obj.data);
return;
}
}
xhr.send();
}
AJAX的面试题
1、面试题：请描述一下ajax 的原理
ajax的步骤：
1.创建对象
2.建立连接
3.监听装填
4.发送请求 - 如果post，需要先设置请求头
2、AJAX的调用模板
sendAjax({
url:"3-demo.php", // 必须传
type:"get/post", // 可选项，默认是get
async:true/false, // 可选项，默认是true
data:"键=值&键=值", // 可以是字符串但要包含=是键值对的形式，或者是对象
data:{
键:值,
键:值
},
dataType:"json/string", // 可选项，默认是json
success:function(res){ // 成功时执行的函数
},
error:function(){ // 失败时执行的函数
}
