ajax 原生js操作ajax

一、ajax

        1、什么是ajax？

        ajax是异步javascript与xml，它是多种技术一个集合。可以无刷新状态更新页面。

        2、ajax的优缺点：

优点:
    1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
    2.用户体验极佳（不刷新页面即可获取可更新的数据）；
    3.提升 Web 程序的性能（在传递数据方面做到按需放松，不必整体提交）；
    4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
缺点：
    1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
    2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）；
    3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；
    4.开发调试工具缺乏（相对于其他语言的工具集来说，JS 或 Ajax 调试开发少的可怜）

        3.同步与异步

        使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调

        同步操作：同的事情按照一定的顺序进行执行，后一件事情必须等到前一个执行完成才能执行，否则会处于等待状态。

        同一个模块中的代码是按照程序结构顺序执行的，就是后一行代码必须等待前一行代码执行完成才能执行，否则处于阻塞状态。
        异步操作:不同的事情在执行过程中，同时执行。不分前后顺序

        在程序代码执行过程中，后一行代码不会等待前一行代码执行完成再去执行，而是直接执行，表现出不同行的代码同时执行的效果。

二、实现原生js操作ajax

        1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

        2、与服务器建立连接

//建立连接
xhr.open(参数1，参数2，参数)
	//参数1：请求的方式  post  get
	//参数2：url地址
	//参数3：是否异步  布尔值，默认为true，若为false，则为同步;

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 //设置请求头信息  post方式

        3、发送请求

 xhr.send(str);

        4、监测状态变化

xhr.onreadystatechange = function () {
      //   console.log(xhr.readyState);
       //0－未初始化，即尚未调用 open。
       //1－初始化，即尚未调用 send。
       //2－发送数据，即已经调用 send。
      //3－数据传送中。
       //4－完成。

      if (xhr.readyState === 4 && xhr.status === 200) {
        // console.log(xhr.responseText); //获得字符串的响应数据
        //responseXML  //获得 XML 形式的响应数据
        var data = JSON.parse(xhr.responseText);
        console.log(data);
      }
    };

二、FormData 类型

        1、FormData主要用途

        便于表单序列化

        2、创建

var fdata = new FormData()

        3、追加数据

fdata.append(key , val)

        4、获取数据

fdata.get(key)

        5、文件上传

 <input type="file" name="file" class="myfile">

    function uploadfile(){
    var myfile = document.querySelector(".myfile");
    var fdata = new FormData()；
    fdata.append(“file" , myfile.files[0])；//把上传的图片追加到formdata里
    var xhr = new XMLHttpRequest();
    xhr.open("post" , url , true);
    //上传进度
    xhr.upload.onprogress = function(ev){
            // console.log(ev);//进度事件对象
            // ev.loaded;//已经上传的文件大小
            // ev.total;//上传总文件大小
         var v = (ev.loaded / ev.total) * 100;
        prog.value = v; //修改进度条的进度
    }
    xhr.onload = function(){
         xhr.responseText;

        //var msg = JSON.parse(xhr.responseText);
        // console.log(msg.pic);//上传图片的路径
        //var img = document.createElement("img"); //创建img标签对象
        //img.src = msg.pic; //给img设置属性src
        //img.onload = function () {
         //div.appendChild(img); //把img追加到div内部
    }
    xhr.send(fdata);
}