Ajax
介绍
- 是一个异步无刷新技术.能够请求后台发送和获取数据,而无需卸载页面(刷新页面)
核心对象
1. XMLHttpRequest对象
1. var xhr=new XMLHttpRequest()
2. 在使用XHR对象时,先必须调用open()方法,它接受三个参数:要发送的 请求类型(get,post),请求的url和表示是否异步. open()方法并不会真正发送请求,而只是启动一个请求已备发送.
3. 通过send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据.如果不需要(get请求不需要)则,必须填null.执行send()方法之后,请求就会发送数据到服务器上.
Ajax同步请求步骤
1. 得到XMLHttpRequest对象
1. new XMLHttpRequest()
2. 准备请求 open(请求类型get/post,请求的url,是否异步)
1. xhr.open(请求类型get/post,请求的url,是否异步);
3. 发送请求send([参数])
1. xhr.send([参数])
1. 如果是get请求,请求的参数设置在url的后面,使用send(null).
2. 如果是post请求,无参数设置为null,有参数则设置参数即可
4. 判断响应状态,得到后台响应回来的数据,使用responseText接受
1. xhr.responseText;
//1.得到XMLHttpRequest();
var xhr=new XMLHttpRequest();
//2.准备请求 open(请求类型get/post,请求的url,是否异步)
//get请求方式要将参数拼接在url后面,用?号开头
xhr.open("get","js/data.json?uname=zs",false);
//3.发送请求 send([参数])
xhr.send(null);
//4.判断响应状态,得到后台响应数值后进行接受后台传递参数(xhr.responseText)或返回错误信息
if(xhr.status==200){
var responseTxt = xhr.responseText;
console.log(responseTxt);
}else{
alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
}
Ajax异步(post)
1. 得到XMLHttpRequest对象
1. new XMLHttpRequest()
2. 准备请求 open(请求类型get/post,请求的URL,是否异步)
1. xhr.open(请求类型get/post,请求的URL,是否异步);
3. 模拟表单提交
1. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2. get请求的方式和post对服务器的请求方式不同,然后服务器解析参数的方式不同,所以,在进行post请求的时候,需要模拟表单提交,来让服务器进行数据解析;
4. 发送请求 send(参数)
1. xhr.send([参数])
1. xhr.send([参数])
1. 如果是GET请求，请求的参数设置在url的后面，所以send(null)
2. 如果是POST请求，无参数设置为null，有参数则设置参数即可
5. 判断响应状态,得到后台响应
1. xhr.responseText
7. 同步调用固然简单,但使用异步调用才是我们真正常用的手段.
1. 使用异步调用的时候,检测readyState属性,每当readyState属性改变时,触发readystatechange时间
2. readystatechange五个值
1. 值 状态 说明
2. 0 未初始化 未调用open()方法
3. 1 启动 已经调用open()方法,但尚未调用send()方法
4. 2 发送 已经调用 send()方法，但尚未接受响应
5. 3 接受 已经接受到部分响应数据
6. 4 完成 已经接受到全部响应数据，而且可以使用
```javascript
//1.得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.准备请求 open(请求类型GET/POST,请求的URL,是否异步)
xhr.open("POST","js/data.json",true); // 异步请求
//3.模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//4.发送请求 send(参数)
//xhr.send("uname=zhangsan&upwd=123456"); // Post请求有参数，则设置
xhr.send(null);//无参数,就选择null
//5.判断响应状态，得到后台响应得到后台响应 xhr.responseText;
//如果是异步请求，需要先知道数据是否完全响应
// 监听readyState的值的变化
xhr.onreadystatechange=function(){
//判断是否完全响应,即readyState的值等于4
if(xhr.readyState==4){
if(xhr.status==200){
var responseTxt = xhr.responseText;
}else{
alert("状态码：" + xhr.status + "，错误信息：" + xhr.responseText);
}
}
```
简单封装Ajax
1. 得到XMLHttpRequest对象
1. new XMLHttpRequest()
2. 打开请求 open(请求类型GET/POST,请求的URL,是否异步) 注：三个参数都是由调用者传递
1. 注：判断如果是POST请求，请求路径直接设置即可；如果是GET请求，需要拼接请求参数；
3. 发送请求 send([参数])
1. xhr.send([参数])
1. 如果是GET请求，请求的参数设置在url的后面，所以send(null)
2. 如果是POST请求，无参数设置为null，有参数则设置参数即可
4. 判断响应状态，得到后台响应
1. xhr.responseText;
5. 判断是否是异步请求，如果是同步则直接获取响应数据；如果是异步，则需要先判断数据是否完全响应（readyState==4），再获取响应数据
/**
* 将对象格式的参数转换成字符串
* 格式化参数
* data:
* uname:"zhangsan",
* upwd:"123456"
* }
* ----> uname=zhangsan&upwd=123456
*/
function formatParam(data){
var arr=[ ];
for(var key in data){
var str=key+"="+data[key];
//将数组追加到数组中
}
//将数组转换成字符串
var patams=arr.join("&");
return patams;
}
//1.得到XMLHttpRequest对象
function ajax(obj){
//1.得到XMLHttpRequest对象
var xhr=new XMLHttpRequest( );
//格式化参数
obj.data=formatParam(obj.data);
//判断是否为get请求
if(obj.type.toUpperCase()=="GET"){
//在地址栏后面拼接参数
obj.url+=(obj.url).indexOf("?")>-1 ? "&"+obj.data:"?"+obj.data;
}
//open打开请求
xhr.open(obj.type,obj.url,obj.async);
//3.发送请求, 判断是否为post请求
if(obj.type.toUpperCase()=="POST"){
//模拟表单提交,因为请求服务器的方式不同,服务器对不同请求方式传来的参数处理方式也不同
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xhr.send(obj.data);
}else{
//否则就是get请求
xhr.send();
}
//4.判断如果是post请求,就判断响应状态,得到后台响应状态,判断是否接受传送回来的结果
if(obj.type.toUpperCase()=="POST"){
//如果是异步请求,需要先知道数据是否完全响应
//监听readyState的值的变化
xhr.onreadystatechange=function(){
//判断是否完全响应,即eradState的值等于4
if(xhr.readyState==4){
callback();
}
}
}else{
//get请求直接进入响应结果
callback();
}
//完全响应后处理响应结果
function callback(){
if(xhr.status==200){
var responseTxt=xhr.responseText;
//调用成功,将数据传递值回调函数作为参数
obj.success(responseTxt);
}else{
//调用失败的话,返回的回调函数
obj.error("状态码:"+xhr.status+",错误信息:"+xhr.responseText);
}
}
}
小知识
1. 但send()方法进行发送请求,send()方法接受一个参数,作为请求主题发送的数据,如果不需要则,必须填null.执行send()方法之后,请求就会发送到服务器上
1. 当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性.
1. 属性名 说明
2. responseText 作为响应主体被返回的文本
3. responseXML 如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的 XML DOM 文档
4. status 响应的HTTP状态
5. statusText HTTP状态的说明
1. HTTP状态码 状态字符串 说明
2. 200 OK 服务器成功返回了页面
3. 400 Bad Request 语法错误导致服务器不识别
4. 401 Unauthorized 请求需要用户认证
5. 404 Not found 指定的 URL 在服务器上找不到
6. 500 Internal Server Error 服务器遇到意外错误，无法完成请求
7. 503 ServiceUnavailable 服务器过载或维护导致无法完成请求
2. get方法与post方法
1. get方法
1. 使用get方法的优点和缺点
2. 由于get方法发送的数据显示在url中,因此可以使用特定查询字符串值为页面添加书签
3. get方法不适合传递用户名和密码等敏感信息,因为这些信息在url查询字符串中完全可见,并且可能作为访问页储存在客户端浏览器的内存中
4. 由于get方法将数据分配给服务器环境变量,因此url的长度是有限的,因此,要发送的总数据存在限制
2. post方法
1. post方法中,数据作为包在与处理脚本的单独通信中发送到服务器;通过post方法发送的数据在url中可见.
2. post方法适用于可以传递大量信息的情况.当服务器通过采用post的表单接收请求时,它在对url进行请求之后立即传输表单输入的所有相关信息
3. 优缺点
4. 它比get更安全,因为用户输入的信息在URL查询字符串或服务器日志中永远不可见
5. 可以传递的数据量有一个更大的限制,一个人可以使用post发送文本数据和二进制数据(上传文件).
6. 由于post方法发送的数据在url中不可见,因此无法使用特定查询为页面添加书签
3. get和post方法的区别
1. 发送数据数量
1. 在get中,只能发送有限数量的数据,因为数据是在url中发送的
2. 在post中,可以发送大量的数据,因为数据是在正文主体中发送的
2. 安全性
1. get方法发送的数据不受保护,因为数据在url栏中公开,这增加了漏洞和黑客攻击的风险
2. post方法发送的数据时安全的,因为数据未在url栏中公开,还可以在其中使用多种编码技术,这使其具有弹性.
3. 加入书签中
1. get查询的结果可以加入书签中,因为它以url的形式存在;而post查询的结果无法加入书签中.
4. 编码
1. 在表单中使用get方法时,数据类型中只接受ascll字符
2. 在表单提交时,post方法不绑定表单数据类型,并允许二进制和ascll字符
5. 可变大小
1. get方法中的可变大小约为2000个字符,而,post方法最多允许8mb的可变大小
6. 缓存
1. get方法的数据时可缓存的,而post方法的数据时无法缓存的
7. 主要作用
1. get方法主要用于获取信息.而post方法主要用于更新数据.
3599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
