ajax 原生js操作ajax

admin管理员组

文章数量:1794759

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); }

本文标签： 操作ajaxjs