AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
Ajax请求有两种 get请求和post请求。
get / post 不是对立的,他俩是可以共存的。
很多人都喜欢说 post请求比get 请求更安全。但是在前端根本没有安全性可言,get,post请求转化后都是?ie=utf-8&f=8&的形式。get请求我们看见我们请求的信息出现在地址栏中,觉得很不安全。post请求虽然没显示在页面中但是也可以在前端获取到。只是用户体验不同而已。对于前端来说是用户体验是第1位。
下面我们来封装ajax
ajax5步执行:
0 初始化 -- 刚创建这个对象 new ()下面
1 已连接 open 下面
2 已送达 我们发的东西送过去了
3 已接收 header 认为 3就可以结束 也是OK的
4 已接收 body
2、状态码的含义:
(1)1xx (消息)不需要反馈 websocket
(2)2xx 成功
(3)3xx 重定向 。什么是重定向呢?例如, 儿时朋友 你去他家找他, 他家人住的人变了(你不认识了) 他告诉你 他搬到那那那了,你去那个地方找他。
(4)301 永久重定向 ( 基本不会这么用 )
比如 浏览器已经记住了 你就应该访问 https://www.baidu.com
(5)302 临时重定向 (99%使用)
http://baidu.com ====> https://www.baidu.com
(6)304 缓存(服务器 和 客户端之间的关系)
告诉你本地缓存已经有了数据,服务端就不会再发一次,让你去本地获取
(7)4xx 客户端报错 404没找到
(8)5xx 服务端的错误 =====>(503) 服务器过载了 服务器不可用
(9)6xx 扩展( 自己可以去添加 )
为什么状态码都是数字呢?因为只有数字才是世界通用的呀!
function ajax(options){
options=options||{};
options.type=options.type||'get';
options.data=options.data||{};
options.dataType=options.dataType||'text';
//不兼容IE6
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
//xhr=new ActiveXObject("Microsoft.XMLHTTP");
// 1.初始化
let xhr=new XMLHttpRequest();
//数据组装
let arr=[];
for(let name in options.data){
arr.push(`${encodeURIComponent(name)}=${enc odeURIComponent(options.data[name])}`);
}
let strData=arr.join('&');
// 判断是post请求还是get请求
if(options.type=='post'){
//2.连接 open的参数1:发送请求的类型 参数2:路径
// 参数3:同步还是异步(true)(版本高的浏览器禁止同步)
xhr.open('POST', options.url, true);
// 设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 3.发送请求
xhr.send(strData);
}else{
// get请求参数2需要拼接?
xhr.open('GET', options.url+'?'+strData, true);
// 发送请求
xhr.send();
}
//接收
xhr.onreadystatechange=function (){
//4--执行到第4步了 已经接受到请求
if(xhr.readyState==4){
//成功——2xx、304
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
let data=xhr.responseText;
switch(options.dataType){
case 'json':
// 兼容问题
if(window.JSON && JSON.parse){
//字符串转json
data=JSON.parse(data);
}else{
// 浏览器版本低 eval
// 不安全 ==> ( 语法要求 )
data=eval('('+str+')');
}
break;
case 'xml':
data=xhr.responseXML;
break;
}
options.success && options.success(data);
}else{
options.error && options.error();
}
}
};
}
网友评论