Ajax
- 即Asynchronous Javascript And XML(异步JavaScript和XML)，
- 是一种js常用与异步通信的技术。也是指一种创建交互式网页应用的网页开发技术。（也可以做同步通信，对讲机）
异步通信，依赖服务器，发请求出去，前端不受通信流程影响
同步异步
- 同步：指的是事件按先后顺序依次进行，步骤之间存在依赖关系，不能颠倒，如，买菜，洗菜，切菜，烧菜
- 异步：典型场景：烧水，听歌，玩手机，事件彼此 之间可以同时进行，事件并不被其他事件干扰或等待，事件之间不管谁先结束，烧水，看报纸，喝茶
- 通信步骤
- 准备信纸————创建通信对象
var xhr = new XMLHttpRequest();
- 在早期IE版本中，使用ActiveXObject创建对象
- 写信————通信初始化
xhr.open("get","data.json",true);
- 送信发信————发送
xhr.send();
- 收到回信————监听
xhr.onreadystatechange =function(){
if(readyState ==4){
console.log(xhr.responseText);
}
}
- 读信————取值
异步通信，依赖服务器，发请求出去，前端不受通信流程影响
ajax的详细通信步骤，ajax通信，大量的通用方法
- 创建通信对象 使用XMLHttpRequest实例，通常变量都用xhr名字
var xhr = new XMLHttpRequest(); //new+构造函数创建对象
- 初始化通信对象（发到哪里，怎么发,发给谁），使用open函数,open接收三个参数，第一个是通信类型get/post，第二个参数url请求地址，第三个参数，同步或异步，默认为true，表示异步。
xhr.open("get","data.json",true);
- 发送请求，使用send函数，从这里开始，表现异步,等下面的监听完成后，send才结束，会返回2
xhr.send();
console.log(111);
xhr.onreadystatechange = function(){
//拿到数据
if(xhr.readyState ==4){
if(xhr.readyState ==4 || xhr.readyState ==3){
console.log(xhr.responseText);
}
}
- 3的状态时，数据不大，一次接收到了，可能拿出来，可能数据未接收完整
- 4的状态一定能拿出数据
- ajax请求数据通常放在xhr对象的responseText字段中
- 使用onreadystatechange监听xhr对象readyState(注意大写)属性值0-4 ，标识整个通信过程，接收到变成3，接收完毕变成4
ajax核心通信步骤分为五部，我们可以通过跟踪通信对象readyState属性来判断通信状态和进度
- 0到1是同步
readyState属性 记录当前通信进行到什么步骤，其状态值为0-4
- 0：当通信对象创建完毕未初始化
- 1：当使用open初始化通信对象后状态为1
- 2：调用send发送请求后状态为2
- 3：开始接收返回数据 状态为3
- 4：表示数据接收完毕
- 注意：ajax可以同步，只不过同步：必须在open步骤前面监听，不然监听不到了
get和post的区别
- 报文：报文（message）是网络中交换与传输的数据单位，及站点一次性要发送的数据块。报文包含了将要发送的完整的数据信息，其长短很不一致，长度不限且可变。
- post在数据传量上，较比get要大，可以发送M级别的数据。而get只能发送k界别
- post数据在报文内部传输，较比get请求将参数拼接在url后面的方式，更安全
- get请求在处理请求时，速度会比post快，理论上快一倍
get方式传参，参数在url后以？键=值&键=值...的方式传递eg:?name=violet&age=23&sex=男
- 用按钮ajax模拟get发送请求
<form action="" method= "get">
姓名：<input type = "text" name= "name"/>
年龄：<input type = "text" name= "age"/>
性别：<input type = "text" name= "sex"/>
<input type = "submit" value= "提交"/>
<input type = "button" value= "ajax提交get"/> <!-- 用ajax传参 -->
<input type = "button" value= "ajax提交post"/>
</form>
document.querySelector("input[type =button]").onclick = function(){
//创建通信对象
var url = "data.json?",
inputs = document.querySelectorAll("input[type=text]");
for(var n= 0;n < inputs.length;n++){
url +=inputs[n].name+"="+inputs[n].value+"&";
}
//截取多余&
url = url.substr(0,url.length-1); //截掉最后一个多余的&
var xhr = new XMLHttpRequest();
//初始化通信对象
xhr.open("get",url,true);
//发送请求
xhr.send();
//输出返回值
xhr.onreadystatechange = function(){
console.log(xhr.responesText);
}
};
而post请求参数放在报文内部传递，ajax请求中post类型传参，将参数放在send函数实参形式传递
document.querySelectorAll("input[type =button]")[1].onclick = function(){
//创建通信对象
var url = "data.json",
reqDate = {}, //上送空对象
inputs = document.querySelectorAll("input[type=text]");
for(var n= 0;n < inputs.length;n++){
reqDate[inputs[n].name]=inputs[n].value;
}
var xhr = new XMLHttpRequest();
//初始化通信对象
xhr.open("post",url,true);
//发送请求 post传参 参数会被转换为string上送给后台
xhr.send(JSON.stringify(reqDate));
//输出返回值
xhr.onreadystatechange = function(){
if(xhr.readyState ==4){
var data = JSON.parse(xhr.responseText);
console.log("我叫"+data.name+"我今年"+data.age);
}
};
};
JSON 对象的使用，最主流的数据传输方式，就是JSON，多语言数据结构
- json格式字符串：通用的轻量级数据格式，解析比xml更快（轻量级）
- 四种通用格式：{"键":值} || [值,值] ||
{"键":[值，值]} || [{"键"：值,"键"：值}] - JSON.parse（）；将标准的JSON字符串转换成对象，必须内层加上双引号，外层用单引号
console.log(JSON.parse('{"name":"tom","age":28}')); //输出对象
- JSON.stringify（）将js对象转换成JSON字符串
console.log(JSON.stringify({"name":"tom","age":28})); //输出字符串{"name":"tom","age":28}
- 一个对象转化成字符串长度是15
- .json文件中不能加注释，否则报语法错误
- encodeURIComponent（转码） 和 decodeURIComponent（变成中文）
- utf-8,数字表示用几位来表示中文，4位都不支持中文
- utf-16，数字表示用16位表示一个字符
ajax封装
- ajax请求函数
- @param：type 请求方式
- @param：url 请求地址
- @param：isAnsy 是否异步
- @param：sendData 上送数据 {key：value}
- @param:callback 返回数据，它的参数就是返回值
function postReq (type, url, isAnsy,sendData,callback){
// 创建通讯对象
var xhr = createXHr();
// 根据请求方式处理上送数据
if(type.toLowerCase() == "get"){
// 将对象性数据转换为queryString结构
url += "?";
for(var n in sendData){
url += n +"=" + sendData[n] + "&";
}
// 截取末尾多余&
url = url.substr(0,url.length-1);
// 设置sendDate为空null
sendDate = null;
}else{
// 将js对象类型数据转化为json格式的字符串
sendData = JSON.stringify(sendData);
}
// 初始化通信对象
xhr.open(type,url,isAnsy);
// 发送请求
xhr.send(sendData);
// 监听请求返回状态
xhr.onreadystatechange = function(){
// xhr对象status属性用于描述http通信状态 statusText 是对status的描述信息
if(xhr.status == 200 || xhr.status == 304 || (xhr.status>200 && xhr.status<300)){
// console.log(xhr);
if(xhr.readyState == 4){
var resData = JSON.parse(xhr.responseText);
callback && callback(resData);
}
}
}
}
try{
console.log(abc); //可能出现异常的代码
}catch(e){
console.log(e); //异常事件处理 //异常出现时执行的代码
}finally{
console.log(33); //无论是都会出现异常都要执行的代码
}
console.log("aaaa"); //无论try中是否出现异常都不会影响后续代码执行
// 创建一个兼容的xhr创建函数
function createXHr(){
绝大部分浏览器支持XMLHttpRequest
if (typeof XMLHttpRequest == "function"){
return new new XMLHttpRequest();
}else{
var strList = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp", "Microsoft.XMLHTTP" //ie6];
// 循环尝试创建xhr对象
for(var n = 0; n < strList.length; n++){
// 使用try catch 防止错误参数
try{
var xhr = new ActiveXObject(strList[n]);
// 返回xhr对象
return xhr;
}catch(e){
console.log(e);
}
}
}
}
html加载自上向下，自外向内优先级比自上向下高，
加载就是标签节点，并不是
ajax的数据返回，如果要用数据有两种方法：
第一种：直接将所有的东西放到请求数据函数里面
第二种：声明全局变量，比如班级全局变量，数据全局变量，在请求函数里面赋值
