AJAX-基础的get&post方法
AJAX
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
文章目录
- AJAX
-
- 异步请求主要步骤
- 解决事件多次响应
- 请求失败的处理
-
- http状态码
- 服务器响应
-
- 对ie的兼容
- post
- 自己封装一个ajax
异步请求主要步骤
- 创建异步对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态化
- 处理返回结果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onload = function () {
var button = document.getElementsByClassName("btn")[0];
button.onclick = function () {
//1.创建一个异步对象
var xmlhttp = new XMLHttpRequest();
//2.设置请求方式和地址
/*
三个参数
method：请求类型：GET或POST
url：文件位置
async：异步（true）或同步（false）？
*/
xmlhttp.open("GET","ajax-get.php",true);
//3.发送请求
xmlhttp.send();
//4.监听状态变化
xmlhttp.onreadystatechange = function () {
//5.处理返回结果
console.log("返回信息");
}
}
}
script>
head>
<body>
<button class="btn">提交button>
body>
html>
解决事件多次响应
实际操作中第4步会被多次执行（可能触发2-3次），因为XMLHttpRequest 有五个状态，从0->4变化，每变化一次事件被触发一次
- 请求未初始化
- 服务器连接已建立
- 请求已接收
- 请求处理中
- 请求已完成，且响应已就
为了避免多次触发，我们要判断服务器是否处于完成响应状态
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState ==4){
console.log("返回信息");
}
}
请求失败的处理
实际操作中我们发现，当请求失败时，依旧会进入状态4
我们要通过服务器的状态码来确定请求是否成功
状态码被保存在对象的status变量中
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onload = function () {
var button = document.getElementsByClassName("btn")[0];
button.onclick = function () {
//1.创建一个异步对象
var xmlhttp = new XMLHttpRequest();
//2.设置请求方式和地址
/*
三个参数
method：请求类型：GET或POST
url：文件位置
async：异步（true）或同步（false）？
*/
xmlhttp.open("GET","ajax-get.php",true);
//3.发送请求
xmlhttp.send();
//4.监听状态变化
xmlhttp.onreadystatechange = function () {
//判断服务器是否完成响应
if(xmlhttp.readyState ==4){
//判断服务器是否响应成功
if(xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status ==304){
//5.处理返回结果
console.log("返回信息");
}else{
console.log("请求失败");
}
}
}
}
}
script>
head>
<body>
<button class="btn">提交button>
body>
html>
http状态码
HTTP状态码非常多,不需要全部记住，头部数字表示了其类型
1XX:通知类
2XX:成功(304特殊也为成功)
3XX:重定向
4XX:客户端错误
5XX:服务器端错误
常见状态码
200(“OK”)
一切正常。实体主体中的文档（若存在的话）是某资源的表示。301(“Moved Permanently”)
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。304(" Not Modified")
如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。400(“Bad Request”)
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。404(“Not Found”) 和410(“Gone”)
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。409(“Conflict”)
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。
500(“Internal Server Error”)
服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
服务器响应
如需获得来自服务器的响应，
请使用 XMLHttpRequest 对象的
responseText （获得字符串形式的响应数据。）
或
responseXML 属性（获得 XML 形式的响应数据。）。
对ie的兼容
ie浏览器存在一个特性: 认为同一个url只有一个结果（至ie11仍然出现），
这导致了如果返回的数据发生过变化也只会返回第一次的结果（疑似后续请求的返回会直接调用缓存）
解决方法：禁止缓存或设置随机参数
方法一：禁止缓存
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
方法二：设置随机参数（推荐使用）
xhr.open("GET",url+"?t="+(new Date().getTime()),true);
//在提交参数中加入时间,因为时间一直在变,服务器可能并不会处理这个参数
//但每次url都不一样了
xhr.open("GET",url+"?t="++Math.random(),true);
//用随机数也可以
post
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open(“POST”,“ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
相比get方法post多出一条声明
信息不再放置于url而由send发送
自己封装一个ajax
function ajax(type,url,obj,timeout,success,error) {
//type:发送方式; url：地址； obj：参数kv； timeout：最长时间；
//success：成功返回函数；error：失败返回函数
var str = objstr(obj); //传入的字符串
var timer;
//1.创建一个异步对象
var xmlhttp = new XMLHttpRequest();
//2.设置请求方式和地址
/*
三个参数
method：请求类型：GET或POST
url：文件位置
async：异步（true）或同步（false）？
*/
if(type=="GET"){
xmlhttp.open(type,url+"?"+str,true);
//3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(type,url,true);
//3.发送请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
//4.监听状态变化
xmlhttp.onreadystatechange = function (ev) {
if(xmlhttp.readyState ==4){
clearTimeout(timer);
//5.处理返回结果
if(xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status ==304){
success(xmlhttp);
}else{
console.log("请求失败,错误代码:"+xmlhttp.status);
error(xmlhttp);
}
}
}
if(timeout){
//超时判断
timer = setTimeout(function () {
console.log("请求超时");
xmlhttp.abort(); //中断请求
clearTimeout(timer);
},timeout)
}
}
function objstr(obj) {
//用于提交密码
obj.t=new Date().getTime();
var res = [];
for(var key in obj){
res.push(key+"="+obj[key]);
}
return res.join("&");
}