本章节，咱就来了解了解ajax的几种请求方式。
form---get/post
get
<body>
<!--method属性表示表单提交方法 action处理表单的服务器程序-->
<form action="08formGET.php" method="get">
<label>请输入姓名
<input type="text" name="userName" id="">
</label><br/>
<label>请输入姓学号
<input type="text" name="xuehao" id="">
</label><br/>
<label>请输入电话号码
<input type="text" name="tel" id="">
</label><br/>
<label>请输入年龄
<input type="text" name="age" id="">
</label><br/>
<input type="submit" value="提交" />
</form>
</body>我们可以看到 action表示处理该表单的网络请求地址，method表示表单提交方式，这里展现的是get请求。结合之前的php相关知识，我们可以通过该表单的get请求，将数据存储到本地数据库中，下面是08formGET.php的相关实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<?php
// 获取用户提交的表单数据
$userName = $_GET["userName"];
$xuehao = $_GET["xuehao"];
$tel = $_GET["tel"];
$age = $_GET["age"];
// 连接数据库
//1.建立连接
$connect=mysql_connect('localhost','root','123456');
// 2 选择链接的数据库
mysql_select_db("alongshujuku",$connect);
// 3 更改数据操作字符集
mysql_query("SET NAMES UTF8 ");
// 4 执行SQL语句
$result = mysql_query("INSERT INTO
student(xingming,xuehao,tel,age) VALUES('{$userName}','{$xuehao}','{$tel}',{$age})");
if($result==1) {
echo "插入成功";
} else {
echo "插入数据失败，请联系管理员";
}
//5.关闭连接
mysql_close($connect);
?>
</body>
</html>post
<body>
<!--method属性表示表单提交方法 action处理表单的服务器程序-->
<form action="10formPOST.php" method="post">
<label>请输入姓名
<input type="text" name="userName" id="">
</label><br/>
<label>请输入电话号码
<input type="text" name="tel" id="">
</label><br/>
<label>请输入年龄
<input type="text" name="age" id="">
</label><br/>
<input type="submit" value="提交" />
</form>
</body>所以form既可以使用get请求，又可以使用post请求，主要区别在于method的值，下面是用php来接收post的数据，并且显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<?php
$userName = $_POST["userName"];
$tel = $_POST["tel"];
$age = $_POST["age"];
echo $userName;
echo $tel;
?>
</body>
</html>ajax请求
先上代码
// 发ajax请求
// S1 创建xhr对象
var xhr;
if(Window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// S2 这个事件在xhr对象就绪状态改变时候触发
xhr.onreadystatechange = function() {
if(xhr.readyState==4&&xhr.status==200) {
// 接受文件完毕后要做的事情
div1.innerHTML = xhr.responseText;
}
}
// S3
xhr.open("get","data/1.txt",true);
// S4
xhr.send(null); 我们看到，在使用ajax的时候，我们使用了能力检测去兼容，因为低版本的浏览器没有XMLHttpRequest()方法。
首先，我们需要创建一个XMLHTTP的请求对象，也就是xhr。
接着，去监听xhr的onreadystatechange方法，该方法主要是来监听当前请求的状态和结果,每当readyState发生变化的时候，就会调用该方法。
xhr一共有三个值需要注意的是 readyState state responseText
xhr.readyState一共有5个值
0：服务器未初始化
1：服务器已建立连接
2：请求已接收
3：请求处理中
4：请求已完成
xhr.state有很多值表示http状态响应码，所以我们这里只对200也就值请求成功状态进行监听。
xhr.responseText 表示发起请求后，服务器响应的值。
再者，调用open方法，里面只有有三个参数
第一个参数，表示请求的方式 get/post
第二个参数，表示请求的路径
第三个参数，表示是否异步请求
最后，调用send
get请求 send(null)
post请求 send("age=1&&name=haha") 填写如要传递的值
这里有人可能要问了，那如果get请求要添加传递的值，要如何添加？
如果说get请求需要传递值，那就把值拼接到请求地址后面，如xhr.send("get","nihao/nihao.php?name=111&age=23",true);
讲好了ajax的基本使用，下面我们来讲讲ajax的实际应用
ajax&get
<body>
<button id="btn">单击异步获取文件</button>
<script>
// 得到元素
var btn = document.getElementById("btn");
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState==4) {
console.log(xhr.responseText);
}
}
var get_data = "hahaha";
xhr.open("get","data/1.txt?name="+get_data,true);
xhr.send(null);
}
</script>
</body>
</html> 需要注意的是，若请求数据带有中文，后端接受的时候会出现乱码也就是会显示成16进制，使用需要encodeURIComponent方法将请求地址当成URL，避免其转化成16进制，如下
xhr.open("get","data/1.txt?name="+encodeURIComponent(get_data),true);ajax&post
var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// S2 这个事件在xhr对象就绪状态改变时候触发
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if(xhr.readyState==4) {
// 接受文件完毕后要做的事情
div1.innerHTML = xhr.responseText;
}
}
console.log(xhr.readyState); // 0 open()未调用之前的
// S3
xhr.open("post","php/do2.php",true);
console.log(xhr.readyState); // 1 open()被调用
// 假如用post请求，必须写一句 模拟成表单处理
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// S4 "k=v&k=v&k=v"
xhr.send("age=18&name=zhangsan"); post和get请求最大的差别就是send和setRequestHeader。
post需要添加请求头，在send的时候需要填写需要传递的值。
ajax的封装
接下来我们对ajax进行封装，需要注意的就是先要区分请求是post还是get，接着讲讲传入json对象形式的数据，转成&连接的字符串，最后在去请求数据。
get
新建一个js，将所有的方法放在IIFE当中，为了便于调用我们创建了一个myajax对象，给他编写get和post方法，将对象传到window也就是全局对象中去。
myajax.get = function(URL,queryJSON,callback) {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status>=200 && xhr.status<300 || xhr.status==304) {(注意点1)
callback(null,xhr.responseText);
} else {
callback(new Error("请求失败"),undefined);(注意点2)
}
}
}
// json格式转成"k=v&k=v"
var querystring = myajax.queryjson2querystring(queryJSON);(注意点3)
xhr.open("get",URL+"?"+querystring,true);
xhr.send(null);
}结果很明显，如要传入请求地址，json结果的数据，回调，下面我们来看看三个注意点
注意点1
我们判断请求成功的条件多了一个304,304的状态表示自上一次请求之后，请求的网页没有修改过则返回304，这也可以认为试一次请求成功。若要避免304，我们可以在请求头里添加个随机的变量并且附上随机的值即可。
注意点2
当然在请求完之后，我们需要获取响应的数据，无论是成功还是失败，都需要呈现并且渲染出来，所以才callback里回传了两个参数，第一个表示异常，第二个表示成功之后的结果。
注意点3
众所周知，get请求的数据是拼接在请求地址后面的，所以我们需要将json对象解析，并拼成以&相连的字符串。
// 函数功能 json格式转成"k=v&k=v"
myajax.queryjson2querystring = function(json) {
var str = "";
for(var k in json) {
str+=(k+"="+json[k]+"&");
}
// 去掉字符串最后一个&符号
str = str.substr(0,str.length-1);
return str;
//console.log(typeof str);
}以上就是get请求的封装，post也是类似
post
myajax.post = function(URL,queryJSON,callback) {
// 创建xhr对象 解决兼容问题
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status>=200 && xhr.status<300 || xhr.status==304) {
callback(null,xhr.responseText);
} else {
callback(new Error("请求失败"),undefined);
}
}
}
// 把json格式的数据变成字符串
var querystring = myajax.queryjson2querystring(queryJSON);
// 配置
xhr.open("post",URL,true);
// 发送
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(querystring);
}同get请求的封装一样，只不过请求的数据放在send里面