Ajax的了解及其封装
Ajax是一种在无需重新加载的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
例如：微信的点赞，当我们给一个人点赞时，已经点赞过的标志即会实时的出现在此人的点赞区，并且没有整个网页更新。即可以通过ajax实现。
Ajax有两种方式请求，一种同步请求（等待请求完成再去执行），一种异步请求（请求和后续代码同时执行），我们一般默认的为异步请求。
ajax请求后台数据，是通过接口来返回数据。
原生ajax写法为5步：
1、创建对象（请求数据的对象为http，https 进行三次握手 xmlhttprequest）
var http=new XMLHttpRequest();
2、服务器的链接
http.open();
第一个参数指请求的类型 get（www.maodou.com/www/my.php?name=zhangsan） post
第二个参数 请求的路径url
第三个参数可选 同步还是异步 默认异步 true false
第四个参数 和 第五个参数 可选 用户名 密码 用户的身份验证
3、开始给服务器发送请求
http.send();
参数一般为数据 根据请求类型 可选
4、创建请求读取完成事
http.onreadystatechange=function (){
//根据读取的状态去判断
/!* http.readyState 4 请求读取完成*!/
/!*http.status 200 读取的状态是成功*!/
/!*http.response 返回结果*!/
if(http.readyState==4&&http.status==200)
{
console.log(http.response) /!* 5.渲染界面*!/
}
}
get和post两种http基本请求
get类型：
<script>
var http=new XMLHttpRequest();
http.open("get","./data/stu.txt");
http.send();
http.onreadystatechange=function (){
if(http.readyState==4&&http.status==200)
{
var data=JSON.parse(http.response);
console.log(data);
}
}
</script>
post类型：
<script>
var a=10;
var http=new XMLHttpRequest();
http.open("post","./data/stu.txt",true);
http.send();
//原生js ajax 设置同步会造成线程锁死 onreadystatechange 无法进入
http.onreadystatechange=function (){
console.log(1);
}
</script>
get和post的区别：
除此之外：
http请求方式中get和post的区别：
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍get和post的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
5.get安全性非常低，post安全性较高。
在FORM提交的时候，如果不指定Method，则默认为get请求，Form中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送，但空格转换为“+“号，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISOLatin-1）值。get请求请提交的数据放置在HTTP请求协议头中，而post提交的数据则放在实体数据中；
原生js ajax简单封装
<script>
function ajax(method, url, data, success) {
var http = new XMLHttpRequest();
if (method == "get") {
if (data) {
url += "?";
url += data;
}
http.open(method, url);
http.send();
}
else {
http.open(method, url);
if (data) {
http.send(data);
} else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
success(http.response);
}
}
}
ajax("post", "./data/stu.txt", null, showinfo);
function showinfo(data) {
var stu = JSON.parse(data);
var ul = document.createElement("ul");
for (var i = 0; i < stu.length; i++) {
var li = document.createElement("li");
li.innerHTML = "姓名：" + stu[i].name + "/年龄：" + stu[i].age + "/性别：" + stu[i].sex + "/地址：" + stu[i].add;
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>