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
