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

ajax 原生js操作ajax相关推荐

原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
原生js实现Ajax，JSONP
Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...

ajax 原生js操作ajax

一、ajax

二、实现原生js操作ajax

二、FormData 类型

ajax 原生js操作ajax相关推荐

最新文章

热门文章