1. 知识点
(1)XMLHttpRequest
Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)。
创建XMLHttpRequest 对象:var xhr = new XMLHttpRequest();
(2) open()
在使用 XHR 对象时,先必须调用 open()方法,它接受三个参数:要发送的
请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正
发送请求,而只是启动一个请求以备发送。
(3)send()
通过 send()方法进行发送请求,send()方法接受一个参数,作为请求主体
发送的数据。如果不需要必须填 null。执行 send()方法之后,请求就会发
送到服务器上。
(4)响应
当请求发送到服务器端,收到响应后,响应的数据会自动填充 XHR 对象的属
性。那么一共有四个属性:
属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml",
则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明
(5)status
接受响应之后,第一步检查 status 属性,以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200 作为成功的标志。
(6)readyState
使用异步调用的时候,检测 readyState 属性,每当 readyState 属性改变时,触发
readystatechange 事件。这个属性有五个值:
值 状态 说明
0 未初始化 尚未调用 open()方法
1 启动 已经调用 open()方法,但尚未调用 send()方法
2 发送 已经调用 send()方法,但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据,而且可以使用
(7)GET
GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。
(8)POST
POST 请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是
使用的 POST 传输方式。
(9)同步
提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。
一心一意,当前只能做一件事,其他事情必须等当前的事情完成,才能继续后面的事情。
(10)异步
请求通过事件触发->服务器处理(这时浏览器仍然可以做其他事情)->处理完毕 。
三心二意:同时可以做多件事情。
2.Ajax的实现
1、创建XMLHttpRequest核心对象
var xhr = new XMLHttpRequest();
2、准备请求/打开请求
xhr.open(); open有参数参数:
(1)请求类型 (GET/POST)
(2)请求的路径 (请求的地址;如果是GET请求后面通过"?"拼接参数)
(3)是否异步 (true或false;默认是异步true)
3、发送请求
xhr.send(); send有一个参数:
要传递给后台的数据
如果是GET请求,设置为null(GET请求参数在请求地址后面)
如果是POST请求,无参数时设置为null;有参数时设置参数
例如uname=zhangsan&upwd=123
(post的情况):模拟表单提交
POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urle
ncoded’)
4、判断响应结果,解析响应数据
(1)如果是同步请求
xhr.status 响应状态
xhr.responseText 响应结果
HTTP 状态码 状态字符串 说明
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的 URL 在服务器上找不到
500 Internal Server Error 服务器遇到意外错误,无法完成请求
503 ServiceUnavailable 服务器过载或维护导致无法完成请求
(2)如果是异步请求,需要知道请求是否处理完毕,处理完毕后再解析数据
监听处理请求的状态码readyState
需要绑定监听事件 onreadystatechange
判断响应状态码为4时,表示数据已经完全响应
xhr.status 响应状态
xhr.responseText 响应结果
3. 封装 Ajax
function ajax(obj){
//1.创建XMLHttpRequest核心对象
var xhr=new XMLHttpRequest();
var param=obj.data;
//将json对象格式的参数转换为指定格式的字符串
var paramArray=[];
//遍历参数对象
for(var key in param){
//拼接参数名和参数值
var pa=key+"="+param[key];
//将数据追加到数组中
parayArray.push(pa);
}
//将数组通过指定符号转换成字符串
var p=paramArray.join("&");
//得到用户请求类型
var method=obj.method;
//判断请求类型,如果是GET请求,在请求地址后面拼接请求参数
if(method.toUpperCase()=="GET"){
//判断地址中是否包含“?”
//如果有,则拼接时使用“&”;如果没有,则使用“?”
obj.url+=(obj.url).indexOf("?")>-1 ? "&"+p : "?"+p;
}
//打开请求
xhr.open(method,obj.url,obj.async);
//如果是POST请求,需要模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//POST发送请求
xhr.send(p);
}else{
//GET发送请求
xhr.send(null);
}
//判断是否是异步请求
if(obj.async){
//监听readySate的值,判断响应是否成功
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//回调
callback();
}
}
}else{//同步请求
callback();
}
//回调函数
function callback(){
//判断响应是否成功
if(xhr.status==200){
//得到响应数据,并回调数据给调用者
var result=xhr.responseText;
obj.success(result);
}
}
}
ajax({
method:"POST",
url:"js/data.json",
astnc:false,
data:{
uname:"zhangsan",
upwd:"123456"
},
success:function(){
//解析结果
alert(result);
}
});
4.Jquery 的 的 Ajax
1.$.ajax()
jquery 调用 ajax 方法
参数: type:请求方式 GET/POST
url:请求地址 url
async:是否异步,默认是 true 表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
success:请求成功时调用此函数
$.ajax({
type:"get",
url:"js/data.json",
data:{
},
dataType:"json",
success:function(result){
console.log(result);
}
});
2.$.get()
请求 json 文件,传递参数,拿到返回值
$.get("js/data.json",{},function(data){
console.log(data);
});
3.$.post()
请求 json 文件,传递参数,拿到返回值
$.post("js/data.json",{},function(data){
console.log(data);
});
4.$.getJSON
表示请求返回的数据类型是 JSON 格式的 ajax 请求
$.getJSON("js/data.txt",{},function(data){
console.log(data);
});