AJAX简介:
AJAX即异步JavaScript与XML技术,是一套综合了多项技术的浏览器端网络开发技术。
简单来说,AJAX就是使用JavaScript代码发送网络请求并处理响应,有浏览器即客户端实现。
ajax技术能够在页面不刷新的情况下,和服务器端进行交互,可以仅向服务器发送并取回必须的数据,并在客户端采用js处理响应。交换的数据大大减少,服务器的响应更加迅速,把数据处理工作放到了客户端进行,减少了web服务器的负荷。
特点:异步请求,局部刷新
异步是指:发送数据后,不等待响应,直接发送下一个数据包
AJAX书写步骤:
1、创建AJAX对象
2、设置请求路径,请求方式
3、绑定监听状态改变的处理函数,在处理函数可获取响应数据
4、发送请求
但是注意,创建ajax对象会有浏览器兼容性问题:
function createAjax() {
var ajax;
try { // 非 IE
ajax = new XMLHttpRequest();
}
catch (e) { // IE
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
return ajax;
}
响应处理与响应流程:
响应处理是服务端响应客户端的数据,根据状态码和ajax对象的状态信息进行不同的处理。
ajax对象有四个属性:
1、readyState:共5个状态,0-4,每个值代表不同的含义:
0:初始化,ajax对象还没有完成初始化
1:载入,ajax对象开始发送请求
2:载入完成,ajax对象的请求发送完成
3:解析,ajax对象开始读取服务器的响应
4:完成,ajax对系读取服务器的响应结束
2、status表示响应的HTTP状态码:
200:成功
302:重定向
404:找不到资源
500:服务端错误
3、responseText获得字符串形式的响应数据
4、rersponseXML获取XML形式的响应数据
我们可以知道,在状态改变的处理函数一般针对readyState==4且status==200的情况才处理。
利用AJAX发送get请求
前端js代码:
<script>
let obtn = document.getElementById("obtn");
let odiv = document.getElementById("odiv");
obtn.onclick = () => {
//发送ajax请求
// 1、创建 AJAX 对象;
let ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
ajax.open('GET', '/get_data');
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;
ajax.onreadystatechange = ()=>{
// 获取响应回来的数据
if(ajax.readyState===4&& ajax.status===200){
console.log(ajax.readyState);
console.log(ajax.responseText);
// 请求到数据之后,就可以把数据更新到页面上
odiv.innerHTML = ajax.responseText;
}
};
// 4、发送请求。
ajax.send()
}
</script>
服务端代码:
else if(requestUrl=== "/get_data"){ //或者写成:/get_data.*/.test(requestUrl)
response.setHeader("Content-type","text/html;charset=utf-8");
response.write("这个数据是来自服务器的...");
response.end();
}
避免缓存:
为了保证我们读取的信息都是最新的,我们要禁止他的缓存功能,解决方法如下
-
在 URL 后面加上一个随机数:Math.random()。
-
在 URL 后面加上时间搓:new Date().getTime()。
-
在使用 AJAX 发送请求前加上 ajax.setRequestHeader('Cache-Control', 'no-cache')。
ajax.open( ..... );
ajax.setRequestHeader('Cache-Control', 'no-cache');
ajax.send();
利用AJAX发送post请求
前端代码:
<script>
let obtn = document.getElementById("obtn");
let odiv = document.getElementById("odiv");
obtn.onclick = () => {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let params = `username=${username}&password=${password}`;
//发送ajax请求
// 1、创建 AJAX 对象;
let ajax = new XMLHttpRequest();
// 2、设置请求路径,请求方式等;ajax.open(请求方式,路径)
ajax.open('POST', '/login_post');
ajax.setRequestHeader("enctype","application/x-www-form-urlencoded");
// 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据;
ajax.onreadystatechange = ()=>{
// 获取响应回来的数据
if(ajax.readyState===4&& ajax.status===200){
console.log(ajax.readyState);
console.log(ajax.responseText);
// 请求到数据之后,就可以把数据更新到页面上
odiv.innerHTML = ajax.responseText;
}
};
// 4、发送请求。
ajax.send(params)
}
</script>
服务端代码:
else if(requestUrl=== "/login_post"){ //来处理css文件的请求 如果这个路径包含.css
request.on('data',(postData)=>{
let uname = postData.toString().split("&")[0].split("=")[1]; // 获取用户提交的用户名
let pwd = postData.toString().split("&")[1].split("=")[1]; // 获取用户提交的密码
if(uname===username && pwd===password){
response.end("账号密码正确,登录成功");
}else{
response.end("账号或者密码错误,登录失败");
}
});
}
ajax代码的抽取
我们知道,我们为了后期项目的维护,我们要将项目尽量模块化,所以这个ajax代码如果不能复用,那么代码量将比较大,不利于后期维护该项目,我们将ajax抽取出来成为一个文件,变成一个函数,在需要发送请求时调用即可。
function ajax(mehtod, url, param, success, time){
var ajax;
//处理ajax获取时候的兼容性问题
try { // 非 IE
ajax = new XMLHttpRequest();
}
catch (e) { // IE
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
if(method === 'get'){
param = encodeURI(param); //针对get请求的查询参数出现中文的编码处理
url = url + '?' + param;
param = null;
}
ajax.open(method, url);
if(method === 'post'){
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
ajax.onreadystatechange = function () { // onload
if(ajax.readyState == 4 && ajax.status == 200){
success(ajax.responseText);
}
}
ajax.send(param);
var timer = setTimeout(function () {
ajax.abort();
}, time);
}
在jQuery里面使用ajax:
-
async:默认设置下,所有请求均为异步请求。
-
contentType:发送信息至服务器时内容编码类型,默认为 "application/x-www-form-urlencoded"。
-
data:发送到服务器的数据,可以为对象或者 Key=value 格式字符串,若为对象则会自动转换为请求字符串格式。
-
type:默认: "GET",其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但取决浏览器支持。
-
url:发送请求的地址,默认当前页地址。
-
dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME类型就被识别为 XML,可以不填,可用值:"xml"、"html"、"script"、"json"、"jsonp"、"text"。
-
cache:默认为 true(dataType 为 script 和 jsonp 时默认为 false,设置为 false 将禁用缓存。
-
context:这个对象用于设置 AJAX 相关回调函数的上下文。也就是说,让回调函数内 this 的指向(若不指定为当前选项)。
-
beforeSend:发送请求前调用此函数,可用与如添加自定义 HTTP 头,检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。
-
success:请求成功后的回调函数,参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
-
$.ajax({ url: 'url', type: 'GET', data: {username:'zs', password:'12345'}, success: function(data){ // 请求成功业务逻辑 } });
使用jQuery发送GET请求
$.get('/get_data', {name:'nodejs', age:11}, function(data){
//请求成功的业务逻辑(成功之后的操作)
});
使用jQuery发送POST请求
$.post('url', {username:$("#username").val(), password:$("#password").val()}, function(data){
// 请求成功业务逻辑
console.log(data);
});