AJAX

AJAX

• 定义
  Asynchronous JavaScript and XML（异步JS和XML）
  一系列web技术的集合

• 集合

• 使用CSS和XHTML来标准化呈现。

• 使用DOM模型来交互和动态显示。

• 使用XML 与 XSLT进行数据互换和操作技术，

• 使用 XMLHttpRequest 来和服务器进行异步通信。（核心接口）（JS对象）

• 使用javascript来绑定和调用。

• 作用
  在浏览器和Web服务器之间使用异步数据传输
  向服务器获取新数据不需要刷新页面等待，提升用户体验

• 方法
  .onreadystatechange 给对象绑定函数，请求成功时执行
  OPEN xhr.open('请求类型 get/post' , '请求路径 URL' ,是否异步true/false)TIP↓
  GET&POST
  get方式
  1比post方式简单速度更快，但是向服务器传送的数据不能大于2k；
  2向服务器提交的数据会显示在浏览器的url地址上，安全性较差；
  结论：做数据查询时，建议用Get方式
  post方式
  传送数据量大，安全性高一般用于以下几种情况：
  1.无法使用缓存文件（更新服务器上的文件或数据库）
  2.向服务器发送大量数据（POST 没有数据量限制）
  3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
  4.在做数据添加、修改或删除时，建议用Post方式
  URL
  1.相对于当前页面的路径，也可以使用绝对路径，
  2.该文件可以是任何类型的文件，如.txt .xml，或脚本文件如 .asp .php;
  3.只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。
  .setRequestHeader(请求头 名,请求头 值)设置自定义的请求Header信息
  SEND xhr.send(null（用于get） / string（用于post）); 例↓
  不带数据发送
  var xhr = XMLHttprequest();
  1→ xhr.open('GET','xxx.php',true); -------->get方式 or
  2→ xhr.open('POST','xxx.php',true);-------->post方式
  xhr.send();

  带数据发送
     get方式↓
       将要发送的数据变成url地址添加到.open()方法的参数中，格式：
       url = "发送地址" + "?数据名=" + 数据值 + "&数据名=" + 数据值; 
  
       <input type="text" name="username">
       <input type="password" name="password">
       var username = document.getElementsByName('username')[0].value;
       var password = document.getElementsByName('password')[0].value;
       var url = "xxx.php"+"?username="+username+"&password="+password; 
       var xhr = new XMLHttpRequest(); 
       xhr.open("GET",url,true); 
       xhr.send();
  
     post方式↓
       send(string代表post方式向服务器发送的数据)。
       需要使用 setRequestHeader() 来添加 HTTP Header信息。
  
       var xhr = new XMLHttpRequest();
       xhr.open("POST","xxx.php",true);
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xhr.send("name=Alex&age=16");
  

• 属性
  responseText将响应信息 作为字符串返回。
  responseXML将响应信息 格式化为Xml Document对象并返回
  status ↓返回服务器状态码 200 404↓
  statusText状态码对应情况 OK Not Found
  readyState请求状态 0 1 2 3下载中 4下载完成

• 步骤
  1 创建一个XMLHttpRequest对象
  2 给这个XMLHttpRequest对象绑定一个监听器，当请求成功后，执行操作。
  3 设置请求参数，包括get/post方式，url地址，是否异步。

  var xmlhttp=new XMLHttpRequest();             ----------->步骤1 创建对象
  xmlhttp.onreadystatechange=function () {  --------------->步骤2 绑定事件
  
    if(xmlhttp.readyState==4 && xmlhttp.status==200){  // 如果请求状态ok，数据下载完毕
                                         ------------------->步骤3 执行操作
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                                     --------->//得到非XML响应信息，作为字符串返回
    xmlDoc=xmlhttp.responseXML; 
    txt="";        --------------------------->//得到非XML响应信息，解析响应 
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i<x.length;i++){
       txt=txt + x[i].childNodes[0].nodeValue + "<br />";
    }
    document.getElementById("myDiv").innerHTML=txt;
    }  
  }    
  xmlhttp.open("get","page.json");-------------------->步骤4 设置请求参数，准备发送
  xmlhttp.send();------------------------------------->步骤5 发送请求
  

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击

• 方案1 设置开关
  var lock =false; 初始状态是 关
  ele.addEventListener('click',function(){ 给lock绑定点击事件
  if(!lock){
  lock = true; 点击lock后状态是 开
  ajax(); 等待AXJX执行完毕
  lock = false; 关闭lock
  }
  });

• 方案2 禁用按钮
  btn.addEventListener('click',function(){
  this.disabled=true; 使用button的disabled属性
  ajax(); 等待AXJX执行完毕
  setTimeout(this.disabled=false,0); 延时打开按钮
  });

• 3.限制一定的时间内重复提交
  var oBtn=document.querySelector(".button");
  var clockTime=null;
  oBtn.addEventListener("click",function(){
  if(clockTime){
  clearTimeout(clockTime)
  }
  clockTime=setTimeout(function(){
  console.log()
  },5000) //5000毫秒内提交一次 重复点击重新计时
  })

前后端开发联调

• 开发之前双方定好接口
• 约定好页面需要的数据和数据类型
• 约定接口的名称、请求的参数、响应的格式
• 前端通过mock方法搭建本地服务器，模拟后台数据实现数据交互效果
  • 使用server-mock或mock.js搭建模拟服务器，进行模拟测试
  • 使用XAMPP等工具，编写PHP文件进行测试
• 后端发给前端数据之前做好本地测试
  demo 1

Tip

如何mock(写给负基础同学如我)

1 安装自带npm的node what?
1.1 下载 这个就行
1.2 安装一路next
1.3 配置环境变量 how
1.3 完成 右键+shift => 此处打开命令行窗口 ok
1.4 测试 node -v/返回版本号 => nmp -v/返回版本号ok

2 安装mock-server what?
npm install -g server-mock