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的区别：
Ajax的了解及其封装
除此之外：
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>

Ajax的了解及其封装